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

cs142 section javascript mischief
SMART_READER_LITE
LIVE PREVIEW

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


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