CS142: Section Javascript Mischief Elie Bursztein - 16th Jan. 2008 - PowerPoint PPT Presentation

CS142: Section Javascript Mischief Elie Bursztein - 16th Jan. 2008 Elie Bursztein CS142: Section Javascript Mischief 1 / 10

HTML (Again) Elie Bursztein CS142: Section Javascript Mischief 2 / 10

HTML (Again) ◮ < body > Elie Bursztein CS142: Section Javascript Mischief 2 / 10

HTML (Again) ◮ < body > ◮ < div > Elie Bursztein CS142: Section Javascript Mischief 2 / 10

HTML (Again) ◮ < body > ◮ < div > ◮ < a > Elie Bursztein CS142: Section Javascript Mischief 2 / 10

HTML (Again) ◮ < body > ◮ < div > ◮ < a > ◮ < ul > Elie Bursztein CS142: Section Javascript Mischief 2 / 10

HTML (Again) ◮ < body > ◮ < div > ◮ < a > ◮ < ul > ◮ < li > Elie Bursztein CS142: Section Javascript Mischief 2 / 10

Linking CSS to HTML elements How do you alter a specific HTML element with CSS ? Elie Bursztein CS142: Section Javascript Mischief 3 / 10

Linking CSS to HTML elements How do you alter a specific HTML element with CSS ? ◮ tag Elie Bursztein CS142: Section Javascript Mischief 3 / 10

Linking CSS to HTML elements How do you alter a specific HTML element with CSS ? ◮ tag ◮ class Elie Bursztein CS142: Section Javascript Mischief 3 / 10

Linking CSS to HTML elements How do you alter a specific HTML element with CSS ? ◮ tag ◮ class ◮ id Elie Bursztein CS142: Section Javascript Mischief 3 / 10

Example How do you color this link in red ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > Elie Bursztein CS142: Section Javascript Mischief 4 / 10

Example How do you color this link in red ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > ◮ tag : a { color: red; } Elie Bursztein CS142: Section Javascript Mischief 4 / 10

Example How do you color this link in red ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > ◮ tag : a { color: red; } ◮ class : .myclass { color:#FF0000; } Elie Bursztein CS142: Section Javascript Mischief 4 / 10

Example How do you color this link in red ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > ◮ tag : a { color: red; } ◮ class : .myclass { color:#FF0000; } ◮ id : #myid { color:rgb(255, 0, 0); } Elie Bursztein CS142: Section Javascript Mischief 4 / 10

Linking Javascript and HTML How do you alter a specific HTML element with Javascript ? ◮ Each element is an object. ◮ Javascript allows to select an element by its id. Elie Bursztein CS142: Section Javascript Mischief 5 / 10

Example How do you change this link href ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > Elie Bursztein CS142: Section Javascript Mischief 6 / 10

Example How do you change this link href ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > ◮ v = document.getElementById(’myid’); Elie Bursztein CS142: Section Javascript Mischief 6 / 10

Example How do you change this link href ? < a href=“#” class=“myclass” id=“myid” > someurl < /a > ◮ v = document.getElementById(’myid’); ◮ v.href = “http://mysite.com”; Elie Bursztein CS142: Section Javascript Mischief 6 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions Elie Bursztein CS142: Section Javascript Mischief 7 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions ◮ Click Elie Bursztein CS142: Section Javascript Mischief 7 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions ◮ Click ◮ Submission Elie Bursztein CS142: Section Javascript Mischief 7 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions ◮ Click ◮ Submission ◮ Inputs Elie Bursztein CS142: Section Javascript Mischief 7 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions ◮ Click ◮ Submission ◮ Inputs ◮ Loading/Unloading Elie Bursztein CS142: Section Javascript Mischief 7 / 10

WebSite are event driven One of the key difference between a text and a page : Page reacts to user actions ◮ Click ◮ Submission ◮ Inputs ◮ Loading/Unloading ◮ Focus/Unfocus Elie Bursztein CS142: Section Javascript Mischief 7 / 10

Linking Event and Javascript How do you bind a Javascript function to an Event ? ◮ Most of HTML tags support action handlers. Elie Bursztein CS142: Section Javascript Mischief 8 / 10

Linking Event and Javascript How do you bind a Javascript function to an Event ? ◮ Most of HTML tags support action handlers. ◮ We bind javascript function to these handlers. Elie Bursztein CS142: Section Javascript Mischief 8 / 10

Some examples Here is some examples of handlers: Elie Bursztein CS142: Section Javascript Mischief 9 / 10

Some examples Here is some examples of handlers: ◮ user click: < a onclick=“somefunction()” Elie Bursztein CS142: Section Javascript Mischief 9 / 10

Some examples Here is some examples of handlers: ◮ user click: < a onclick=“somefunction()” ◮ mouse over: < a onmouseover=“somefunction()” Elie Bursztein CS142: Section Javascript Mischief 9 / 10

Some examples Here is some examples of handlers: ◮ user click: < a onclick=“somefunction()” ◮ mouse over: < a onmouseover=“somefunction()” ◮ element loaded: < a onload=“somefunction()” Elie Bursztein CS142: Section Javascript Mischief 9 / 10

Magic ? How do you make an element disappear ? Elie Bursztein CS142: Section Javascript Mischief 10 / 10

Magic ? How do you make an element disappear ? ◮ visibility: visible or hidden Elie Bursztein CS142: Section Javascript Mischief 10 / 10

Magic ? How do you make an element disappear ? ◮ visibility: visible or hidden ◮ display: block, inline, none Elie Bursztein CS142: Section Javascript Mischief 10 / 10

Magic ? How do you make an element disappear ? ◮ visibility: visible or hidden ◮ display: block, inline, none Do you know the difference ? Elie Bursztein CS142: Section Javascript Mischief 10 / 10