U2 java script_1

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

JavaScript 1

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 1/31

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

Contents I

1 Introduction

2 Writing JavaScript code

3 Writing Into HTML Output

4 Changing content, attributes and style

5 Events

6 Validation

7 Semicolon, Case Sensitive, Comments

8 Variables

9 Arrays

10 Functions

11 Operators


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.


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


Validate Input

JavaScript is commonly used to validate input.

f u n c t i o n myFunction ( ){

v a r x=document . getE lementBy Id ( ”demo” ) . v a l u e ;

i f ( x==”” | | isNaN ( x ) ){

a l e r t ( ”Not Numeric ” ) ;

}}


Validate Input

The function could be called when a form is submitted:

f u n c t i o n v a l i d a t e F o r m ( ){v a r x=document . getE lementBy Id ( ” e l e me nt ” ) . v a l u e ;

i f ( x==”” | | isNaN ( x ) ) r e t u r n f a l s e ;}...<form onsubmit=” r e t u r n v a l i d a t e F o r m ( ) ”>. . . .</ form>


JavaScript - Semicolon

Semicolon “;” separates JavaScript statements.

Normally you add a semicolon at the end of each executablestatement.

Using semicolons also makes it possible to write manystatements on one line.

You might see examples without semicolons. Ending statementswith semicolon is optional in JavaScript.

NO EN ESTE CURSO!!!


JavaScript - Case Sensitive

JavaScript is Case Sensitive

Watch your capitalization closely when you write JavaScriptstatements.

A function getElementById is not the same asgetElementbyID.

A variable named myVariable is not the same as MyVariable.


JavaScript - Comments

Comments will not be executed by JavaScript

Comments can be added to explain the JavaScript, or to makethe code more readable.

Single-line comments start with //

Multi-line comments start with /* and end with */


JavaScript - Variables

JavaScript variables are “containers” for storing information.

You declare JavaScript variables with the var keyword:

var m;var x=5;var y=6;var z=x+y;var lastname=”Doe”, age=30, job=”carpenter”;

Variable names must begin with a letter

Variable names can also begin with $ and

Variable names are case sensitive


JavaScript - Variables

JavaScript variables are “containers” for storing information.

You declare JavaScript variables with the var keyword:

var m;var x=5;var y=6;var z=x+y;var lastname=”Doe”, age=30, job=”carpenter”;

Variable names must begin with a letter

Variable names can also begin with $ and

Variable names are case sensitive


JavaScript - Variables - Data Types

var pi=3.14;

var person=”John Doe”;

var answer=’Yes I am!’;

var y=123e5; // 12300000

var z=123e-5; // 0.00123

When you assign a text value to a variable, put double orsingle quotes around the value.

When you assign a numeric value to a variable, do not putquotes around the value.



JavaScript Has Dynamic Types:

var x; // Now x is undefined

var x = 5; // Now x is a Number

var x = ”John”; // Now x is a String



Booleans:

var x=true;

var y=false;


JavaScript - Local and Global Variables

Local Variables

A variable declared (using var) within a JavaScript functionbecomes LOCAL and can only be accessed from within thatfunction (local scope).

Lifetime: deleted as soon as the function is completed.

Global Variables

Variables declared outside a function, become GLOBAL, and allscripts and functions on the web page can access it.

Lifetime: deleted when you close the page.

If you assign a value to a variable that has not yet been declared,the variable will automatically be declared as a GLOBAL variable.



Local Variables



Global Variables






Local Variables



Global Variables






Local Variables



Global Variables





JavaScript Arrays

Array: special variable, holds more than one value at a time.

Regular

var cars=new Array();cars[0]=”Saab”;cars[1]=”Volvo”;cars[2]=”BMW”;

Condensed

var cars=new Array(”Saab”,”Volvo”,”BMW”);

Literal

var cars=[”Saab”,”Volvo”,”BMW”];


JavaScript Arrays


Regular


Condensed


Literal



JavaScript Arrays


Regular


Condensed


Literal



JavaScript Arrays


Regular


Condensed


Literal



JavaScript Arrays


Regular


Condensed


Literal



JavaScript Arrays

Array indexes are zero-based.

You refer to an element in an array by referring to the index number.

var name=myCars[0];

myCars[0]=”Opel”;


JavaScript Arrays

In JavaScript, all things are objects. You can have different objectsin one array:

You can have variables of different types in the same Array.

You can have objects in an Array.

You can have functions in an Array.

You can have arrays in an Array:

myArray[0]=5;myArray[1]=myFunction;myArray[2]=myCars;myArray[3]=“string”;


JavaScript Functions

A function is a block of code that will be executed when”someone” calls it:

<s c r i p t>f u n c t i o n myFunction ( var1 , v a r 2 ){

some code . . .}

</ s c r i p t>...<button o n c l i c k=” myFunction ( argument1 , argument2 ) ”>Try i t</ button>


JavaScript Functions - Return

The return statement allows you to return a value back to wherethe call was made.

When using the return statement, the function will stop executing,and return the specified value.


v a r x =5;r e t u r n x ;

}</ s c r i p t>

The return statement is also used when you simply want to exit afunction (return value is optional).


JavaScript Arithmetic Operators

Given that y=5:

Operator Description Example Result of x Result of y

+ Addition x=y+2

- Subtraction x=y-2

* Multiplication x=y*2

/ Division x=y/2

%Modulus (division remainder)

x=y%2

++ Incrementx=++y

x=y++

-- Decrementx=--y

x=y--


JavaScript Arithmetic Operators

Given that y=5:

Operator Description Example Result of x Result of y

+ Addition x=y+2 7 5

- Subtraction x=y-2 3 5

* Multiplication x=y*2 10 5

/ Division x=y/2 2.5 5

%Modulus (division remainder)

x=y%2 1 5

++ Incrementx=++y 6 6

x=y++ 5 6

-- Decrementx=--y 4 4

x=y-- 5 4


JavaScript Assignment Operators

Given that x=10 and y=5:

Operator Example Same As Result

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0


JavaScript Comparison Operators

Given that x=5:

Operator Description Comparing Returns

== equal tox==8 false

x==5 true

=== exactly equal to (equal value and equal type)x==="5" false

x===5 true

!= not equal x!=8 true

!== not equal (different value or different type)x!=="5" true

x!==5 false

> greater than x>8 false

< less than x<8 true

>= greater than or equal to x>=8 false

<= less than or equal to x<=8 true


JavaScript Logical Operators

Given that x=6 and y=3:

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true


Technology

U2 java script_1