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

▶

cs142 section javascript mischief

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

Jul 23, 2023 48 likes •399 views

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

slide-1

SLIDE 1

CS142: Section Javascript Mischief

Elie Bursztein

16th Jan. 2008

Elie Bursztein CS142: Section Javascript Mischief 1 / 10

slide-2

SLIDE 2

HTML (Again)

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-3

SLIDE 3

HTML (Again)

◮ <body>

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-4

SLIDE 4

HTML (Again)

◮ <body> ◮ <div>

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-5

SLIDE 5

HTML (Again)

◮ <body> ◮ <div> ◮ <a>

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-6

SLIDE 6

HTML (Again)

◮ <body> ◮ <div> ◮ <a> ◮ <ul>

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-7

SLIDE 7

HTML (Again)

◮ <body> ◮ <div> ◮ <a> ◮ <ul> ◮ <li>

Elie Bursztein CS142: Section Javascript Mischief 2 / 10

slide-8

SLIDE 8

Linking CSS to HTML elements

How do you alter a specific HTML element with CSS ?

Elie Bursztein CS142: Section Javascript Mischief 3 / 10

slide-9

SLIDE 9

Linking CSS to HTML elements

How do you alter a specific HTML element with CSS ?

◮ tag

Elie Bursztein CS142: Section Javascript Mischief 3 / 10

slide-10

SLIDE 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

slide-11

SLIDE 11

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

slide-12

SLIDE 12

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

slide-13

SLIDE 13

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

slide-14

SLIDE 14

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

slide-15

SLIDE 15

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

slide-16

SLIDE 16

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

slide-17

SLIDE 17

Example

How do you change this link href ? <a href=“#” class=“myclass” id=“myid”>someurl</a>

Elie Bursztein CS142: Section Javascript Mischief 6 / 10

slide-18

SLIDE 18

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

slide-19

SLIDE 19

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

slide-20

SLIDE 20

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

slide-21

SLIDE 21

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

slide-22

SLIDE 22

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

slide-23

SLIDE 23

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

slide-24

SLIDE 24

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

slide-25

SLIDE 25

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

slide-26

SLIDE 26

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

slide-27

SLIDE 27

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

slide-28

SLIDE 28

Some examples

Here is some examples of handlers:

Elie Bursztein CS142: Section Javascript Mischief 9 / 10

slide-29

SLIDE 29

Some examples

Here is some examples of handlers:

◮ user click: <a onclick=“somefunction()”

Elie Bursztein CS142: Section Javascript Mischief 9 / 10

slide-30

SLIDE 30

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

slide-31

SLIDE 31

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

slide-32

SLIDE 32

Magic ?

How do you make an element disappear ?

Elie Bursztein CS142: Section Javascript Mischief 10 / 10

slide-33

SLIDE 33

Magic ?

How do you make an element disappear ?

◮ visibility: visible or hidden

Elie Bursztein CS142: Section Javascript Mischief 10 / 10

slide-34

SLIDE 34

Magic ?

How do you make an element disappear ?

◮ visibility: visible or hidden ◮ display: block, inline, none

Elie Bursztein CS142: Section Javascript Mischief 10 / 10

slide-35

SLIDE 35

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