LOGO Introduction to Client-Side Scripting and JavaScript CHAPTER 9 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming

CONTENT 9.1 Introduction to Client-Side Scripting 9.2 Introduction to JavaScript 9.3 JavaScript Statements 9.4 JavaScript Comments 9.5 JavaScript Variables 9.6 JavaScript Operators 2

9.1 Introduction to Client-Side Scripting  HTML is good for developing static pages  can specify text/image layout, presentation, links, …  web page looks the same each time it is accessed  in order to develop interactive/reactive pages, must integrate programming in some form or another 3

9.1 Introduction to Client-Side Scripting Client-Side Scripting Client-Side Scripting  programs are written in a separate programming (or scripting) language e.g., JavaScript, JScript, VBScript  programs are embedded in the HTML of a Web page, with (HTML) tags to identify the program component e.g., …  the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML  could also allow the user (client) to input information and process it, might be used to validate input before it’s submitted to a remote server 4

9.1 Introduction to Client-Side Scripting Client-Side Scripting  a scripting language is a simple, interpreted programming language  scripts are embedded as plain text, interpreted by application  simpler execution model: don't need compiler or development environment  saves bandwidth: source code is downloaded, not compiled executable  platform-independence: code interpreted by any script- enabled browser  but: slower than compiled code, not as powerful/full- featured 5

9.1 Introduction to Client-Side Scripting  JavaScript:  the first Web scripting language,  developed by Netscape in 1995  syntactic similarities to Java/C++, but simpler, more flexible in some respects, limited in other (loose typing, dynamic variables, simple objects)  JScript:  Microsoft version of JavaScript, introduced in 1996  same core language, but some browser-specific differences  fortunately, IE, Netscape, Firefox, etc. can (mostly) handle both JavaScript & JScript  JavaScript 1.5 & JScript 5.0 cores both conform to ECMAScript standard  VBScript:  client-side scripting version of Microsoft Visual Basic 6

9.1 Introduction to Client-Side Scripting Client-Side Scripting  Adding dynamic features to Web pages  validation of form data (probably the most commonly used application)  image rollovers  time-sensitive or random page elements  handling cookies  Defining programs with Web interfaces  utilize buttons, text boxes, clickable images, prompts, etc. 7

9.1 Introduction to Client-Side Scripting Limitations of Client-Side Scripting  since script code is embedded in the page, it is viewable to the world  for security reasons, scripts are limited in what they can do e.g., can't access the client's hard drive  since they are designed to run on any machine platform, scripts do not contain platform specific commands  script languages are not full-featured e.g., JavaScript objects are very crude, not good for large project development 8

9.2 Introduction to JavaScript What is JavaScript?  JavaScript is a scripting language that runs in a web browser (client-side)  A scripting language is a lightweight programming language  JavaScript is developed by Netscape  It was designed to add interactivity to HTML pages  It is usually embedded directly into HTML pages  JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.  Everyone can use JavaScript without purchasing a license  It is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. 9

9.2 Introduction to JavaScript Are Java and JavaScript the same?  Java and JavaScript are two completely different languages in both concept and design!  However, the syntax is similar.  Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.  JavaScript is not a full-featured programming language.  JavaScript only executed in a browser. 10

9.2 Introduction to JavaScript What Can JavaScript do?  JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages  JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element  JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element  JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing  JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser  JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer 11

9.2 Introduction to JavaScript Incorporating JavaScript into HTML  JavaScript programs require the tag in.html files ACTUAL JavaScript code here  These can appear in either the or section of an html document Functions and code that may execute multiple times is typically placed in the Code that needs to be executed only once, when the document is first loaded is placed in the 12

9.2 Introduction to JavaScript Using an External JavaScript  JavaScript can also be placed in external files.  External JavaScript files often contain code to be used on several different web pages.  External JavaScript files have the file extension.js.  External script cannot contain the tags!  To use an external script, point to the.js file in the "src" attribute of the tag: Example: 13

9.2 Introduction to JavaScript Hiding Scripts from Other Browsers  Some browsers may not support scripting  To be safe, you can put your scripts in html comments.  This way browsers that do not recognize JavaScript will look at the programs as comments 14 Here's the result: <!-- HIDE FROM OTHER BROWSERS // Output "It Works!" document.writeln("It works! "); // STOP HIDING FROM OTHER BROWSERS -->

