java script introduction
DESCRIPTION
[email protected]TRANSCRIPT
![Page 1: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/1.jpg)
JavaScript Introduction
Aaron Conran
Text: JavaScript The Definitive GuideBy David Flannagan
![Page 2: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/2.jpg)
Case Sensitive
Example:
• myVar
• myVAr
• These are not the same variable.
![Page 3: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/3.jpg)
(Optional) Semicolons
• JavaScript allows you to omit semicolons at the end of your statements.
• However this can create nasty bugs and cause difficult to debug problems.
• Use them at the end of statements and make your life easier.
![Page 4: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/4.jpg)
Comments
• JavaScript supports both C and C++ style comments
• // this is a comment
• /* this is another comment */
![Page 5: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/5.jpg)
Comments (JSDoc)
• Comments which begin with /**• Note the 2 stars will be picked up by JSDoc• JSDoc allows you to document your JavaScript
classes in a formal manner similar to JavaDoc.• Allows code and documentation to always be
synchronized.• For more information:
http://jsdoc.sourceforge.net/
![Page 6: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/6.jpg)
JavaScript Reserved Words
• Avoid the use of reserved words as variables and function names in your JavaScript.
• For a full list
Flanagan p19-20
• Examples:– break– if– switch– in– class
![Page 7: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/7.jpg)
JavaScript DataTypes
• Numbers• Strings• Booleans• Functions• Objects
• Arrays• null• undefined• Date• Error
![Page 8: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/8.jpg)
Numbers
• Integer (whole)• Hexadecimal & Octal• Floating-points
(decimal)
You can add, multiply divide and subtract numbers with their respective operator: +, *, /, & -
• The Math library of JavaScript also exposes a number of useful methods:– Math.abs(num)– Math.sin(num)– Math.ceil(num)
Full reference p 659-669
![Page 9: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/9.jpg)
Special Numeric Values (Table 3-1) p25
Constant Meaning
Infinity Special value to represent infinity
NaN Special not-a-number value
Number.MAX_VALUE Largest representable number
Number.MIN_VALUE Smallest (closest to zero) representable number
Number.NaN Special not a number value
Number.POSTIVE_INFINITY Special value to represent infinity
Number.NEGATIVE_INFINITY Special value to represent negative infinity
![Page 10: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/10.jpg)
Strings
• “zero or more Unicode characters enclosed within single or double quotes”
• Examples:– “”– ‘myForm’– “testing”– “This is a longer string”
![Page 11: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/11.jpg)
Escape Sequences
• To encode special values like new lines and ‘s in JavaScript strings you utilize a backslash
• Example:– var menuText = ‘What\’s this?’;
![Page 12: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/12.jpg)
Escape Sequences(Table 3-2) p27
Sequence Character represented
\0 The NUL character (\u0000)
\b Backspace (\u0008)
\t Horizontal tab (\u0009)
\n Newline (\u000A)
\v Vertical tab (\u000B)
\f Form feed (\u000C)
\r Carriage return (u\000D)
\” Double quote (u\0022)
\’ Apostrophe or single quote (u\0027)
\\ Backslash (\u005C)
\xXX The Latin-1 character specified by the two hexadecimal digits XX
\uXXXX The Unicode character specified by the four hexadecimal digits XXXX
\XXX The Latin-1 character specified by the octal digits XXX, between 1 and 377. Not support by ECMAScript v3; do not use this escpae sequence.
![Page 13: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/13.jpg)
Adding Strings
• You can also add (or concatenate) strings simply by adding them.
Example:var anotherString = ‘new’;
var newVariable = ‘Something ‘ + anotherString;
• When adding numbers they will automatically be converting to strings.
Example:var x = 12;
var newString = x + ‘ dozen eggs’;
![Page 14: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/14.jpg)
Converting Strings To Numbers
• Utilize the parseNumber utility functions to extract numbers from strings.– parseInt– parseFloat
• Example:
var x = “11”;
var xNum = parseInt(x);
![Page 15: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/15.jpg)
Booleans
• true
(Other truthy values)• 1• {}• ‘ ‘ - space• ‘my String’
• false
(Other falsey values)• undefined• null• 0• “” – empty string
![Page 16: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/16.jpg)
Equals vs Strictly Equals
• There is a strictly equals operator in JavaScript which will also check type as well as value. To show how this relates to boolean values:
•== Equals•Works for Truthy values
•=== Strictly Equals•Works for truth only
•!= Not Equals•Works for Falsey values
•!== Strictly Not Equals•Works for false only
![Page 17: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/17.jpg)
Objects
• JavaScript Objects are similar to ColdFusion Structures.• They consist of zero to many key-value pairs.• They can be nested infinitely deep.• They provide an associative array or hash map.Example:// using the Object constructorvar newObj = new Object();newObj.x = 10;newObj.y = 20;// OR using the Object literal syntaxvar newObj = {x: 10, y: 20};
![Page 18: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/18.jpg)
Object Literal
• Object literal is the preferred way to create objects because it is concise and consistent with JSON-syntax.
• When utilizing object literal syntax key value pairs are separated by colon’s.
• Keys are called properties
![Page 19: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/19.jpg)
Functions
• Functions are actually a datatype too• Example:
var myFn = function() {console.log(‘hi’);};
function myFn() {console.log(‘hi’);}
These are 2 different ways of defining a similar function. There is also a Function constructor, however it’s use is limited because it can only create functions in the global scope.
![Page 20: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/20.jpg)
Functions as Properties
• Properties of Objects can be any data type including Functions.
Example:var myObject = {myFun: function() {console.log(‘hi’);}};
myObject.myFun();
![Page 21: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/21.jpg)
Arrays
• Arrays can be defined using 2 syntaxes as well.
Example:
// Utilizing the Array constructor
var myArray = new Array();
myArray[0] = 12;
myArray[1] = 232;
// OR using the Array literal syntax.
var myArray = [12,232];
![Page 22: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/22.jpg)
Arrays (cont.)
• Arrays can be infinitely nested• Arrays can be sparse• Arrays can store unlike datatypes• Full reference available p 602-611
• Arrays provide a number of useful properties and methods such as:– length – property which defines how many elements are in the
Array– push – method which pushes another element on the Array
when utilized as a Stack– pop – method which pops an element off an Array when utilized
as a Stack
![Page 23: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/23.jpg)
null vs undefined
• null
• “null is a special keyword which indicates no value”
• undefined
• “undefined is returned when you use either a variable that has not been declared but never had a value assigned to it or an object property that does not exist”
![Page 24: Java Script Introduction](https://reader036.vdocuments.net/reader036/viewer/2022062303/5556b031d8b42a9c798b532b/html5/thumbnails/24.jpg)
null vs undefined
• Both of these equate to a falsey value.
var myVar;
// what is the value of myVar?