Javascript for dummies library book
Handling browsers with javascript turned off
Javascript is supported by all modern browser. However, many people disable javascript because they are concerned about security, they don't want cookies to be written on their hard drives.
If javascript is disabled, the text and tags within the <noscript> tag are displayed to the user.
Note:
We can put <script> tag within the <head> header element.
It is acceptable to put multiple <script> tags, as long as you don't put one <script> block within another one.
Displaying a message
Note:
One statement, one line. Multiple statement lines are difficult to read and troubleshoot.
Writing a text to the page
The document.write() tells the browser to insert whatever is inside the parentheses to the webpage.
The document.lastmodified returns date and time the file was last changed and saved.
Adding comments to your code
2 ways to add comments
Creating External JavaScript Files
When your script is very long and you need to make changes, you need to update every page that uses the code. The solution is to move it to an external JS file. So we can update the code by editing only the external file.
To let the browser know that an external JS exists, add src attribute to the <script> tag.
For example:
<script src= ‘myscript.js’>
Note: the file must be in the same directory as the HTML file.
<script src= ‘scripts/myscripts.js’>
Note: if the file is in a different directory, adjust the src value accordingly.
Declare a variable
var variableName;
Storing a value in a variable
variableName = value;
eg.var variableName=0.03;
You can also change the value of existing value
eg. interestRate=interestRate/12;
Browser always evaluate the right side of the statement. So it will evaluate the equation and assign the new value to the variable name.
Using variables in statements
alert:
prompt:
Literal Data Types:
JS supports three literal data types: numeric, string and boolean
Numeric:
JS teats all numbers the same. You don't have to do anything special with integers or floating-point numbers.
Exponential notation:
It is a way to represent really large/small floating-point numbers with an e (or E) followed by a + sign or — sign, followed by a number called exponent.
eg. ‘+’ means multiply
9.87654e+5; → 9.87654*10⁵==987654
eg. ‘-’ means divide
3.4567e-4; → 3.4567/10⁴==0.00034567
The limit of JS can store as value is 9007199254740992 to -9007199254740992. If you use numbers outside of this range, JS won't be able to maintain accuracy.
Hexadecimal integer values:
eg. 3(16³)+8(16²)+8(16¹)+2
The first power 3 is derived from taking number of digits, 4–1 =3
To specify hexadecimal number in JS, type ‘0x’ at the start.
eg.0x23;
String literals:
It uses either “ ” or ‘ ’
Understanding escape sequences:
Booleans literals:
currentMonth === “August” asks does the value currentMonth equal the string “August”?
Building numeric expressions
increment operator:
(someVariable + 1) is the same as (++someVariable)
subtraction and negation operator:
(negatedValue = -thisVariable;) is same as (negatedValue = thisValue*-1;)
decrement operator:
(someVariable -1) is the same as ( — — someVariable)
Pre and post decrement operators:
To decrement an old variable and later assign to a new variable, use pre decrement operator.
eg. newVariable= — — oldVariable;
To assign the old variable to a new variable and later decrement the old variable, use post decrement operator.
eg. newVariable = oldVariable — — ;
division operator:
Note that the divisor is not 0, as it will produce an infinity result.
To prevent that, you can use an if statement to check whether the divisor is not 0, else cancel the division.
Modulus operator:
Can be used for choosing web page color scheme. Colors that are complement are on the opposite side of the color wheel. First color hue between 0 and 179, gives second hue value between 180 and 359. However, for those initial hue value greater than 179, you can get the second hue color by using modulus:
complementaryColor = (originalColor +180)%360;
Building String Expressions
“Java” + “script” ==”Javascript”
eg.
2+2=4
“2” + “2” == “22”
Note:
If the initial operand is a string, JS will treat any number in the expression as a string.
eg.
“2”+2+2
222
If the initial operand are numbers and the rest are string, JS evaluate the expression first and then convert to a string.
eg.
2+2+”2" = “42”
‘===’ identity operator
‘!==’ non-identity operator
In JS, all uppercase letters come before all lowercase letters. Means, “B” > “a”
If the first letters are the same, JS will compare letter-by-letter.
eg.
“Smith”> “Smyth” → True
“Marg”> “Margaret”, “Marg….”> “Margaret” → False
If you compare two strings of different length, JS will add spaces to the shorter string in order to compare. Thus, a space is smaller than ‘a’.
ternary operator:
(expression) ? (return this result if true) : (return this result if false);
eg. screenwidth > maxPortableWidth ? “Desktop” : “Portable”;
This is a comparison expression. If True it will return a value, else return another value.
Building Logical Expression
&& → and, True if both expressions are true
|| → or, True as long as one expression is true
! → not, True if the expression is false
Making True/False Decisions with if() statements
if (expression) {statement};
or
if (expression) {
statement1;
statement2;
}
If totalSales is not equal to 0 means expression is True, we will then calculate the grossMargin, else do nothing.
if (expression) {
statements_if_true
} else {
statement_if_false
}
The if else() statement is very similar to the ternary operator. Ternary operator is more efficient in terms of total characters type and total lines used.
Multiple decisions:
We can use AND(&&) and OR(||) operators together with if-else statements.
We can also use if-else if-else statement.
