1 / 47

Introduction to Client-Side Scripting and JavaScript

Eastern Mediterranean University School of Computing and Technology Department of Information Technology. ITEC229 Client-Side Internet and Web Programming. Introduction to Client-Side Scripting and JavaScript. CHAPTER 10. CONTENT. 10.1 Introduction to Client-Side Scripting

mendozaa
Download Presentation

Introduction to Client-Side Scripting and JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. CONTENT 10.1 Introduction to Client-Side Scripting 10.2 Introduction to JavaScript 10.3 JavaScript Statements 10.4 JavaScript Comments 10.5 JavaScript Variables 10.6 JavaScript Operators 10.7 Conditional Statements in JavaScript 10.8 Loops in JavaScript http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  3. 10.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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  4. 10.1 Introduction to 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., <script type="text/javascript"> … </script> • 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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  5. 10.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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  6. 10.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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  7. 10.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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  8. 10.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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  9. 10.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 • Itis 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 • Itis used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  10. 10.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 onlyexecuted in a browser. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  11. 10.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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  12. 10.2 Introduction to JavaScript Incorporating JavaScript into HTML • JavaScript programs require the <SCRIPT> tag in .html files <script type = "text/javascript"> ACTUAL JavaScript code here </script> • These can appear in either the <HEAD> or <BODY> section of an html document • Functions and code that may execute multiple times is typically placed in the <HEAD> • Code that needs to be executed only once, when the document is first loaded is placed in the <BODY> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  13. 10.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 <script></script> tags! • To use an external script, point to the .js file in the "src" attribute of the <script> tag: Example: <html><head><script type="text/javascript" src="xxx.js"></script></head><body></body></html> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  14. 10.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 <HTML> <HEAD> <TITLE></TITLE></HEAD> <BODY> Here's the result: <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS // Output "It Works!" document.writeln("It works!<BR>"); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  15. 10.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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  16. 10.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: <script type="text/javascript">document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  17. 10.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 <script type="text/javascript">{document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");}</script> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  18. 10.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 */. <html> <body> <script type="text/javascript"> // This is Comment 1.. /* This is Comment 2.. this is multi-line comment */ document.write("<h1>ITEC 229</h1>"); // prints the text to the screen in <H1> format. </script> </body> </html> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  19. 10.5 JavaScript Varibles • JavaScriptvariables 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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  20. 10.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;varcarname; • 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: • varx=5;// will hold the value 5, varcarname="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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  21. 10.5 JavaScript Varibles Local JavaScript Variables • A variable declared within a JavaScript function becomesLOCALand 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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  22. 10.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"; http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  23. 10.6 JavaScript Operators • 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: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  24. 10.6 JavaScript Operators • 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: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  25. 10.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". http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  26. 10.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" http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  27. 10.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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  28. 10.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: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  29. 10.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". http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  30. 10.7 Conditional Statements • Conditional statements are used to perform different actions based on different conditions. • Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. • In JavaScript we have the following conditional statements: • if statement - use this statement to execute some code only if a specified condition is true • if..else statement - use this statement to execute some code if the condition is true and another code if the condition is false • if..else if...else statement -use this statement to select one of many blocks of code to be executed • switch statement -use this statement to select one of many blocks of code to be executed http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  31. 10.7 Conditional Statements if statement • Use the if statement to execute some code only if a specified condition is true. • Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error! • Notice that there is no ..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true. Syntax: if (condition)  {  code to be executed if condition is true  } http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  32. 10.7 Conditional Statements if statement http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  33. 10.7 Conditional Statements if..else statement Syntax: if (expression) { statement(s) to be executed if expression is true } else { statement(s) to be executed if expression is false } http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  34. 10.7 Conditional Statements if..else statement http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  35. 10.7 Conditional Statements if..else if statement Syntax: if (expression 1) {statement(s) to be executed if expression 1 is true} else if (expression 2) { statement(s) to be executed if expression 2 is true} else if (expression 3) { statement(s) to be executed if expression 3 is true} else { statement(s) to be executed if no expression is true} http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  36. 10.7 Conditional Statements if..else if statement http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  37. 10.7 Conditional Statements switch case statement Syntax: switch (expression) { case condition 1:statement(s) break; case condition 2:statement(s) break; ... case condition n:statement(s) break; default: statement(s) } http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  38. 10.7 Conditional Statements switch case statement http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  39. 10.8 Loops for loop For loop is the most compact form of looping and includes the following three important parts: • The loop initialization where we initialize our counter to a starting value. • The initialization statement is executed before the loop begins. • The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out. • The iteration statement where you can increase or decrease your counter. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  40. 10.8 Loops for loop • You can put all the three parts in a single line separated by a semicolon. Syntax: for (initialization; test condition; iteration statement) { statement(s) to be executed if test condition is true } http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  41. 10.8 Loops for loop http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  42. 10.8 Loops for loop http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  43. 10.8 Loops while loop • loops through a block of code as long as a specified condition is true. Syntax: while (condition) { statement(s) to be executed if expression is true } http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  44. 10.8 Loops while loop http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  45. 10.8 Loops do..while loop • similar to the while loop except that the condition check happens at the end of the loop. • this means that the loop will always be executed at least once, even if the condition is false. Syntax: do { statement(s) to be executed; } while(condition); http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  46. 10.8 Loops do..while loop http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  47. Thank You ! Introduction to Client-Side Scripting and JavaScript http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229 END of CHAPTER 10

More Related