JavaScript Dr. Steven Bitner
What is it? JavaScript is a scripting language No compiling or linking
Where is it? It is included in a page load In the head of an html page between <script></script> tags In a separate file that is linked to from the head of an html page
Why use JavaScript and not PHP? Client-side vs. server-side Fewer page reloads Allows for an application feel on a webpage
What can it do? Change, add or remove HTML and CSS Allow for adding of dynamic content Allow for client-side form checking
What can’t it do Anything at all if the user disables it Also doesn’t support higher order OOP constructs and many primitive data structuers.
Alert One of the easiest and most reliable troubleshooting methods alert(“HERE!”);
Elements JavaScript can access all of your html elements document is the top level or <body> element Therefore, all element accesses start with document Accessed like members in OOP parent.child.attribute
Writing document.write( ); Will overwrite the entire webpage if used after the page has loaded Not needed when used in conjunction with server-side scripting
Where to put functions Can be placed in the head of the document between <script></script> tags Can be placed in the body of the document between <script></script> tags For this class, and the general maintainability of your code, always place functions in a separate file or files and call to those files in the head of your document
Statements Statements, for the sake of this class, must always end with a semi-colon (;) More than one statement can appear on one line, but have a very good reason for doing so JavaScript is case sensitive Blocks are contained within { }
Comments // single line comment /* This is a multi-line comment it can go on for a long time */ alert(“What” /*They can also be short */ );
Variables Must be declared, though type is loose var foo = “bar”; var el = document.getElementById(‘ contentDiv ’); Must start with a letter, $ or _ Javascript basically only has number and text type variables x = 4; and x = ‘4’; are fundamentally different
Functions function functionName ( arguments ) { code to execute } Remember that JavaScript is case sensitive, the ‘function’ keyword must be lowercase and your function name must match the function call
Calling functions Most commonly called using jQuery, or inline Inline Call using ‘ onClick ( )’, ‘ onMouseOver ( )’, ‘ onFocus ( )’, ‘ onBlur ( )’, ‘ onload ( )’
Global and local variables Location of declaration
Quotes in quotes var name = “Steve ‘The Destroyer’ Bitner ”; var name = ‘Steve “The Destroyer” Bitner ’; var name = ‘Steve \ ’The Destroyer \ ’ Bitner ’;
Strings as arrays Can access any character in the string From the previous slide var firstInitial = name[0];
Numbers Up to 17 consecutive digits, but can use scientific notation for large or small numbers Can hold integers and real numbers var mole = 6.022e23 Beware rounding errors This is not a math programming tool Use Matlab or others for exact calculations
Boolean variables var flag = false; Only other possible value is true;
Arrays Can also define arrays var myArray = new Array(“This”, “Teacher”, ”Stinks”);
Homework # 3 and #4 I have posted two homework assignments to the class website Homework #3 is due next Tuesday (18 September) Place HW #3 link to the css document that you created on your assignments page. Homework #4 is due next Thursday (20 September)
Classes Classes var car = { make:”Honda”, model:”Civic”, year:2008 }; alert ( car.make); // will output Honda Alert (car[‘make’]); // so will this
Arithmetic var x = 3 + 7; alert(x); // outputs 10 x += 4; alert(x); // outputs 14
Concatenation var firstName = “Steve”; var lastName = “Bitner”; var name = firstName + lastName; A concatenation of a string and a number is a string var day = 5; var month = November; var year = 1955; var creationOfTheFluxCapacitor = month + ‘ ‘ +day + “ th , “ + year;
Operators C-like operations = + , - , / , * += , -= , /= , *= % ++ , --
Comparators Equality == === Inequality != !== < > <= >=
Logical operands && || !
Single line if (condition)?true:false;
Multi-line ifs if (condition) { some code } else if (another condition) { other code } else { default code }
Switch switch (x) { case 1: code break; case 2: other code break; default: even more code }
Beyond alert confirm Used to elicit an OK/Cancel response from the user i f (confirm (‘Would you like to continue?’)) { do some frightening things stuff }
Beyond that Sometimes you want a user to be able to input a string, not just a yes/no Enter prompt( ) prompt (“What’s your favorite cut of goat meat?”, “ The neck”);
Loops for ( ) while ( ) do while ( ) [foreach] Actually written ‘for’
Getting out of loops To skip a certain iteration: use continue; To skip the current and all future iterations: use break;
try/catch blocks You can catch potentially bad code so that no errors are shown to users try { // some code throw “Error”; } catch (error) { if (error == “Error”) { // some specific error handling } // error handling }
Recommend
More recommend
