Javascript Review
window.alert()
Creates a pop-up window to display data
Why do we use functions?
Functions are useful because you can reuse code. Define the function once, and then reuse it many times later on with different arguments to produce different results.
toFixed() method
Good for working with money. Returns a string with the number written with the specified number of decimal places. var x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns 9.6560 x.toFixed(6); // returns 9.656000
Identifiers
Identifiers are names, used to name variables, functions, and labels. First character must be a letter, an underscore, or a dollar sign. Numbers can be used, but not as the first character. All identifiers are case sensitive.
toExponential() method
toExponential() returns a string, with a number rounded and written using exponential notation. A parameter defines the number of characters behind the decimal point: var x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns 9.6560e+0 x.toExponential(6); // returns 9.656000e+0
debugger
stops the execution of Javascript, and calls (if available) the debugger function.
try...catch
implements error handling to a block of statements
What can Javascript do?
-Can change HTMl content -Can change HTML attributes -Can change HTML styles (CSS) -Can hide/show HTML elements
if...else
Marks a block of statements to be executed, depending on a condition.
do...while
executes a block of statements, and repeats the block, while a condition is true.
return
exits a function
Accessing Object Properties
Can be done in two ways: objectName.propertyName or objectName["propertyName"] Ex: var person = { firstName:"John"; lastName:"Doe"; } document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; Causes the name "John Doe" to be written in the element with class "demo"
Number() method
Can be used to convert Javascript variables into numbers: x = true; Number(x); // returns 1 x = false; Number(x); // returns 0 x = new Date(); Number(x); // returns 1404568027739 x = "10" Number(x); // returns 10 x = "10 20" Number(x); // returns NaN
Comments
Code that is not executed. Useful to explain what sections of code is doing, and can be placed in front of a section of code to keep it from being executed. after // or between /* */
Statements
Composed of values, operators, expressions, keywords, and comments. Separated by semicolons. Multiple statements can be combined into large blocks using curly brackets {}, such as in functions.
Variables
Containers for storing values. Use the keyword "var". Work very much like algebra, have stuff represent something else. It is good practice to declare all variables at the start of the script. Many variables can be in one statement as long as they are separated by a comma. Can be in a single line or can be on multiple lines. var person = "JohnDoe", carName = "Volvo", price = 200;
Math.random()
Creates a random number between 0 (inclusive) and 1 (exclusive).
Data Types
Data can be numbers, strings, objects, booleans, or arrays. When adding a number and a string together, Javascript treats the number as a string. Ex: 16 + "Volvo" = 16Volvo Javascript evaluates expressions from left to right, which can produce different values: Ex: 16 + 4 + "Volvo" = 20Volvo Ex: "Volvo" + 16 + 4 = Volvo164. This is because all of the numbers are treated as strings after Volvo. Since the first operand is a string, all of the others are treated as strings.
What can event handlers do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions: Things that should be done every time a page loads Things that should be done when the page is closed Action that should be performed when a user clicks a button Content that should be verified when a user inputs data And more ... Many different methods can be used to let JavaScript work with events: HTML event attributes can execute JavaScript code directly HTML event attributes can call JavaScript functions You can assign your own event handler functions to HTML elements You can prevent events from being sent or being handled
*= operator
Ex: x *= y Same as x = x*y
+= operator
Ex: x += y Same as x = x + y
-= operator
Ex: x -= y Same as x = x - y
/= operator
Ex: x /= y Same as x = x/y
slice() method
Extracts a part of a string and returns the extracted part in a new string. 2 parameters, the starting index and the ending index positions: var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13); returns "Banana" If parameters are negative, it starts from the end of the string. If you omit the second parameter, the method will slice out the rest of the string.
Events
HMTL events are "things" that happen to HTML elements. When javascript is used in HTML pages, Javascript can react on these events. An HTML event can be something the browser does, or something a user does. Here are some examples of HTML events: An HTML web page has finished loading An HTML input field was changed An HTML button was clicked Often, when events happen, you may want to do something. JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. Ex: <button onclick="document.getElementById("demo").innerHTML = function">buttontext</button> SInce JS code is usually long, it is more common to see event attributes calling functions, rather than this long code above.
Using Javascript
In HTML, JS code must be inserted between these tags <script></script> <script type="text/javascript"> the type attribute is not necessary since JS is the default scripting language in HTML. Can be placed in the head or the body. When placed at the bottom of the body, display speeds are quicker since script compilation slows down the display. External: <script src="myScript.js"></script>, can be placed in head or body.
Local Variables
In Javascript, scope is the set of variables, objects, and functions that you have access to. Local variables have local scope, which means they can only be accessed within the function. Ex: // code here can not use carName function myFunction() { var carName = "Volvo"; // code here can use carName } Since local variables are only recognized inside their functions, variables with the same name can be used in different functions. Local variables are created when a function starts, and deleted when the function is completed.
Case and Character Set
JS is usually written with lower camel case (getElementById) Uses Unicode character set, covers almost all characters, punctuations, and symbols in the world.
Objects
Javascript objects are like values, except that they can contain many values, which are written as name:value pairs. Javascript objects are containers for named values. Ex: var car = {type:"Fiat", model:"500", color:"white"} Enclosed in curly brackets, separated by a comma.
switch
Marks a block of statements to be executed, depending on different cases
Math Properties (Constants)
Math.E // returns Euler's number Math.PI // returns PI Math.SQRT2 // returns the square root of 2 Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E Math.LOG10E // returns base 10 logarithm of E
Math.abs()
Math.abs(x) returns the absolute (positive) value of x: Math.abs(-4.7); // returns 4.7
Math.ceil()
Math.ceil(x) returns the value of x rounded up to its nearest integer: Math.ceil(4.4); // returns 5
Math.cos()
Math.cos(x) returns the cosine (a value between -1 and 1) of the angle x (given in radians). If you want to use degrees instead of radians, you have to convert degrees to radians: Angle in radians = Angle in degrees x PI / 180. Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
JavaScript Random Integers
Math.floor(Math.random() * 10); // returns a number between 0 and 9 Math.floor(Math.random() * 11); // returns a number between 0 and 10 Math.floor(Math.random() * 10) + 1; // returns a number between 1 and 10 Math.floor(Math.random() * 100) + 1; // returns a number between 1 and 100
Math.floor()
Math.floor(x) returns the value of x rounded down to its nearest integer: Math.floor(4.7); // returns 4
Math.min() and Math.max()
Math.min() and Math.max() can be used to find the lowest or highest value in a list of arguments: Math.min(0, 150, 30, 20, -8, -200); // returns -200 Math.max(0, 150, 30, 20, -8, -200); // returns 150
Math.pow()
Math.pow(x, y) returns the value of x to the power of y: Math.pow(8, 2); // returns 64
Math.round()
Math.round(x) returns the value of x rounded to its nearest integer: Math.round(4.7); // returns 5 Math.round(4.4); // returns 4
Math.sin()
Math.sin(x) returns the sine (a value between -1 and 1) of the angle x (given in radians). If you want to use degrees instead of radians, you have to convert degrees to radians: Angle in radians = Angle in degrees x PI / 180. Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Math.sqrt()
Math.sqrt(x) returns the square root of x: Math.sqrt(64); // returns 8
console.log()
Method of displaying data that is used for debugging purposes.
Object Methods
Methods are actions that can be performed on objects. Methods are stored in properties as method functions. A method is actually a function definition stored as a property value. Do not declare strings, booleans, or numbers as objects. When variables are declared with the keyword "new", they are declared as objects. This slows down the execution speed and complicates your code.
parseInt() method
Parses a string and returns a whole number. Spaces are allowed. Only the first number is returned: parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN
valueOf() method
Returns a number as a number: var x = 123; x.valueOf(); // returns 123 from variable x (123).valueOf(); // returns 123 from literal 123 (100 + 23).valueOf(); // returns 123 from expression 100 + 23 In JavaScript, a number can be a primitive value (typeof = number) or an object (typeof = object). The valueOf() method is used internally in JavaScript to convert Number objects to primitive values. There is no reason to use it in your code.
search() method
Same thing as indexOf(), except that it can take on more powerful search values.
parseFloat() method
Similar to parseInt(), but it parses a string and returns a number. This number can include decimal places: parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN
substring() method
Similar to the string method, but cannot take on negative parameters. If the second parameter is omitted, it will slice out the rest of the string.
Strings
String are a series of characters in quotes, such as "John Doe" or "the quick brown fox jumps over lazy dog" Quotes can be strings, as long as the phrase in quotes is in single quotes while the larger string is in double quotes. Or vice versa.
charAt() method
The charAt() method returns the character at a specified index (position) in a string: var str = "HELLO WORLD"; str.charAt(0); // returns H
charCodeAt() method
The charCodeAt() method returns the unicode of the character at a specified index in a string: var str = "HELLO WORLD"; str.charCodeAt(0); // returns 72
substr() method
The first parameter specifies the starting point, and the second parameter specifies the length of the string, from that starting point, that is to be extracted. If the second parameter is omitted, the rest of the string will be sliced.
indexOf() method
The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string. Returns -1 if the text is not found. Positions count from zero.
Functions
A Javascript function is a block of code designed to perform a particular task. A function is executed when something "invokes" it (calls it). The codes that are to be executed are in curly brackets. function name(parameter1, parameter2) {code} A function is made up of function, a name, and parantheses that specify the parameters. Parameters are the names listed in the function definition. The arguments are the real values received by the function when invoked. The arguments (parameters) behave as local variables in the function.
Expressions
A combination of values, variables, and operators which computes to a value. The computation is called an evaluation.
Converting a String to an Array
A string can be converted to an array with the split() method: var txt = "a,b,c,d,e"; // String txt.split(","); // Split on commas txt.split(" "); // Split on spaces txt.split("|"); // Split on pipe If the separator is omitted, the returned array will contain the whole string in index [0].
Global Variables
A variable that is declared outside of a function is a global variable. A global variable has global scope, which means that all scripts and functions on a webpage can access it. Ex: var carName = " Volvo"; // code here can use carName function myFunction() { // code here can use carName } With JavaScript, the global scope is the complete JavaScript environment. In HTML, the global scope is the window object. All global variables belong to the window object. var carName = "Volvo"; // code here can use window.carName
innerHTML
A way JS can be displayed. Writes into an HTML element. To access an HTML element, use document.getElementById(id) Ex: document.getElementById(demo).innerHTML = text ---- Text is then put into the element with the id "demo"
document.write()
A way of displaying data, should only be used for testing purposes.
A note on string methods:
All string methods return a new string. They don't modify the original string. Formally said: Strings are immutable: Strings cannot be changed, only replaced.
Operators
Arithmetic operators (+ - * /) Assignment operators ( = )
Math Object Methods
abs(x) Returns the absolute value of x acos(x) Returns the arccosine of x, in radians asin(x) Returns the arcsine of x, in radians atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians atan2(y, x) Returns the arctangent of the quotient of its arguments ceil(x) Returns the value of x rounded up to its nearest integer cos(x) Returns the cosine of x (x is in radians) exp(x) Returns the value of Ex floor(x) Returns the value of x rounded down to its nearest integer log(x) Returns the natural logarithm (base E) of x max(x, y, z, ..., n) Returns the number with the highest value min(x, y, z, ..., n) Returns the number with the lowest value pow(x, y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Returns the value of x rounded to its nearest integer sin(x) Returns the sine of x (x is in radians) sqrt(x) Returns the square root of x tan(x) Returns the tangent of an angle
concat() method
concat() joins two or more strings: var text1 = "Hello"; var text2 = "World"; text3 = text1.concat(" ", text2); The concat() method can be used instead of the plus operator. These two lines do the same: var text = "Hello" + " " + "World!"; var text = "Hello".concat(" ", "World!");
function
declares a function.
continue
jumps out of a loop and starts at the top
for
marks a block of statements to be executed, as long as a condition is true.
Creating Date Objects
new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) var d = new Date() d.toString() = default d.toDateString() = most readable d.toUTCString() = a date display standard
Common HTML Events
onchange = An HTML element has been changed onclick = The user clicks an HTML element onmouseover = The user moves the mouse over an HTML element onmouseout = The user moves the mouse away from an HTML element onkeydown = The user pushes a keyboard key onload = The browser has finished loading the page
toPrecision() method
returns a string, with a number written with a specifed length: var x = 9.656; x.toPrecision(); // returns 9.656 x.toPrecision(2); // returns 9.7 x.toPrecision(4); // returns 9.656 x.toPrecision(6); // returns 9.65600
Terms
syntax = set of rules computer program = a list of instructions to be executed by a computer. These program instructions are called statements. In HTML, Javascript programs are executed by the browser.
break
terminates a switch or loop.
toUpperCase() and toLowerCase()
var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // text2 is text1 converted to upper var text1 = "Hello World!"; // String var text2 = text1.toLowerCase(); // text2 is text1 converted to lower
lastIndexOf() method
The lastIndexOf() method returns the index of the last occurrence of a specified text in a string. Returns -1 if the text is not found. Positions count from zero.
replace() method
The replace() method replaces a specified value with another value in a string: str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "W3Schools"); By default, the replace() function replaces only the first match. To replace all matches, use a regular expression with a g flag (for global match): str = "Please visit Microsoft!"; var n = str.replace(/Microsoft/g, "W3Schools");
Converting Variables to Numbers
There are 3 JavaScript methods that can be used to convert variables to numbers: The Number() method The parseInt() method The parseFloat() method These methods are not number methods, but global JavaScript methods.
A Proper Random Function
This JavaScript function always returns a random number between min (included) and max (excluded): function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; } This JavaScript function always returns a random number between min and max (both included): function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }
toString() method
This method returns a number as a string. All number methods can be used on any type of numbers (literals, variables, or expressions): var x = 123; x.toString(); // returns 123 from variable x (123).toString(); // returns 123 from literal 123 (100 + 23).toString(); // returns 123 from expression 100 + 23
JS values
Two types: fixed values = literals, such as strings and numbers variable values = variables
Javascript numbers
Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point etc. JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard. This format stores numbers in 64 bits, where the number (the fraction) is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63: Numbers are considered accurate up to 15 digits. The floating point arithmetic is not always accurate, so it is helpful to multiply into larger numbers and then divide out: var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3 Never write a number with a leading zero, like 07. NaN and Infinity both return "number" values. Do not make number objects, similar to string objects. This slows down the execution.
Accessing Object Methods
Use the following syntax: objectName.objectMethod () Ex: var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); When you call this method, it performs the function that is stored as a property in the object and writes "John Doe"
Undeclared Variables
Variables can often be undeclared without a value. The value can be something that has to be calculated, or something that will be provided later, such as user input. If you re-declare a variable and don't give a value, it won't lose its original value.
Accessing a string as an array is unsafe
You might have seen code like this, accessing a string as an array: var str = "HELLO WORLD"; str[0]; // returns H This is unsafe and unpredictable: It does not work in all browsers (not in IE5, IE6, IE7) It makes strings look like arrays (but they are not) str[0] = "H" does not give an error (but does not work) If you want to read a string as an array, convert it to an array first.
