1 / 101

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak. Based on material from JavaScript Unleashed (2nd Ed). Introduction to JavaScript. Basics for Non Programmers. JavaScript. JavaScript is a Programming Language, although not a complete one.

shadow
Download Presentation

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak

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. JavaScript Programming an Introduction Prepared ByP .D. Krolak and M.S. Krolak Based on material from JavaScript Unleashed (2nd Ed)

  2. Introduction to JavaScript Basics for Non Programmers

  3. JavaScript • JavaScript is a Programming Language, although not a complete one. • JavaScript was developed by Netscape and is becoming an international standard, ECMA-262. • JavaScript is sent with the HTML document and is interpreted at the time it is loaded on the browser • JavaScript adds interaction

  4. Embedding JS in HTML

  5. Embedding JS in HTML • The <script> </script> tag container • Accommodating the Non JS supporting browsers by using a comment to surround the content of the script within the container. • Viewing the JS code • Executing the scripts • loading a page • HTML enhancements

  6. The <script> tag • <script language=“JavaScript1.x”> where x can be version of JavaScript used, i.e 0,1,2,3. If the browser does not support the version the tag and its content is ignored. • language can also be set to vb script, php, etc. • <Script > </Script> form the container • The script may be placed anywhere in the document but must exit before needed. • Most scripts are placed in the head and are thus loaded before they are needed for the display & interaction. • Scripts that contain document.write() must be in the body.

  7. The <script> tag continued • JavaScript libraries may be stored external to the HTML document. • <script Language=javascript1.2 src=“Library’s_URL”> • The Library file extension must be “.js” • The External file does not have the <script></script> tags

  8. Viewing the JS codeA Simple Hello World <Html> <Head> <Title>JS Sample</Title> </Head> <Body> <script Language=“javascript1.2”> document.write(“Hello World”); </Script> </Body> </Html> See the above web page

  9. Viewing the JS codeA Confirm Hello World <Html> <Head> <Title>JS Sample</Title> </Head> <Body> <script Language=“javascript1.2”> confirm(“Hello World”); </Script> </Body> </Html> See the above web page

  10. Viewing the JS codeAn Alert window -- Hello World <Html> <Head> <Title>JS Sample</Title> </Head> <Body> <script Language=“javascript1.2”> alert(“Hello World”); </Script> </Body> </Html> See the above web page

  11. Accommodating the Non JS supporting browsers • The contents of the script container are commented so non JS browsers will ignore the contents. • <Script > <! -- // the comment is used by the non-JS Your JavaScript code here --> </Script>

  12. Executing the scripts • The scripts are not executed in any necessary order. • They are executed as the flow of events dictates. Events are generally created by an action of the user interacting with the page elements. An example, a mouse over a link.

  13. Loading a web page There is no difference in loading a page with a script or without one.

  14. HTML enhancements

  15. JS Fundamentals

  16. Versions of JS

  17. Versions of JS (cont.)

  18. JavaScript Data Types • JavaScript does not have a rich set of data types like most widely used programming languages. • JavaScript is also not strongly typed.

  19. JavaScript Data Types

  20. JavaScript Data Types

  21. JavaScript Variables

  22. JavaScript Function

  23. JavaScript Expression

  24. JavaScript Variables

  25. JavaScript Literals

  26. JavaScript Operators

  27. JS Operators • Assignment Operators • Arithmetic Operators • Comparison Operators • String Operators • Conditional Operators • Boolean Operators • The type of operators

  28. Assignment Assignment operator assigns a value to a variable.

  29. Assignment Operators

  30. Example of Assignment:

  31. Arithmetic Assignment

  32. Arithmetic Arithmetic operators take numeric variables and return a single numeric value

  33. Example of Arithmetic Ops:

  34. Bitwise Operator Assignment

  35. Arithmetic Operators

  36. Comparison A comparison operator logically compares its operands and returns a logical True or False.

  37. Comparison Operators

  38. Example of Comparison Ops:

  39. String Operators String operators are the same as comparison, using a sort sequence. This is called a lexicographic or dictionary sort String a> b, or a>=b etc. String has two forms of concatenation, i.e. (the string ‘b’ is added to the end of string ‘a’) • a+b • a +=b

  40. String Operator

  41. Conditional Assign a value if the condition is true or the alternative value if not. (condition) ? True Value : False Value

  42. Boolean A Boolean operator takes two operands and returns a truth value.

  43. Boolean Operators

  44. Typeof Operand Typeof operand returns the data type of the operand.

  45. JS Operators (continued) • Function operators • Data structure operators • Bit wise operators • Operator precedence

  46. Function Operator

  47. JavaScript Statements

  48. Statements • Statements define the flow of the script. • JS statements require a “;” at the end if there are more than one on a line. • A block of statement that are executed in order is enclosed by curly brackets {}. • Flow is normally linear but may be altered by conditional, looping, or similar statements.

  49. Comments • Comments are not really part of the program statement but are provided for the programmer and others as notes and reminders of what is happening in the JS. Statement; //single line comment /* this the way to create multi line comments */

  50. JS Control Structures and Looping • Conditional statements • Looping statements • Labeled • with • switch

More Related