U2 java script_1

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

JavaScript 1

Mario Garza Fabremgarzaf@upv.edu.mx

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

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/

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?

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)

++ Incrementx=++y

-- Decrementx=--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

U2 java script_1

Technology

u2 Especialidad

Mpmc u2 ece_arun

U2 EXPERIENCE

PowerPoint Presentation · 2018-03-21 · Di Jalan opera C U2/C, D U2/D, E U2/E, F U2/F, G U2/G, H U2/H, J U2/J, K U2/K, Taman TTDI Jaya, Seksyen 1.12, Shah Alam UntUk Majlis Bandaraya

ANSER U2 Technical Manual - Jetshopnermans.jetshop.se/.../ANSER-U2-Technical-Manual.pdf · U2 Non-printing Check the LED of U2 Connect U2 and power supply The "PRINT" LED is on The

MODELS: U2 SMART U2 SMARTONE U2 PRO-S...U2 Smart c c U2 SmartONE” c c U2 Diesel c U2 Pro c U2 ProS c c c U2 MobileONE” c c * Substrate classification Porous: Paper, cardboard,

Rocket U2 Clients and APIs U2 ODBC Developers Guide · Rocket U2 Clients and APIs U2 ODBC Developers Guide Version 7.241.0 October 2016 UCC-72410-ODBC-UG-01

TennisA4 U2 - osgf.or.jp

U2 Metadata Manager User Guide - Rocket Documentationdocs.rocketsoftware.com/nxt/gateway.dll/RKBnew20/u2 dbtools... · U2 Metadata Manager User Guide Version JAN2015 January 2015

U2 Soap Server Setup - u2devzone.rocketsoftware.com · U2 Soap Server Setup ... • U2 DB server is called IBM-EF020C9DB8.usco.ibm.com ... Advanced tab settings . 5 U2 DB server defined

A great supplement to your phonics program...sat on lap rip the map U2 U2 U2 U2 in the pot had a nap a tin cup bug on rug U2 U2 U2 U2 pup to vet she has wax six and ten a sun hat U2

Braille Sense U2 U2 QWERTY and U2 MINI - HIMS inc · Braille Sense U2, U2 QWERTY and U2 MINI U2 for Deaf Blind Communication r-bsu150801 4616 W. Howard Lane, Suite 960, Austin, Texas

U2 SIEHE UMSCHLAG

OpenInsight and U2 Databases. What is OI for U2?

Dublin - U2

W11 Tour Nürnberg Nordost / U2 · 2015-09-15 · W11 Tour Nürnberg Nordost / U2 W11 Tour Nürnberg Nordost / U2 W11 Tour Nürnberg Nordost / U2 Opernhaus Seite 1 Staatliches Bauamt

U2 L4 grammar

Dublin & U2

U2 Play Guitar With U2

U2 notestimeline