9.3 JavaScript Statements  JavaScript is a sequence of statements to be executed by the browser.  A JavaScript statement is a command to a browser.  The purpose of the command is to tell the browser what to do.  This JavaScript statement tells the browser to write "Hello World" to the web page:  document.write("Hello World");  It is normal to add a semicolon at the end of each executable statement.  The semicolon is optional (according to the JavaScript standard), but using semicolons makes it possible to write multiple statements on one line. 15

9.3 JavaScript Statements 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 write a heading and two paragraphs to a web page: Example: 16 document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. ");

9.3 JavaScript Statements 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 write a heading and two paragraphs to a web page: Example: 17 document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. ");

9.3 JavaScript Statements JavaScript 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.  This example will write a heading and two paragraphs to a web page: Example 18 { document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. "); }

9.4 JavaScript Comments  Comments can be added to explain the JavaScript, or to make the code more readable.  Single line comments start with //.  Multi line comments start with /* and end with */ // This is Comment 1.. /* This is Comment 2.. this is multi-line comment */ document.write(" ITEC 229 "); // prints the text to the screen in format.

9.5 JavaScript Varibles  JavaScript variables are used to hold values or expressions.  A variable can have a short name, like x, or a more descriptive name, like carname.  Rules for JavaScript variable names:  Variable names are case sensitive (y and Y are two different variables)  Variable names must begin with a letter or the underscore character  A variable's value can change during the execution of a script.  You can refer to a variable by its name to display or change its value. 20

9.5 JavaScript Varibles Declaring (Creating) JavaScript Variables  Creating variables in JavaScript is most often referred to as "declaring" variables.  You declare JavaScript variables with the var keyword:  var x; var carname;  After the declaration shown above, the variables are empty (they have no values yet).  However, you can also assign values to the variables when you declare them:  var x=5; // will hold the value 5, var carname="Volvo"; // and carname will hold the value Volvo Note: When you assign a text value to a variable, use quotes around the value. Note: If you redeclare a JavaScript variable, it will not lose its value. 21

9.5 JavaScript Varibles Local JavaScript Variables  A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope).  You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.  Local variables are destroyed when you exit the function. 22

9.5 JavaScript Varibles Global JavaScript Variables  Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it.  Global variables are destroyed when you close the page.  If you declare a variable, without using "var", the variable always becomes GLOBAL.  If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.  The statements given below will declare the variables x and carname as global variables (if they don't already exist).  x=5; carname="Volvo"; 23

9.6 JavaScript Operators OperatorDescriptionExampleResult +Additionx=y+2x=7y=5 -Subtractionx=y-2x=3y=5 *Multiplicationx=y*2x=10y=5 /Divisionx=y/2x=2.5y=5 %Modulus (division remainder) x=y%2x=1y=5 ++Incrementx=++yx=6y=6 x=y++x=5y=6 --Decrementx=--yx=4y=4 x=y--x=5y= JavaScript Arithmetic Operators  Arithmetic operators are used to perform arithmetic between variables and/or values.  Given that y=5, the table below explains the arithmetic operators:

9.6 JavaScript Operators 25 OperatorExampleSame AsResult =x=y x=5 +=x+=yx=x+yx=15 -=x-=yx=x-yx=5 *=x*=yx=x*yx=50 /=x/=yx=x/yx=2 %=x%=yx=x%y x=0 JavaScript Assignment Operators  Assignment operators are used to assign values to JavaScript variables.  Given that x=10 and y=5, the table below explains the assignment operators:

9.6 JavaScript Operators The + Operator Used on Strings  The + operator can also be used to add string variables or text values together.  To add two or more string variables together, use the + operator;  txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;  After the execution of the statements above, the variable txt3 contains "What a verynice day". 26

9.6 JavaScript Operators The + Operator Used on Strings  To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; or insert a space into the expression: txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;  After the execution of the statements above, the variable txt3 contains: "What a very nice day" 27

9.6 JavaScript Operators Comparison Operators  Comparison operators are used in logical statements to determine equality or difference between variables or values.  Given that x=5, the table below explains the comparison operators:  Comparison operators can be used in conditional statements to compare values and take action depending on the result 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 tox>=8 is false <=is less than or equal tox<=8 is true

9.6 JavaScript Operators Logical Operators  Logical operators are used to determine the logic between variables or values.  Given that x=6 and y=3, the table below explains the logical operators: 29 OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true

9.6 JavaScript Operators Conditional Operator  JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.  Syntax  variablename=(condition)?value1:value2 Example: greeting=(visitor=="PRES")?"Dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear". 30

LOGOhttp://sct.emu.edu.tr/it/itec229 Introduction to Client-Side Scripting and JavaScript END of CHAPTER 9