Responsive Web Design Niels Olof Bouvin 1
Overview Responsiveness? Responsiveness through scripting Events in the Web browser Web browser APIs The Number Guessing Game Talking to servers Responsiveness through styling Maps in the Browser 2
Responsiveness? responsiveness | r ɪˈ sp ɒ ns ɪ vn ə s | noun [mass noun] the quality of reacting quickly and positively A Website should adapt to its user providing a quickly updating user interface adapt its presentation to the user’s device We will look at this from two sides adding JavaScript to Web pages in order to avoid complete reloads extending our CSS layout, so that we can support both wide and narrow screens 3
Overview Responsiveness? Responsiveness through scripting Events in the Web browser Web browser APIs The Number Guessing Game Talking to servers Responsiveness through styling Maps in the Browser 4
Back to the Web browser One of the most transformational developments in Web design and development was the realisation that you could break free of the pure client/server model Rather than having to reload the entire Web page from the server, parse, and render it (again) to re fm ect some change, it became possible to have a script on the page retrieve changes from the server, and update the Web page in situ much smaller download, no need to re-render ⇒ much faster, fm uid and responsive 5
Overview Responsiveness? Responsiveness through scripting Events in the Web browser Web browser APIs The Number Guessing Game Talking to servers Responsiveness through styling Maps in the Browser 6
Events, events, events The Web browser is governed by events the page has loaded, or a resource has loaded the user has clicked something, or dragged something, or dropped something the user has resized the browser window If we want something to happen when an event occurs, we have to subscribe to that event, or, in proper Web browser parlance register an event handler 7
app └── index.js An event listener: main.js public/ ├── index.html ├── js │ └── main.js … └── style <body> └── main.css <button id="button">Press this Button!</button> </body> </html> const btn = document.querySelector('#button') function randomInt (limit = 256) { return Math.floor(limit * Math.random()) } function bgcChange (e) { const rndCol = `rgb(${randomInt()}, ${randomInt()}, ${randomInt()})` console.log(e) e.target.style.backgroundColor = rndCol } btn.addEventListener('click', bgcChange) Whenever the button is clicked, the registered function is called (with the event as argument), and it modi fj es the button’s background colour 8
A selection of events for all elements for windows click keypress dblclick keydown focus keyup blur mouseover mouseout 9
app └── index.js Adding content via JavaScript public/ ├── index.html ├── js │ └── main.js └── style └── main.css for (let i = 1; i <= 32; i++) { const myDiv = document.createElement('div') document.body.appendChild(myDiv) } const divs = document.querySelectorAll('div') for (let myDiv of divs) { myDiv.addEventListener('mouseover', bgcChange) } Just as we can change the styling of existing elements on a page, we can add new elements programmatically you will recall the Document Object Model, which forms a tree of element rooted in <html> here, we added new children to the <body> element 10
Form validation It can be a great convenience to be able to validate form entry before it actually makes it to the server (where we of course also have to validate it) never, ever trust the user’s input But, there is already a default action for pressing the Submit button on a form, so what to do? Events can be prevented from happening, until such time we are ready to permit them to execute 11
app └── index.js db ├── db.js The form: form.hbs └── greetings.sqlite public ├── js │ └── main.js └── style └── main.css views ├── form.hbs ├── greeting.hbs └── layouts └── main.hbs <form method="POST" action="/greetings" id="greetings-form"> <div> <label for="recipient">Recipient:</label> <input type="text" id="recipient" name="recipient"> <div id="recipient-feedback" class="feedback"></div> </div> <div> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <div id="message-feedback" class="feedback"></div> </div> <div> <button type="submit">Submit</button> </div> </form> I have added a couple of empty, but named, <div> which will be used for error messages 12
app └── index.js db ├── db.js The code: main.js └── greetings.sqlite public ├── js │ └── main.js └── style └── main.css views ├── form.hbs ├── greeting.hbs └── layouts └── main.hbs const form = document.querySelector('#greetings-form') const recipient = document.querySelector('#recipient') const message = document.querySelector('#message') const recipientFeedback = document.querySelector('#recipient-feedback') const messageFeedback = document.querySelector('#message-feedback') form.addEventListener('submit', (e) => { if (recipient.value === '') { e.preventDefault() recipientFeedback.textContent = 'Please add a recipient' } else { recipientFeedback.textContent = '' } if (message.value === '') { e.preventDefault() messageFeedback.textContent = 'Please add a message' } else { messageFeedback.textContent = '' } }) If a fj eld is empty, we put out an error message, and prevent the submit event from occurring 13
Form validation in action 14
Event capturing and bubbling For all elements on a Web page, we can add event listeners But what happens if we add the same kind of event listener (e.g., ‘click’) on elements that are contained within each other? Who gets the event? the parent element (the ‘outer’ element), or the child element (‘the ‘inner’ element)? 15
Bad bunny Clicking the video is supposed to play it Clicking the surrounding area is supposed to hide it 16
app └── index.js public The body: index.html ├── index.html ├── js │ └── main.js ├── style │ └── main.css └── video ├── rabbit320.mp4 └── rabbit320.webm <body> <button>Display video</button> <div class="hidden"> <video> <source src="video/rabbit320.webm" type="video/webm"> <source src="video/rabbit320.mp4" type="video/mp4"> <p>Your browser doesn't support HTML5 video. Here is a <a href="video/rabbit320.mp4">link to the video</a> instead.</p> </video> </div> </body> The video element is contained within the <div> which has the class ‘hidden’ from the start (incidentally, this shows you how to add video to your pages, and how to support multiple formats) 17
app └── index.js public The style: main.css ├── index.html ├── js │ └── main.js ├── style │ └── main.css └── video ├── rabbit320.mp4 └── rabbit320.webm div { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 480px; height: 380px; border-radius: 10px; background-color: #eee; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); } .hidden { left: -50%; /* off screen */ } .showing { left: 50%; /* on screen */ } div video { display: block; width: 400px; margin: 40px auto; } 18
app └── index.js public The script: main.js ├── index.html ├── js │ └── main.js ├── style │ └── main.css └── video ├── rabbit320.mp4 └── rabbit320.webm const btn = document.querySelector('button') const videoBox = document.querySelector('div') const video = document.querySelector('video') btn.addEventListener('click', (e) => { videoBox.setAttribute('class', 'showing') }) videoBox.addEventListener('click', (e) => { videoBox.setAttribute('class', 'hidden') }) video.addEventListener('click', (e) => { video.play() }) Seems straight forward enough: click on the button: show the videoBox click on the videoBox: hide the videoBox click on the video: play the video so why does it not work? 19
What happens when an event occurs? Oddly enough, two things: Event capturing: the browser starts from the outer-most ancestor (<html>), checks if it is registered for the event in the capturing phase, runs it if so, and then continues to the next element and so on, until it hits the inner-most element where the event occurred Event bubbling: the browser checks if the element which had the event occur is registered for that event in the bubbling phase, runs it if so, and then continues outwards until it hits the outer-most element (<html>) 20
Recommend
More recommend
