Nội dung

CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information Technology T2-Lecture-6x JavaScript Part - I For Lecture Material/Slides Thanks to: www.w3schools.com Synopsis  Introduction  JavaScript Where To  JavaScript Output  JavaScript Syntax  JavaScript Statements  JavaScript Comments  JavaScript Variables  JavaScript Data Type 3 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com Introduction Introduction  JavaScript is the programming language of the Web.  All modern HTML pages are using JavaScript.  JavaScript is one of 3 languages that all web developers MUST learn:  HTML to define the content of web pages  CSS to specify the layout of web pages  JavaScript to program the behavior of web pages  JavaScript is the most popular programming language in the world.  It is the language for HTML, for the Web, for computers, servers, laptops, tablets and smart phones. 5 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com Where To place JavaScript  In HTML, Java Scripts must be inserted between tags.  The lines between contain the JavaScript code:  Java Scripts can be put in the and in the section of an HTML page. 6 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com Example  Just take it for a fact, that the browser will interpret the code between the tags as JavaScript.  Old examples may have type="text/javascript" in the

My Web Page

A Paragraph

Try it Demo!!! T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 110 JavaScript in  In this example, a JavaScript function is placed in the section of an HTML page.  The function is invoked (called) when a button is clicked:

My Web Page

A Paragraph

