Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I Javascript Jongwook Woo, PhD California State University, Los Angeles Computer Information System Department

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content nStatements nComments nVariables nOperators nFunctions nLoops

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System nTHE scripting language of the Web. madd interactivity to HTML pages ma lightweight programming language musually embedded directly into HTML pages man interpreted language –means that scripts execute without preliminary compilation –That runs on client site, that is, web browser mEveryone can use JavaScript without purchasing a license nused in billions of Web pages mto add functionality, validate forms, communicate with the server, and much more JavaScript

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System What can JavaScript do? nJavaScript gives HTML designers a programming tool mAlmost anyone can put small "snippets" of code into their HTML pages nJavaScript can react to events – mexecute when something happens, –like when a user clicks on an HTML element nJavaScript can read and write HTML elements mcan read and change the content of an HTML element nJavaScript can be used to validate data mused to validate form data before it is submitted to a server

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System What can JavaScript do? (Cont’d) nJavaScript can be used to detect the visitor's browser mload another page specifically designed for that browser nJavaScript can be used to create cookies mused to store and retrieve information on the visitor's computer

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Statements nJavaScript is Case Sensitive mUnlike HTML, watch your capitalization closely nA JavaScript statement mis a command to a browser. –to tell the browser what to do. document.write("Hello Dolly"); mtells the browser to write "Hello Dolly" to the web page: mThe semicolon is optional (according to the JavaScript standard), –the end of the statement. –a good programming practice. –Note: Using semicolons makes it possible to write multiple statements on one line.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System JavaScript Codes nis a sequence of JavaScript statements. nExample document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. ");

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System JavaScript Blocks nJavaScript statements can be grouped together in blocks. mto make the sequence of statements execute together. nBlocks start with a left curly bracket {, mand end with a right curly bracket } nExample { document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. "); }

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System JavaScript Comments nmake the code more readable nSingle line comments start with // // Write a heading document.write(" This is a heading "); // heading nJavaScript Multi-Line Comments mMulti line comments start with /* and end with */. mThe following example uses a multi line comment to explain the code: /* The code below will write one heading and two paragraphs */ document.write(" This is a heading ");

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System JavaScript Variables nused to hold values or expressions mAs with algebra ndeclare JavaScript variables with the var keyword: var x; var carname; mthe variables are empty (they have no values yet). nyou can also assign values to the variables var x=5; var carname="Volvo"; mAfter the execution of the statements above, the variable x will hold the value 5, –and carname will hold the value Volvo. mNote: When you assign a text value to a variable, use quotes around the value.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Rules for JavaScript variable names nVariable names are case sensitive m(y and Y are two different variables) mNote: Because JavaScript is case-sensitive, variable names are case- sensitive. nVariable names must begin mwith a letter or the underscore character nLocal JavaScript Variables mA variable declared within a JavaScript function becomes LOCAL –and can only be accessed within that function. –the variable has local scope mLocal variables are destroyed when you exit the function.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System JavaScript variables nGlobal JavaScript Variables mVariables declared outside a function become GLOBAL, –and all scripts and functions on the web page can access it. mGlobal variables are destroyed when you close the page. mIf you declare a variable, without using "var", the variable always becomes GLOBAL. nAssigning Values to Undeclared JavaScript Variables mThese statements: x=5; carname="Volvo"; mwill declare the variables x and carname as global variables (if they don't already exist).

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Arithmetic Operators n= is used to assign values. n+ is used to add values. y=5; z=2; x=y+z; mThe value of x, after the execution of the statements above, is 7. nThe + Operator Used on Strings mused to add string variables or text values together. mTo add two or more string variables together, use the + operator. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; mAfter the execution of the statements above, the variable txt3 contains "What a verynice day".

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Arithmetic Operators (Given that y=5) OperatorDescriptionExampleResult +Additionx=y+2 x=7y=5 -Subtractionx=y-2 x=3y=5 *Multiplicatio n x=y*2 x=10y=5 /Divisionx=y/2 x=2.5y=5 %Modulus (division remainder) x=y%2 x=1y=5 ++Incrementx=++y x=6y=6 x=y++ x=5y=6 --Decrementx=--y x=4y=4 x=y-- x=5y=4

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Comparison Operators (Given that x=5) OperatorDescriptionExample ==is equal tox==8 is false x==5 is true ===is exactly equal to (value and type) x===5 is true x==="5" is false !=is not equalx!=8 is true >is greater thanx>8 is false <is less thanx<8 is true >=is greater than or equal to x>=8 is false <=is less than or equal tox<=8 is true

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Logical Operators nLogical operators are used to determine the logic between variables or values. n&&: both operands should be true to have the result true n||: at least one operand should be true to have the result true OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Functions nIn Math: mFunction declaration: –f(x) = x + 1 mFunction call: y = f(x) when x = 2 –What is y? nFunction Syntax in JavaScript function functionname(var1,var2,...,varX) { some code } mThe parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Functions (Example) function displaymessage() { alert("Hello World!"); }

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Functions with Return Statement nspecify the value that is returned from the function. function product(a,b) { return a*b; } document.write(product(4,3));

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Loop nwant the same block of code to run over and over again in a row. nIn JavaScript, there are two different kind of loops: mfor - loops through a block of code a specified number of times mwhile - loops through a block of code while a specified condition is true nThe for Loop mThe for loop is used when you know in advance how many times the script should run. for (variable=startvalue; variable<=endvalue; variable=variable+increment) { code to be executed }

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System For Loop var i=0; for (i=0;i "); } The number is 0 The number is 1 The number is 2 … The number is 5