Computer Science & Engineering

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

<head> <Script language=”JavaScript”> Javascript Comments </script> </head> csehui.wordpress.com Computer Science & Engineering

<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

Comparison and Conditional Operators

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

Functions, Events, and Control Structures

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

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

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

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

Example: csehui.wordpress.com Computer Science & Engineering

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

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

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

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

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

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; }

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; }

do …while statement Syntax: do { Statement 1; } While(Expression);

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 ; }

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

Computer Science & Engineering

Similar presentations

Presentation on theme: "Computer Science & Engineering"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Computer Science & Engineering

Similar presentations

Presentation on theme: "Computer Science & Engineering"— Presentation transcript:

Similar presentations

About project

Feedback