Try it ◦Demo2!!! T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 111 External JavaScripts  Scripts can also be placed in external files.  External scripts are practical when the same code is used in many different web pages.  External JavaScript files have the file extension .js.  To use an external script, put the name of the script file in the source (src) attribute of the T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 112 External JavaScripts…  You can place an external script reference in or as you like.  The script will behave as if it was located exactly where you put the reference in the HTML document.  External scripts cannot contain T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 116 Manipulating HTML Elements…  The JavaScript statement (inside the ◦ Demo-write!! T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 118 Writing to The HTML Document…  Use document.write for testing only.  If you execute it, on a loaded HTML document, all HTML elements will be overwritten. ◦

My First Web Page

My first paragraph.

Try it T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 119 Writing to The Console  If your browser supports debugging, you can use the console.log() method to display JavaScript values in the browser.  Activate debugging in your browser with F12, and select "Console" in the debugger menu.

My First Web Page

T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 120 Writing to The Console  Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.  The first known computer bug was a real bug (an insect), stuck in the electronics. T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 121 JavaScript Syntax JavaScript Syntax  JavaScript is a programming language. The Syntax rules define how the language is constructed.  JavaScript is a scripting language. It is a lightweight, but powerful, programming language.  Syntax : "The principles by which sentences are constructed in a language."  The sentences of a programming language are called computer statements, or just statements. T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 123 JavaScript Literals  In a programming language, literals are constant values like 3.14.  Number literals can be written with or without decimals, and with or without scientific notation (e): ◦ 3.14 1001 123e5  String literals can be written with double or single quotes: ◦ "John Doe" 'John Doe' T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 124 JavaScript Variables  In a programming language, variables are containers for storing information (data).  The equal sign (=) assigns a value to a named variable (just like in normal algebra): x=5 length = 6 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 125 JavaScript Operators  JavaScript uses operators to compute values (just like algebra): 5+6 a*b  JavaScript can assign computed values to named variables (just like algebra): x=5+6 y = x * 10  Expressions like 5 + 6, and x * 10, are called expression literals.  T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 126 JavaScript Statements  In HTML, JavaScript statements are written as sequences of "commands" to the HTML browser.  Statements are separated by semicolons:  x = 5 + 6; y = x * 10; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 127 JavaScript Keywords  A JavaScript statement often starts with a keyword. The var keyword tells the browser to create a new variable: var x = 5 + 6; var y = x * 10; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 128 JavaScript Comments  Not all JavaScript statements are "commands". Anything after double slashes // is ignored by the browser: considered as comments for self documentation. // I will not be executed Comments will be discussed later! T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 129 JavaScript Data Types  JavaScript variables can hold many types of data: numbers, text strings, arrays, objects and much more: var length = 16; // Number assigned by a number literal var lastName = "Johnson"; // String assigned by a string literal var cars = [“Toyota", “Honda", "BMW"]; // Array assigned by an array literal // Object assigned by an object literal var person = {firstName:John, lastName:Doe}; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 130 JavaScript Functions  JavaScript statements written inside a function, can be invoked many times (reused):  Invoke a function = Call upon a function (ask for the code in the function to be executed). function myFunction(a, b) { return a * b; // returns the product of a and b } T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 131 JavaScript Identifiers  All programming languages must identify variables, functions, and objects, with unique names.  These unique names are called identifiers.  Identifier names can contain letters, digits, underscores, and dollar signs, but cannot begin with a number.  Reserved words (like JavaScript keywords) cannot be used as identifiers. T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 132 JavaScript is Case Sensitive  In JavaScript all identifiers are case sensitive.  The variables lastName and lastname, are two different variables.  The functions myFunction and myfunction, are two different functions.  JavaScript does not interpret Var; as var. T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 133 JavaScript Character Set  JavaScript uses the Unicode character set.  Unicode covers (almost) all the characters, punctuations, and symbols in the world.  It is common, in JavaScript, to use camelCase names. You will often see identifier names written like lastName (instead of lastname). T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 134 JavaScript Statements JavaScript Statements  In HTML, JavaScript statements are "commands" to the browser.  The purpose, of the statements, is to tell the browser what to do.  This JavaScript statement tells the browser to write " WelCome to Java Script " inside an HTML element identified with id="demo":  Example  document.getElementById("demo").innerHTML = “WelCome to Java Script."; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 136 Semicolon ;  Semicolon separates JavaScript statements.  Normally you add a semicolon at the end of each executable statement.  Using semicolons also makes it possible to write many statements on one line. Writing: a = 5; b = 6; c = a + b; Is the same as writing: a = 5; b = 6; c = a + b;  You might see examples without semicolons. Ending statements with semicolon is optional in JavaScript. T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 137 JavaScript Code  JavaScript code (or just JavaScript) is a sequence of JavaScript statements.  Each statement is executed by the browser in the sequence they are written.  This example will manipulate two different HTML elements:  Example  document.getElementById("demo").innerHT ML = " WelCome to Java Script."; document.getElementById("myDiv").innerH TML = "How are you?"; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 138 JavaScript Code Blocks  JavaScript statements can be grouped together in blocks.  Blocks start with a left curly bracket, and end with a right curly bracket.  The purpose of a block is to make the sequence of statements execute together.  A good example of statements grouped together in blocks, are in JavaScript functions.  This example will run a function that will manipulate two HTML elements:  Example function myFunction() { document.getElementById("demo").innerHTML = “Welcome to Java Script."; document.getElementById("myDIV").innerHTML = "How are you?"; }  T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 139 JavaScript Statement Identifiers  JavaScript statements often start with a statement identifier to identify the JavaScript action to be performed.  Statement identifiers are reserved words and cannot be used as variable names (or any other things).  Here is a list of some of the JavaScript statements (reserved words) T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 140 JavaScript Statement Identifiers…  Here is a list of some of the JavaScript statements (reserved words) you will learn about in this tutorial: T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 141 JavaScript White Space in JavaScript Statements  JavaScript ignores extra spaces. You can add white space to your script to make it more readable.  The following lines are equivalent: ◦ var person="Hege" var person = "Hege" T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 142 Breaking a JavaScript Statement  You can break up a code line within a text string with a backslash: ◦ var text = "Hello \ World!";  However, you cannot break up a code line like this: ◦ var text = \ "Hello World!"; T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 143 JS Comments JavaScript Comments  JavaScript comments can be used to explain the code, and make the code more readable.  JavaScript comments can also be used to prevent execution, when testing alternative code. T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 145 Single Line Comments  Single line comments start with //.  Any text between // and the end of a line, will be ignored by JavaScript (will not be executed).  The following example uses a single line comment in front of each line, to explain the code: T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 146 Example  // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph.";  This example uses a single line comment at the end of each line, to explain the code: var x = 5; // Declare x, give it the value of 5 var y = x + 2; // Declare y, give it the value of x + 2 T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 147 Multi-line Comments  Multi-line comments start with /* and end with */.  Any text between /* and */ will be ignored by JavaScript.  The following example uses a multi-line comment (a comment block) to explain the code: T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 148 Using Comments to Prevent Execution  Using comments to prevent execution of code, can be very suitable for testing.  Adding // in front of a code line changes the code lines from an executable line to a comment.  The next example uses // to prevent execution of one of the code lines. //document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 149 Example  /* The code below will change the heading with id = "myH" and the paragraph with id = "myp" in my web page: */ document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 150 Example  The following example uses a comment block to prevent execution of multiple lines: /* document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; */ T2-Lecture-7 Ahmed Mumtaz Mustehsan www.w3schools.com 151 The End JavaScript Part-I Thank You T2-Lecture-6 Mustehsan Ahmed Mumtaz www.w3schools.com 152