U2 java script

Programacion Web- Unidad 2: Programacion del lado del cliente -

JavaScript

Mario Garza [email protected]

Universidad Politecnica de VictoriaCd. Victoria, Tamaulipas, Mexico.

http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/

Enero - Abril, 2014

Programacion Web - U2: Programacion del lado del cliente - JavaScript 1/11

http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/

Contents I

1 Introduction


Referencias principales

La mayor parte del contenido de este material ha sido tomado (oadaptado) de las siguientes fuentes principales:

http://www.w3schools.com/

Web Programming Step by Stepby Marty Stepp, Jessica Miller, and Victoria Kirsthttp://www.webstepbook.com/


http://www.w3schools.com/

http://www.webstepbook.com/

What is JavaScript?

Lightweight programming language

Used to make web pages interactive

Perform calculations on user’s computer

Can use resourses/information from the user’s computer

Can insert dynamic content into HTML

Can modify a page without having to post back to the server

Can make small, quick changes to page without waiting for server

Can respond to user actions (events) like clicks and key presses

NOT related to Java other than by name and syntactic similarities

Web standard (but not supported identically by all browsers)


What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












What is JavaScript?












Writing JavaScript code

The <script> and </script> tells where the JavaScriptcode starts and ends.

<s c r i p t>a l e r t ( ” J a v a S c r i p t ! ” ) ;

</ s c r i p t>

You can place an unlimited number of scripts in an HTMLdocument.

Scripts can be in the <body> or in the <head> section ofHTML, or in both.




</ s c r i p t>

In the above example, JavaScript code is executed while the page loads.

<s c r i p t>f u n c t i o n myFunction ( ){

a l e r t ( ” J a v a S c r i p t ! ” ) ;}

</ s c r i p t>

Now, JavaScript code is executed when we can call the function.




</ s c r i p t>

In the above example, JavaScript code is executed while the page loads.

<s c r i p t>f u n c t i o n myFunction ( ){

a l e r t ( ” J a v a S c r i p t ! ” ) ;}

</ s c r i p t>

Now, JavaScript code is executed when we can call the function.


Writing Into HTML Output

JavaScript can write directly into the HTML output stream:

<s c r i p t>document . w r i t e ( ”<h1>heading </h1>” ) ;document . w r i t e ( ”<p>p a r a g r a p h .</p>” ) ;

</ s c r i p t>

You can only use document.write in the HTML output. If you useit after the document has loaded (e.g., in a function), the wholedocument will be overwritten.


Changing HTML Content

Find the element:

x=document.getElementById(“demo”);

Change the content:

x.innerHTML=“Hello JavaScript!”;


Changing HTML attributes

<s c r i p t>f u n c t i o n changeImage ( ){

e l em en t=document . getE lementBy Id ( ’ myimage ’ )i f ( e l e me nt . s r c . match ( ” bu lbon ” ) ){

e l em en t . s r c=” p i c b u l b o f f . g i f ” ;} e l s e {

e l em en t . s r c=” p i c b u l b o n . g i f ” ;}

}</ s c r i p t>...<img id=”myimage” o n c l i c k=” changeImage ( ) ”s r c=” p i c b u l b o f f . g i f ” width=” 100 ” height=” 180 ”>


Changing Styles

Find the element:

x=document.getElementById(“demo”);

Change the style:

x.style.color=“#FF0000”;


Reacting to Events

<button type=” button ” o n c l i c k=” a l e r t ( ’ Welcome ! ’ ) ”>C l i c k Me!

</ button>

TAREA:

Input Events. onblur, onchange, onfocus, onselect,onsubmit, onreset, onkeydown, onkeypress, onkeyup

Mouse Events. onclick, ondblclick, onmouseover,onmouseout, onmousedown, onmouseup, onmousemove

Others. onload, onload, onerror, onunload, onresize


Technology

U2 java script