JavaScript Lecture I http wp netscape com eng mozilla 3 0 handbook javascript index html Introduction to JavaScript NOT Java JavaScript was developed by Netscape Java was developed by Sun Designed to plug a gap in the techniques available for creating web pages Client side dynamic content Interpreted 1 JavaScript vs Java Complementary JavaScript Cannot draw multi thread network or do I O Java Cannot interact with Browser or control content JavaScript vs Java JavaScript is becoming what Java was originally intended to be Java Applets are meant to be lightweight downloadable programs run within the browser for cross platform compatibility Java Bloated JavaScript is actually lightweight and accomplish most of what Applets do with a fraction of the resources 2 What is it used for today Handling User Interaction Doing small calculations Checking for accuracy and appropriateness of data entry from forms Doing small calculations manipulations of forms input data Search a small databased embedded in the downloaded page Save data as cookie so it is there upon visiting the page Generating Dynamic HTML documents Examples Bookmarklets Google Maps Google Suggest JavaScript Shell http www squarefree com shell http www squarefree com jsenv http www mozilla org rhino shell html 3 JavaScript Syntax Variables and Literals Declaration Explicit Implicit var i 12 i no var in declaration 12 Variable Scope Global Declared outside functions Any variable implicitly defined Local Explicit declarations inside functions JavaScript Syntax Variables and Literals Dynamic Typing Variables can hold any valid type of value Number var myInt 7 Boolean var myBool true Function Discussed Later Object Discussed Later Array var myArr new Array String var myString abc and can hold values of different types at different times during execution 4 JavaScript Syntax Operators Key Comparison Operators number on the left must be greater than the number on the right number on the right must be greater than the number on the left number on the right must be greater than or equal to the number on the left number on the right must be less than or equal to the number on the left the numbers or objects or values must not be equal the numbers or objects or values must be equal Logical NOT Logical OR Logical AND JavaScript Syntax Operators Key Assignment Operators adds two numbers or appends two strings If more than one type of variable is appended including a string appended to a number or viceversa the result will be a string subtracts the second number from the first divides the first number by the second multiplies two numbers Modulus divide the first number by the second and return the remainder assigns the value on the right to the object on the left the object on the left the object on the left the value on the right this also works when appending strings the object on the left the object on the left the value on the right Increment Decrement a number 5 JavaScript Syntax Control and Looping if statement if boolean statement else switch statement switch myVar case 1 if myVar is equal to 1 this is executed case two if myVar is equal to two this is executed case default if none of the cases above are satisfied OR if no break statement are used in the cases above this will be executed JavaScript Syntax Control and Looping while and do while loops break and continue keywords Take a look at http wp netscape com eng mozilla 3 0 ha ndbook javascript index html 6 JavaScript Syntax Functions Calling a function the same way you would in C myFunc arg1 arg2 Declaring a function using the function keyword No return type nor typing of arguments function add numOne numTwo return numOne numTwo JavaScript Output The document objects allows printing directly into the browser page amongst other things window object is implied Writing in text or HTML with script No line break document write I am B BOLD B With line break document writeln I am U underlined U 7 Code Example Variables Loops and Output Objects in JavaScript Not Object Oriented but Object Based Easy to declare and create JavaScript Objects function Person myName myAge this name myName this age myAge var someGuy new Person Shawn 28 8 Objects in JavaScript Accessing object s properties var someGuy new Person Shawn 28 document writeln Name someGuy name Objects and Associative Arrays are in fact two interfaces to the same data structure Which means you can access elements of someGuy like so someGuy age or someGuy name document writeln Name someGuy name Objects in JavaScript Object Functions Functions are just properties like any other property of an object name age etc function displayName document writeln I am this name Then the constructor will become function Person myName myAge this name myName this age myAge this displayMe displayName 9 Objects in JavaScript Object Functions Then to call the function on the object var someGuy new Person Shawn 28 someGuy displayMe var someOtherGuy new Person Tim 18 someOtherGuy displayMe Alternatively you may declare the function inside the constructor function Person myName myAge this name myName this age myAge this displayMe function document writeln I am this name Object Example Using objects 10 Inheritance in JavaScript No built in inheritance Runtime Inheritance Clone objects and add extra properties For next week Come prepared with at least one way of doing inheritance in JavaScript Google is your friend Person Prof Student Built in Objects Number Boolean String Primitive types are automatically coerced into Objects when assigned to variables var str abc var is a String object Number and Boolean are boring String has some helpful properties functions length toUpperCase substring link Date No properties but contains a bunch of methods for getting setting and manipulating dates Math Calculate PI find the SIN or COS of an angle etc 11 Arrays Creating Arrays var a new Array empty array var b new Array dog 3 8 4 var c new Array 10 array of size 10 var d 2 5 a b Assigning values to Arrays c 15 hello c push hello Associative Arrays var e new Array e key value e numKey 123 Arrays Properties and Methods length join reverse sort concat slice splice push pop shift unshift toString 12 Array Example General Usage Embedding in HTML Directly vs Indirectly Directly script type text javascript code here script Indirectly script type text javascript src test js script Location HEAD vs BODY Code directly or indirectly placed in the HEAD element is made available to