Computer Science & Engineering JAVASCRIPT Computer Science & Engineering
JavaScript and Client-Side Scripting When HTML was first developed, Web pages were static Static Web pages cannot change after the browser renders them HTML and XHTML could only be used to produce static documents. JavaScript Client-side scripting language that allows Web page authors to develop interactive Web pages and sites csehui.wordpress.com Computer Science & Engineering
JavaScript and Client-Side Scripting Scripting language that runs on a local browser (on the client tier) JavaScript gives you the ability to: Turn static Web pages into applications such as games or calculators Change the contents of a Web page after a browser has rendered it Create visual effects such as animation Control the Web browser window itself csehui.wordpress.com Computer Science & Engineering
The <script> Element Scripts JavaScript programs contained within a Web page <script> element Tells the Web browser that the scripting engine must interpret the commands it contains. The type attribute tells the browser which scripting language and which version of the scripting language is being used. csehui.wordpress.com Computer Science & Engineering
Understanding JavaScript Objects Programming code and data that can be treated as an individual unit or component Procedures Individual statements used in a computer program grouped into logical units Used to perform specific tasks Methods Procedures associated with an object For example: loan.calcPayments(); csehui.wordpress.com Computer Science & Engineering
Understanding JavaScript Objects Property Piece of data associated with an object Assign a value to a property using an equal sign. loan.interest = .08; Argument Information that must be provided to a method. Providing an argument for a method is called passing arguments loan.calcPayments(800); csehui.wordpress.com Computer Science & Engineering
The write() and writeln() Document object represents the content of a browser’s window You create new text on a Web page with the write() method or the writeln() method of the Document object Both methods require a text string as an argument. Text string or literal string: text that is contained within double or single quotation marks. document.write(“Welcome to Javascript!"); csehui.wordpress.com Computer Science & Engineering
Case Sensitivity in JavaScript JavaScript is case sensitive. Within JavaScript code, object names must always be all lowercase. csehui.wordpress.com Computer Science & Engineering
Comments to a JavaScript Program Nonprinting lines that you place in your code to contain various types of remarks Line comment Hides a single line of code Add two slashes // before the comment text Block comments Hide multiple lines of code Add /* before the first character you want included in the block and */ after the last character in the block csehui.wordpress.com Computer Science & Engineering
Structuring JavaScript Code When you add JavaScript code to a document, you need to follow certain rules regarding the placement and organization of that code The following sections describe some important rules to follow when structuring JavaScript code. Include as many script sections as you like within a document. When you include multiple script sections in a document, you must include a <script> element for each section. csehui.wordpress.com Computer Science & Engineering
Placing JavaScript in the Document You can place <script> elements in either the document head or document body Good idea to place as much of your JavaScript code as possible in the document head Important to put JavaScript code in document head When code performs behind-the-scenes tasks required by script sections in the document body csehui.wordpress.com Computer Science & Engineering
Placing JavaScript in the Document <head> <Script language=”JavaScript”> Javascript Comments </script> </head> csehui.wordpress.com Computer Science & Engineering
Placing JavaScript in the Document <HTML> <HEAD> <script language="javascript" > document.write(“What is your name? ”); </script> </HEAD> <BODY> content of page </BODY> </HTML> csehui.wordpress.com Computer Science & Engineering
Creating a JavaScript Source File Usually designated by the file extension .js Does not contain a <script> element To access JavaScript code saved in an external file, assign to the src attribute of the <script> element the URL of the JavaScript source file Use a combination of embedded JavaScript code and JavaScript source files in your documents csehui.wordpress.com Computer Science & Engineering
Creating a JavaScript Source File <Script SRC=”fileJavascript.js” Language="javascript" > JavaScript program </Script> csehui.wordpress.com Computer Science & Engineering
Data Types and Operators Variable Specific location in computer’s memory Before using a variable: Write a statement that creates the variable and assigns it a name Variable names are case sensitive myVariable, myvariable, MyVariable, and MYVARIABLE are all different variables csehui.wordpress.com Computer Science & Engineering
Declaring and Initializing Variables Use the reserved keyword var to create variables To create a variable named myVariable: var myVariable; Declaring a variable Using a statement to create a variable Initializing a variable Assigning a specific value to it Can be done when you declare the variable var variable_name = value; csehui.wordpress.com Computer Science & Engineering
Declaring and Initializing Variables Assignment operator Equal sign (=) Assigns the value on the right side of expression to the variable on the left side of expression. Value assigned to a variable: Literal string must be enclosed in quotation marks var myName = "Don“; Numeric value is not enclosed in quotation marks. csehui.wordpress.com Computer Science & Engineering
Displaying Variables Can declare multiple variables using a single var keyword Ex: var customerName = "Don Gosselin", orderQuantity = 100, salesTax = .05; Can assign value of one variable to another Ex: var salesTotal; var curOrder = 40; salesTotal = curOrder; csehui.wordpress.com Computer Science & Engineering
document.writeln() method Displaying Variables To print a variable, pass variable name to document.write() or document.writeln() method Example: document.write("<p>Your sales total is $“ + salesTotal + ".</p>"); csehui.wordpress.com Computer Science & Engineering
Modifying Variables To change a variable’s value, use a statement with variable’s name, equal sign, and new value Example: var salesTotal = 40; document.write("<p>Your sales total is $" + salesTotal + ".</p>"); var shipping = 10; salesTotal = salesTotal + shipping; document.write("<p>Your sales total plus shipping is $" + salesTotal + ".</p>"); csehui.wordpress.com Computer Science & Engineering
Modifying Variables csehui.wordpress.com Computer Science & Engineering
Data Types Data type Category of information that a variable contains. Primitive types Data types that can be assigned only a single value. csehui.wordpress.com Computer Science & Engineering
Data Types JavaScript supports two numeric data types: Integers and floating-point numbers Integer Positive or negative number with no decimal places Floating-point number Decimal places (or written in exponential notation) Exponential notation, or scientific notation Shortened format for writing very large numbers or numbers with many decimal places csehui.wordpress.com Computer Science & Engineering
Boolean Values Boolean value Logical value of true or false In JavaScript, words true and false indicate Boolean values Example var repeatCustomer = true; var corporateDiscount = false; document.write("<p>Repeat customer: " + repeatCustomer + "</p>"); document.write("<p>Corporate discount: " + corporateDiscount + "</p>"); csehui.wordpress.com Computer Science & Engineering
Boolean Values csehui.wordpress.com Computer Science & Engineering
Arrays Array: Set of data represented by a single variable name csehui.wordpress.com Computer Science & Engineering
Declaring and Initializing Arrays Element: each piece of data in an array Example: Create an array named hospitalDepts[] that has 10 elements var hospitalDepts = new Array(10); Assign value to first element in: hospitalDepts[] hospitalDepts[0] = "Anesthesia"; Can assign value to elements when array is created hospitalDepts = new Array("Anesthesia", "Molecular Biology", "Neurology"); csehui.wordpress.com Computer Science & Engineering
Accessing Element Information To access an element’s value, include brackets and element index Examples document.writeln(hospitalDepts[0]); // prints "Anesthesia" document.writeln(hospitalDepts[1]); // prints "Molecular Biology" document.writeln(hospitalDepts[2]); // prints "Neurology" csehui.wordpress.com Computer Science & Engineering
Modifying Elements To modify values in existing array elements, include brackets and element index Examples hospitalDepts[0] = "Anesthesia"; // first element hospitalDepts[1] = "Molecular Biology"; // second element hospitalDepts[2] = "Neurology"; // third element csehui.wordpress.com Computer Science & Engineering
The Number of Elements in an Array Determining the Number of Elements in an Array length property of Array class returns the number of elements in an array Syntax array_name.length; csehui.wordpress.com Computer Science & Engineering
The Number of Elements in an Array Example <script> var arr= new Array(); arr[0]= "thu hai"; arr[1]= "Thu ba"; arr[2]= "Thu tu"; arr[3]= "Thu nam"; arr[4]= "Thu sau"; arr[5]= "Thu bay"; for(i=0; i<=5; i++) document.write(arr[i]+ "<br>"); document.write(arr.length+ "<br>");//6 </script> csehui.wordpress.com Computer Science & Engineering
Arithmetic Operators Used to perform mathematical calculations Addition, subtraction, multiplication, division, etc. csehui.wordpress.com Computer Science & Engineering
Arithmetic Operators Prefix operator Placed before a variable Postfix operator Placed after a variable csehui.wordpress.com Computer Science & Engineering
Assignment Operators csehui.wordpress.com Computer Science & Engineering
Comparison and Conditional Operators csehui.wordpress.com Computer Science & Engineering
Logical Operators Logical operators Compare two Boolean operands for equality csehui.wordpress.com Computer Science & Engineering
Strings Text string is text contained within double or single quotation marks Can use text strings as literal values or assign them to a variable Empty string Zero-length string value Valid value for literal strings csehui.wordpress.com Computer Science & Engineering
Concatenation operator (+) String Operators Operators used to combine two strings Concatenation operator (+) Example: var destination = "Jakarta"; var location = "Indonesia"; destination = destination + " is in " + location; Compound assignment operator (+=) destination += " is in Indonesia"; csehui.wordpress.com Computer Science & Engineering
Escape Characters and Sequences csehui.wordpress.com Computer Science & Engineering
Functions, Events, and Control Structures Computer Science & Engineering
Working with Functions Procedures similar to the methods associated with an object Make it possible to treat a related group of JavaScript statements as a single unit Must be contained within a <script> element csehui.wordpress.com Computer Science & Engineering
Working with Functions Syntax: function nameOfFunction(parameters) { statements; } Parameter Variable that is used within a function Placed in parentheses following a function name To execute a function, you must invoke, or call csehui.wordpress.com Computer Science & Engineering
Working with Functions return statement: Returns a value to the statement that called the function Example function averageNumbers(a, b, c) { var sum_of_numbers = a + b + c; var result = sum_of_numbers / 3; return result; } csehui.wordpress.com Computer Science & Engineering
Variable Scope Global variable One that is declared outside a function and is available to all parts of your program. Local variable Declared inside a function and is only available within the function in which it is declared. When a program contains a global variable and a local variable with the same name. The local variable takes precedence when its function is called. csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions ALERT BOX: alert("yourtext"); The user will need to click "OK" to proceed. csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions CONFIRM BOX: confirm("yourtext"); The user needs to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns the value true. If the user clicks "Cancel", the box returns the value false. csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions Example: csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions PROMPT BOX: prompt("yourtext","defaultvalue"); If the user clicks "OK" the prompt box returns the entry. If the user clicks "Cancel" the prompt box returns null. csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions setTimeout(): Set time period after which the command will be executed. Syntax: IdTime=setTimeout(“Command JavaScript”, delayTime); clearTimeout(): Cancel time set by the setTimeout () Syntax : clearTimeout(IdTime ); csehui.wordpress.com Computer Science & Engineering
Using Built-in JavaScript Functions csehui.wordpress.com Computer Science & Engineering
csehui.wordpress.com Computer Science & Engineering
Understanding Events Event Specific circumstance (tình huống) that is monitored by JavaScript And that your script can respond to in some way You can use JavaScript events to allow users to interact (tương tác) with your Web pages Most common events are user actions. csehui.wordpress.com Computer Science & Engineering
Understanding Events csehui.wordpress.com Computer Science & Engineering
Working with Elements and Events Event handler Code that executes in response to a specific event Included as an attribute of the element that initiates the event <element event_handler ="JavaScript code"> Event handler names are the same as the name of the event itself, plus a prefix of “on” <img src=saobang.jpg onmouseout=“doihinh()”> csehui.wordpress.com Computer Science & Engineering
Working with Elements and Events csehui.wordpress.com Computer Science & Engineering
Working with Elements and Events Example <input type="button" onclick="window.alert('You clicked a button!')"> window.alert() method Displays a pop-up dialog box with an OK button. You can include multiple JavaScript statements in an event handler, As long as semicolons separate the statements. csehui.wordpress.com Computer Science & Engineering
Working with Elements and Events Example: calculator program Use push buttons and onclick event handlers Use a variable named inputString to contain the operands and operators of a calculation Calculation is performed using the eval() function csehui.wordpress.com Computer Science & Engineering
if Statements Syntax: if (<conditional>) { statement 1; } csehui.wordpress.com Computer Science & Engineering
if Statements if … else if(<conditional>) { Block statement 1; … } else Block statement 2; csehui.wordpress.com Computer Science & Engineering
if Statements if … else nested: if(<conditional 1>) { block statement 1; } else if (< conditional 2>) { Khối lệnh 2 ;} … {khối lệnh 3 } csehui.wordpress.com Computer Science & Engineering
if Statements <script language="javascript"> a=eval(prompt("Nhap canh a")); b=eval(prompt("Nhap canh b")); c=eval(prompt("Nhap canh c")); if(a+b<c||b+c<a||c+a<b) alert("Khong phai tam giac") else if(a==b&&b==c&&c==a) alert("Tam giac đều") ; if(a==b||b==c||c==a) alert("Tam giac cân"); alert("Tam giác thuong"); </script> csehui.wordpress.com Computer Science & Engineering
Switch...Case Statements Switch(expression){ case value1: statement1 ; break; case value2: statement2 ; break; ……… case valuek: statementk ; break; default : statementk+1 ;} csehui.wordpress.com Computer Science & Engineering
Switch...Case Statements <script> t=prompt( "nhap thang: "); switch (eval(t)) { case 1: case 3: case 5: case 7: case 8 : case 10: case 12: alert("Thang "+ t+ " co 31 ngay"); break; case 2: alert("Thang "+t + " co 28 ngay"); break; case 4: case 6: case 9: case 11: alert("Thang "+t +" co 30 ngay"); break; default: alert("Khong co thang nay"); }</script> csehui.wordpress.com Computer Science & Engineering
For Statements Syntax: For(Exp 1; Exp 2; Exp 3) { statement; } csehui.wordpress.com Computer Science & Engineering
For Statements <Script language="javascript"> var n, m, i, j; m=prompt("Nhap so dong"); n=prompt("Nhap so cot"); document.write("<table width=50% border=1>"); for(i=1;i<=m;i++) { document.write("<tr>"); for(j=1;j<=n;j++) document.write("<td>" + i + j +"</td>"); document.write("</tr>"); } document.write("</table>"); csehui.wordpress.com Computer Science & Engineering
While Statement Syntax: While(expression) { Statement 1; } csehui.wordpress.com Computer Science & Engineering
do …while statement Syntax: do { Statement 1; } While(Expression); csehui.wordpress.com Computer Science & Engineering
do …while statement <script language="javascript"> var input; do { input=prompt(“Nhập một số bấy kỳ, nhập 99 đế thóat”) if(isNaN(input) document.write(“Dữ liệu không hợp lệ, nhập số ”); break; } }while (input!=99 ) </script> csehui.wordpress.com Computer Science & Engineering
for …in statement Syntax: for ( variable in Object) { Statement ; } csehui.wordpress.com Computer Science & Engineering
for …in statement Example: <body> <script> obj= new Array() ; obj[0]="Hello"; obj[1]="World" ; for(i in obj) document.write(obj[i]); </script> </body> csehui.wordpress.com Computer Science & Engineering