1 / 74

Javascript

Javascript. Browser – Client Side Processing Activity page/examples: http://comp.fsksm.utm.my/~rosely/js/. Outline. Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML). Introduction - Outline. Introduction What is Javacript?

jolene-prince
Download Presentation

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. Javascript Browser – Client Side Processing Activity page/examples: http://comp.fsksm.utm.my/~rosely/js/

  2. Outline • Introduction • Fundamental of JavaScript • Javascript events management • DOM and Dynamic HTML (DHTML)

  3. Introduction - Outline • Introduction • What is Javacript? • What Javascript can do? • Examples usage of Javascript • How to use Javascript?

  4. What is Javascript • Official name: ECMAScript maintain by ECMA organisations • ECMA 262 – official Javascript standard based on Javascript (Netscape) & Jscript (Microsoft) • Invented by Brendan Eich at Netscape (with Navigator 2.0) • Development is still in progress!

  5. What is Javascript • Java and Javascript is not the SAME – only similar to Java and C++ • The fundamentals of Javascript are similar to Java and/or C++

  6. What is Javascript? • was designed to add interactivity to HTML pages • Is a scripting language • an interpreted language (means that scripts execute without preliminary compilation) • Case-sensitive • Must be embedded into HTML • Browser dependent • Execute whenever the HTML doc. which contain the script open by browser. • Everyone can use JavaScript without purchasing a license

  7. What Javascript can do? • JavaScript gives HTML designers a programming tool • JavaScript can put dynamic text into an HTML page • JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate data • JavaScript can be used to detect the visitor's browser • JavaScript can be used to create cookies

  8. Examples usage of Javascript -activity 01 • Limited capability application • Clocks • Mouse Trailers (an animation that follows your mouse when you surf a site) • Countdown timer • Drop Down Menus • The objective of Javascript is not for creating full-blown application running in a browser!

  9. Examples usage of Javascript • Event management • Form management & verification • Dynamic HTML (DHTML) • Client-Server application - AJAX

  10. How to use Javascript?– activity 02 • Inside the head tag (head section) • Within the body tag (body section) • In an external file (external script)

  11. How to use Javascript?- head section <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>

  12. How to use Javascript?- body section <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

  13. How to use Javascript?- external script <html> <head> <script src="myjs.js"> </script> </head> <body> <input type="button" onclick="popup()" value="Click Me!"> </body> </html> // JavaScript Document (myjs.js) function popup() { alert("Hello World") }

  14. How to use Javascript? • All code inside head tag (except in function) will be executed first before the html <body> load • Put global variables in the <head> section script • Use document.write/ln to send html output • Use window.prompt to get user input

  15. Use in alert box

  16. Debugging Errors: Activities 03 Click this. Warning icon means there are some errors in your script

  17. Debugging Errors:

  18. Simple JS application – input/output

  19. Javascript Fundamental • A light Java/C++ • All other things are more or less the same: • Keyword, variables • Operator • Conditional statement • Looping etc. • Case sensitive • No strong typing in JS for variable

  20. Javascript Variables • Variables name – case sensitive • No typing! • Can change type during execution • Activity 05 - a • Use double qoute for character and string variable • Cannot use reserve word for variable name!

  21. OUTPUT: 10 rosely 25

  22. JS – Reserve Word

  23. Javascript variables operation • Arithmetic operations – same as Java/C++ • + operators is overloaded, can be used for string • Number + string (or vice versa), result string • Activity 05 - b • A = 2 + 5 (result 7) • A = 2 + “5” (result 25) • A = A + 2 (result 252)

  24. OUTPUT: 2 25 252

  25. JS Operators

  26. JS Operators

  27. Javascript – Conditional expressions – activity 06 • If else, switch statement – same as C++/Java • Boolean • Value 0, false = false • Value 1, true = true • String comparison, use the quote! • if (password == “007”) • Check the example!

  28. Javascript – Conditional expressions • Special conditional operator • variablename=(condition)?value1:value2  • If true value1 assigned else value2 assigned to variablename greeting = (visitor == "PRES") ? "Dear President “ : "Dear ";

  29. Javascript – Loop • for loop, while loop – same as C++/Java • Use break statement to exit loop • JavaScript For...In Statement • used to loop (iterate) through the elements of an array or through the properties of an object. • var mycars = new Array(); • for (x in mycars) • document.write(mycars[x] + "<br />"); • Activity 07

  30. Javascript Array– activity 08 (.1, .2, .3) • Array is a built-in object in JS • http://www.w3schools.com/jsref/jsref_obj_array.asp • Means have methods and properties • Important properties: • length (total elements) • For traversing array elements • Example method: • sort() : sorting array elements • join() : combine all array elements into a string

  31. Javascript Array - creating var a = new Array(12); var b = new Array(); var c = new Array(12,10,11); var d = [12,10,11]; // same as c var e = [1,,,10]; // 4 elements array, only first & last element initialized

  32. A[0] 10 A[1] 20 A[2] Ali A[3] 2.34 Javascript array: inserting values var A =new Array(); A[0]= 10; A[1]= 20; A[2]=“Ali”; A[3]=2.34; Result:

  33. JS Array: creating and accessing

  34. JS Array: sort method

  35. Javascript Array - Multidimensional– activity 08.4 • Technically, JavaScript doesn't support multi-dimensional arrays • Because array is an object, you can put object inside of another object, so emulating a multi dimensional array • So it is possible to have a different dimension (column) for each row!

  36. Javascript Array - Multidimensional • var myarray=new Array(3) • Create a multidimensional array

  37. Javascript Array - Multidimensional

  38. Javascript Array - Multidimensional

  39. Javascript Array - Multidimensional

  40. Javascript Array - Multidimensional

  41. JS Array: Associative- Activity 08.5 • Using a similar access technique to hash function • In this case, the index of an array is using a word or key instead of number. • This is where For In is use instead of For Loop

  42. JS Array: Associative

  43. JS Array: Associative • Direct access to individual elements • Printing the keys!

  44. JS Array: Associative • Direct access to individual elements • Ichigo kurosaki • rob lucci • Printing the keys! • BLEACH • NARUTO • ONE_PIECE

  45. JS Array: Associative • Printing all elements in array using For..In and For..Loop

  46. JS Array: Associative • printing the whole array elements at once using join

  47. JS Array: Associative • printing the whole array elements at once using join

  48. Javascript Function • Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). • Put in head section or external • Variables inside a function is local • Use return to return value and exiting the function (return without value) without finishing

  49. Javascript Functions Involves two steps: • Define: to define what processes should be taken • Call/Invoke: to execute the functions Syntax of function definition: function function_name (param1, param2, .., param_n) //parameters are optional { //function’s code goes here return value_or_object; //optional }

  50. Javascript function – activity 09

More Related