opportunity to explore topic areas hands-‐on with the instructor without grade pressure :me constraints – Please try to duplicate what the instructor is doing at the same :me it is being presented • Stop the instructor if you have problems. Don’t be concerned about “holding up the class” • Feel free to explore on your own aEer you are successful following the instructor • Please ask ques:ons, make comments, or point out errors • Save your work! You may want to refer to it later. • Ask for addi:onal examples or areas you are interested in whenever.
“client” that requests via hUp a file from the server – This is called a “pull” or “get” request – There is also “push” but this is more complicated • Let’s see this “raw” without a browser telnet itm-vm.shidler.hawaii.edu 80 GET /itm352student/text.html HTTP/1.1 HOST: itm-vm.shidler.hawaii.edu • Browser receives file and processes it as it has been configured – E.g. HTML text is “drawn” – Different browsers may process the file differently! • E.g. look of buUons, text boxes etc.
– They are set in advance, not created or modified at request :me • Dynamic web pages are processed (at least par:ally) at request :me by scrip:ng code to create the output – Allows changes at request :me – There are two opportuni:es for this • (1) on the server aEer request – Though a “gateway” (CGI) or server module – Scripts are processed on the server • (2) on the client aEer the file received – Internal to Browser (API, plugin, etc.) – Scripts are passed from the server, processed on the client – There are many scrip:ng languages • PHP is most popular for sever • JavaScript most popular for client (2) (2)
way things in markup (HTML, XML, etc.) documents are represented within a (standards compliant) browser – Objects are organized in a tree • Logically and for a page • Lets use Chrome tools to look – Internal scrip:ng languages such as JavaScript can access and manipulate the DOM
(HTML5) + Presenta5on Defini5on Language (CSS) + DOM + Client-‐side Scrip5ng Language (JavaScript) • It’s absolutely incredible what you can do with the above!
Pages! – Hello World! • console.log() • alert() • document.write() • <div> DOM object – document.getElementById().innerHTML – Date/Time page • Date().toString() – Refresh the page – Why is this page “dynamic” – Where is this date coming from? – Can you think of how to make this a :cking clock?
• <input type="button" value="Click me!" onclick="alert('Ouch!');"> – Note how you mix single and double quotes. You can reverse this too. – Your turn: make this write Ouch! in a <div> » Refresh and see what happens. Do you know why? » Bonus: how would you get it to write Ouch! In the same line as the buUon? » Bonus2: try other events e.g. onmouseover » Bonus3: can you add another buUon to remove the text? • <input type=”text” id=“input-field"> – Get value of this aEer click and write to document element – Your turn: change the buUon label aEer click with the text in input-‐field • <input type="text" id="input-box" onkeypress="document.getElementById('hello- div').innerHTML = this.value"> – Your turn: make this change the page :tle
dport96
pauljervisheath
lara
eileencodes
maggiecrowley
aleyda
smashingmag
eitanlees
kneath
trallard
jacobian
