SLIDE 1
- Dr. Steven Bitner
What is it?
JavaScript is a scripting language
No compiling or linking
JavaScript Dr. Steven Bitner What is it? JavaScript is a scripting - - PowerPoint PPT Presentation
JavaScript Dr. Steven Bitner What is it? JavaScript is a scripting - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 3
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
SLIDE 4
Why use JavaScript and not PHP?
Client-side vs. server-side Fewer page reloads Allows for an application feel on a webpage
SLIDE 5
What can it do?
Change, add or remove HTML and CSS Allow for adding of dynamic content Allow for client-side form checking
SLIDE 6
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.
SLIDE 7
Alert
One of the easiest and most reliable troubleshooting methods
alert(“HERE!”);
SLIDE 8
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
SLIDE 9
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
SLIDE 10
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
SLIDE 11
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 { }
SLIDE 12
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 */ );
SLIDE 13
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
SLIDE 14
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
SLIDE 15
Calling functions
Most commonly called using jQuery, or inline Inline
Call using ‘onClick( )’, ‘onMouseOver( )’,
‘onFocus( )’, ‘onBlur( )’, ‘onload( )’
SLIDE 16
Global and local variables
Location of declaration
SLIDE 17
Quotes in quotes
var name = “Steve ‘The Destroyer’ Bitner”; var name = ‘Steve “The Destroyer” Bitner’; var name = ‘Steve \’The Destroyer\’ Bitner’;
SLIDE 18
Strings as arrays
Can access any character in the string From the previous slide var firstInitial = name[0];
SLIDE 19
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
SLIDE 20
Boolean variables
var flag = false; Only other possible value is true;
SLIDE 21
Arrays
Can also define arrays
var myArray = new Array(“This”,
“Teacher”, ”Stinks”);
SLIDE 22
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)
SLIDE 23
Classes
Classes
var car =
{ make:”Honda”, model:”Civic”, year:2008 };
alert ( car.make); // will output Honda Alert (car[‘make’]); // so will this
SLIDE 24
Arithmetic
var x = 3 + 7; alert(x); // outputs 10 x += 4; alert(x); // outputs 14
SLIDE 25
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;
SLIDE 26
Operators
C-like operations
= + , - , / , * += , -= , /= , *= % ++ , --
SLIDE 27
Comparators
Equality
== ===
Inequality
!= !== < > <= >=
SLIDE 28
Logical operands
&& || !
SLIDE 29
Single line if
(condition)?true:false;
SLIDE 30
Multi-line ifs
if (condition) { some code } else if (another condition) {
- ther code
} else { default code }
SLIDE 31
Switch
switch (x) { case 1: code break; case 2:
- ther code
break; default: even more code }
SLIDE 32
Beyond alert
confirm
Used to elicit an OK/Cancel response from the user
if (confirm (‘Would you like to continue?’)) { do some frightening things stuff }
SLIDE 33
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”);
SLIDE 34
Loops
for ( ) while ( ) do while ( ) [foreach]
Actually written ‘for’
SLIDE 35
Getting out of loops
To skip a certain iteration: use continue; To skip the current and all future iterations: use break;
SLIDE 36
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 }