1 / 92

SWE 444 Internet and Web Application Development( javaScript )

SWE 444 Internet and Web Application Development( javaScript ). Mr.Abdullah Mrian. Overview A "scripting" language for HTML pages - a scripting language is a lightweight programming language. Embed code in HTML pages so they are downloaded directly to browser.

astin
Download Presentation

SWE 444 Internet and Web Application Development( 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. SWE 444Internet and Web Application Development(javaScript) Mr.AbdullahMrian

  2. Overview • A "scripting" language for HTML pages - a scripting • language is a lightweight programming language. • Embed code in HTML pages so they are downloaded • directly to browser. • The browser interprets and executes the script (it is not compiled). • Was designed to add interactivity to HTML pages. • Everyone can use JavaScript without purchasing a license. • Supported by all major browsers.

  3. …Overview • Do not declare data types for variables. • Scripts can manipulate "browser objects:" • HTML form elements • Images • Frames • etc. • For security – cannot write to disk (when run on a client)

  4. Abilities • Generating HTML content dynamically. • Monitoring and responding to user events. • Validate forms before submission. • Manipulate HTTP cookies. • Interact with the frames and windows of the browser. • Customize pages to suit users.

  5. It is not Java • JavaScript is not Java, or even related to Java. • The original name for JavaScript was “LiveScript”. • The name was changed when Java became popular. • Statements in JavaScript resemble statements in Java,because both languages borrowed heavily from the C language. • JavaScript is seldom used to write complete “programs”. • Instead, small bits of JavaScript are used to add functionality to HTML pages. • JavaScript is often used in conjunction with HTML “forms”.

  6. ….It is not Java • JavaScript has some features that resemble features in Java: • JavaScript has Objects and primitive data types. • JavaScript has qualified names; for example: document.write("Hello World"); • JavaScript has Events and event handlers. • Exception handling in JavaScript is almost the same as in Java. • JavaScript has some features unlike anything in Java: • Variable names are untyped: the type of a variable depends on the value it is currently holding. • Objects and arrays are defined in quite a different way. • JavaScript has with statements and a new kind of for statement.

  7. What is a script? • A program or sequence of instructions that is interpreted or carried out by another program. • A program embedded in an HTML document. • Scripts + HTML  DHTML (dynamic HTML).

  8. What is JavaScript? • Created by Netscape • Originally called LiveWire then LiveScript • A client-side scripting language: • Client-side refers to the fact that it is executed in the client (browser) that the viewer is using. • A server-side language is one that runs on the Web server : • Examples: PHP, ASP.

  9. Dynamic HTML …

  10. Web Architecture for JavaScript

  11. Client and Server • JavaScript can be used: • On the client side • On the server • More lightweight and reliable on clients than Java (Applets). • Useful for developing interactive interface (Dynamic HTML).

  12. Example • JavaScript code is included within <script> tags: • Notes: • The type attribute is to allow you to use other scripting languages (but JavaScript is the default). • This simple code does the same thing as just putting • <h1>Hello World!</h1> in the same place in the HTML document. • The semicolon at the end of the JavaScript statement is optional: • You need semicolons if you put two or more statements on the same line. • It’s probably a good idea to keep using semicolons.

  13. Dealing with old browsers • Some old browsers do not recognize script tags: • These browsers will ignore the script tags but will display the included JavaScript. • To get old browsers to ignore the whole thing, use: • The <!-- introduces an HTML comment. • To get JavaScript to ignore the HTML close comment, -->, the // starts a JavaScript comment, which extends to the end of the line.

  14. Where to put JavaScript

  15. The <script>…</script> tag <script type="text/javascript"> . . . </script> The code for the script is contained in the <script>…</script> tag

  16. Displaying text • The document.write() method writes a string of text to the browser <script type="text/javascript"> document.write("<h1>Hello, world!</h1>"); </script>

  17. document.write() Ends in a semicolon document.write("<h1>Hello,world!</h1>"); Enclosed in quotes -- denotes a "string"

  18. Getting User Input • Use the prompt() function • Will display a pop-up window asking the user to enter data • Examples: name = prompt("What is your name?"); payRate = prompt("Enter your pay rate: "); score = prompt("Please enter the score: ");

  19. Comments in JavaScript • Two types of comments • Single line • Uses two forward slashes (i.e. //) • Multiple line • Uses /* and */

  20. Single Line Comment Example <script type="text/javascript"> // This is my JavaScript comment document.write("<h1>Hello!</h1>"); </script>

  21. Multiple Line Comment Example <script type="text/javascript"> /* This is a multiple line comment. * The star at the beginning of this line is optional. * So is the star at the beginning of this line. */ document.write("<h1>Hello!</h1>"); </script>

  22. Find the Bug! <script type="text/javascript"> /* This is my JavaScript comment * that spans more than 1 line. * document.write("<h1>Hello!</h1>"); </script>

  23. JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language="JavaScript"> document.write('This is my first JavaScript Page'); </script> </body> </html>

  24. HTML written inside JavaScript JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language= "JavaScript"> document.write('<h1>This is my first JavaScript Page</h1>'); </script> </body> </html>

  25. JavaScript Statements <html> <head><title>My Page</title></head> <body> <p> <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page</a> </p> </body> </html> JavaScript written inside HTML An Event

  26. Example Statements <script language="JavaScript"> window.prompt('Enter your name:',''); </script> <form> <input type="button" Value="Press" onClick="window.alert('Hello');"> </form> Note quotes: " and '

  27. Input and Output • The input functions available are: • prompt (message, defaultvalue)  takes an input and returns it to the JavaScript program • confirm (question)  asks the user to confirm an input value and return a Boolean value • The output functions available are: • document.write (string) • alert (string)

  28. HTML Forms and JavaScript • JavaScript is very good at processing user input in the web browser • HTML <form> elements receive input <form action="…"method="…"name="…"…> any number of form elements and plain HTML </form>

  29. HTML Form Elements <input type="text"/> <input type="password"/> <input type="button" value="Label"/> <input type="submit"/> <input type="reset"/> <input type="image" src="smiley.jpg"/> <input type="checkbox"/> <input type="radio" name="sex" value="Male"/> <input type="radio" name="sex" value="Female"/> <textarea rows="3" cols="40"> This is the initial text spread over two lines </textarea> <select> <option>First</option> <option>Second</option> </select> <input type="file"/>

  30. Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>

  31. Forms and JavaScript document.formname.elementname.value document.addressform.yourname.value document.addressform.phone.value document.addressform.email.value

  32. Using Form Data Personalising an alert box <form name="alertform"> Enter your name: <input type="text" name="yourname"> <input type="button" value= "Go" onClick="window.alert('Hello ' + document.alertform.yourname.value);"> </form>

  33. <html> <body> <form> <input type=button name=btn1 value="Click A" onClick="alert('button A was clicked');" > <input type=button name=btn2 value="Click B" onClick="alert('button B was clicked');" > </form> </body> </html>

  34. Reserved Words (Keywords) in JavaScript

  35. Variables • Variables names must begin with a letter or underscore • Variable names are case-sensitive • Variables are untyped (they can hold values of any type) • The word var is optional (but it’s good style to use it)

  36. Which Are Legal Identifiers? • AREA 3D • lucky*** num45 • Last-Chance #values • x_yt3 pi • num+ %done • area_under_the_curve

  37. Declaring Variables • Before using a variable, you need to declare it. • The declaration statement includes the varkeyword and the name of the variable. • Examples of variable declarations: var ball; var ball, area; var area;

  38. More About Variables • In JavaScript variables can hold four basic types of values • Numbers • i.e. 40, 15.5, 700 • Strings • i.e. "Hello, World!", "Linux is cool!" • Booleans • i.e. true, false • Null • i.e. null

  39. length 7 diameter 5.9 message “Hello!” walletEmpty true Using Variables: Initialization • Variables may be be given initial values, or initialized, when declared. Examples: var length = 7; var diameter = 5.9; var message = "Hello!"; var walletEmpty = true;

  40. Using Variables: Assignment • Uses the assignment operator = Examples: diameter = 5.9 ; area = length * width ;

  41. JavaScript Arithmetic Operators Given that y=5, the table below explains the arithmetic operators:

  42. JavaScript Assignment Operators Given thatx=10andy=5, the table below explains the assignment operators:

  43. Adding Strings and Numbers x=5+5;document.write(x);x="5"+"5";document.write(x);x=5+"5";document.write(x);x="5"+5;document.write(x); 10 55 55 55

  44. Comparison Operators

  45. Conditional Statements • if statement • if...else statement • if...else if....else statement • switch statement

  46. Example var d = new Date();var time = d.getHours();if (time < 10)  {  document.write("Good morning!");  }else  {   document.write("Good day!");  }

  47. Gotcha! = versus == var a = 2; if(a = 1) /* semantic (logic) error! */ { alert("a is one"); } else if(a == 2) { alert("a is two"); } else { alert("a is " + a); }

  48. Multiple Selection with if if (day == 0 ) { alert ("Sunday") ; } if (day == 1 ) { alert ("Monday") ; } if (day == 2) { alert ("Tuesday") ; } if (day == 3) { alert ("Wednesday") ; }

  49. Multiple Selection with if-else if (day == 0 ) { alert ("Sunday") ; } else if (day == 1 ) { alert ("Monday") ; } else if (day == 2) { alert ("Tuesday") ; } else if (day == 3) { alert ("Wednesday") ; } else if (day == 4) { alert ("Thursday") ; } else if (day == 5) { alert ("Friday") ; } else if (day == 6) { alert ("Saturday") ; } else { alert ("Error - invalid day.") ; }

  50. switch Example switch ( day ) { case 0: alert ("Sunday") ; break ; case 1: alert ("Monday") ; break ; case 2: alert ("Tuesday") ; break ; case 3: alert ("Wednesday") ; break ; case 4: alert ("Thursday") ; break ; case 5: alert ("Friday") ; break ; case 6: alert ("Saturday") ; break ; default: alert ("Error -- invalid day.") ; }

More Related