u2 java script_1
TRANSCRIPT
![Page 1: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/1.jpg)
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
![Page 2: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/2.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 2/31
![Page 3: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/3.jpg)
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/
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 3/31
![Page 4: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/4.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 5: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/5.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 6: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/6.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 7: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/7.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 8: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/8.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 9: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/9.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 10: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/10.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 11: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/11.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 12: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/12.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 13: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/13.jpg)
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)
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 4/31
![Page 14: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/14.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 5/31
![Page 15: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/15.jpg)
Writing JavaScript code
<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>
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 6/31
![Page 16: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/16.jpg)
Writing JavaScript code
<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>
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 6/31
![Page 17: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/17.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 7/31
![Page 18: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/18.jpg)
Changing HTML Content
Find the element:
x=document.getElementById(“demo”);
Change the content:
x.innerHTML=“Hello JavaScript!”;
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 8/31
![Page 19: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/19.jpg)
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 ”>
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 9/31
![Page 20: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/20.jpg)
Changing Styles
Find the element:
x=document.getElementById(“demo”);
Change the style:
x.style.color=“#FF0000”;
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 10/31
![Page 21: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/21.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 11/31
![Page 22: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/22.jpg)
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 ” ) ;
}}
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 12/31
![Page 23: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/23.jpg)
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>
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 13/31
![Page 24: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/24.jpg)
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!!!
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 14/31
![Page 25: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/25.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 15/31
![Page 26: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/26.jpg)
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 */
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 16/31
![Page 27: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/27.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 17/31
![Page 28: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/28.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 17/31
![Page 29: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/29.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 18/31
![Page 30: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/30.jpg)
JavaScript - Variables - Data Types
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 19/31
![Page 31: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/31.jpg)
JavaScript - Variables - Data Types
Booleans:
var x=true;
var y=false;
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 20/31
![Page 32: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/32.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 21/31
![Page 33: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/33.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 21/31
![Page 34: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/34.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 21/31
![Page 35: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/35.jpg)
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.
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 21/31
![Page 36: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/36.jpg)
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”];
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 22/31
![Page 37: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/37.jpg)
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”];
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 22/31
![Page 38: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/38.jpg)
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”];
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 22/31
![Page 39: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/39.jpg)
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”];
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 22/31
![Page 40: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/40.jpg)
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”];
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 22/31
![Page 41: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/41.jpg)
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”;
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 23/31
![Page 42: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/42.jpg)
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”;
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 24/31
![Page 43: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/43.jpg)
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>
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 25/31
![Page 44: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/44.jpg)
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.
<s c r i p t>f u n c t i o n myFunction ( ){
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).
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 26/31
![Page 45: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/45.jpg)
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--
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 27/31
![Page 46: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/46.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 28/31
![Page 47: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/47.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 29/31
![Page 48: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/48.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 30/31
![Page 49: U2 java script_1](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f3914b4c905cd048b4f4f/html5/thumbnails/49.jpg)
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
Programacion Web - U2: Programacion del lado del cliente - JavaScript 1 31/31