DOM Scripting: Reading Note 1
This is the note of book: « DOM Scripting Web Design with JavaScript and the Document Object Model Second Edition »”
Chapter 1 Brief History
Compare HTML vs XHTML
- HTML4 vs XHTML: XHTML is stricter version of HTML4;
- HTML4 allow some elements omit the end tag;
-
HTML4 allow overlapping the certain elements;
- HTML5 vs XHTML: largely same;
- XHTML is case sensetive, HTML5 is not;
- HTML5 compatiable all browsers, but XHTML not;
- HTML5 is better suit mobile but XHTML is better suit computer screen;
Chapter 2 JavaScript Syntax
Three way to add JS
1.Within <head></head>;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script></script>
</head>
<body>
</body>
</html>
2.Better way, place js in seperate file;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
3.Best way, place end of the document, let browser load faster
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Mark-up goes here...
<script src="file.js"></script>
</body>
</html>
The <script> tag is unnecessery need type="text/javascript" attribute, because it already assume to be JS;
Programming language vs Interpreted language
Programming language: are either interpreted or compiled. Language like C, Java, they need a complier to translate hight-level in to file that can be exectute directly by computer;
Interpreted language: are just need an interpreter, like JS, browser is an interpreter;
Comment
//for single line/* content */for multiple lines<!- content ->also can use HTML style comment, but same like//, only use for signle line
Variable
Although declaring variables beforehand isn’t require in JS, but it still a good programming practice.
The most efficient way to declare and assign variable is:
var a = "marcus", b = 26;
Underscore: var my_name = "marcus";
Camel Case:var myName = "marcus"; (more preferred for function and method name as well as object properties;)
Date Type
JS is a weakly typed language, this means that you can change data type of a variable at any stage.
//following statement will illegal in other strong typed language
var age = "twenty";
age = 20;
String:
String must be enclosed in quotes, can use either single quotes or double quotes;
//fllowing statement is same
var mood = 'happy';
var mood = "happy";
//but you have do this way in those situation
var mood = "I'm happy";
var mood = ' he said: "very happy" ';
//there is another way, using \'
var mood = ' I\'m happy ';
var mood = " he said: \"very happy\" ";
Number:
Allows specify as many decimal places as you want, there are called floating-point numbers;
Boolean values:
var test = true;
Arrays
//one
var myArray = Array();
//two
var myArray = Array(4);
myArray[0] = "Mark";
//three
var myArray = Array("Mark", "Thon", "Bob");
//four
var myArray = ["Mark", "Thon", "Bob"];
//five: different type of elements
var myArray = ["Mar", 23, false];
//six: array as element
var myArray = ["Mark", "Thon", "Bob"];
var newArray = [ myArray, "test", 23, false];
alert(newArray[0][0]); // "Mark"
Associative arrays
The index can be string instead(not recommend), because when you create associative arrays, you’re actually add new attributes on the Array object: name, age and living. Ideally, we shouldn’t modify the attribute of Array object.
var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
Objects
Object is a group of multiple values under the same name, each one of these values is a property of the object.
Object let people reference elements by name instead of number, make more readable scripts;
//one
var lennon = Object();
lennon.name = "John";
lennon.year = 1940;
lennon.living = false;
//two
var lennon = { name:"John", year:1940, living:false };
//optimize: Array six above
var lennon = { name:"John", year:1940, living:false };
var newArray = [ lennon, "test", 23, false];
alert(newArray[0].name); // "John"
//improve
var lennon = { name:"John", year:1940, living:false };
var people = {};
var people.manager = lennon;
Operations
To avoid ambiguity, it’s best to sperate operations by enclosing them in parentheses;
1 + ( 4 * 5);
(1 + 4) * 5;
//string + number = return string
var a = "happy" + 2000; // "happy2000"
Conditional statements
== equality operater is not strict, for example:
var a = false;
var b = "";
return a == b; // will return ture
//other case
var a = "1";
var b = 1;
return a == b;// also return ture
WHY?: The “empty string” have the same meaning as “false”; so we need use “===”
Loop statements
do…while
//let statements a least execute once
do{
statements;
}while(condition);
Functions
Using if you want to reuse the same piece of code more than once;
When data is passed to a function, it is known as an argument.
function convertToCelsius(temp) {
var result = temp - 32;
result = result / 1.8;
return result;
}
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
For easily distinguish between variables and functions, Variables using underscores to sperate words. Functions using camel case.
Variable Scope
Obejcts
Cotain two forms: properties and methods;
To use a object Person to describe a specific person, need create an instance of Person
//create new instance called Frank
var Frank = new Person();
Native objects
Premade objects in JS,
var newArray = new Array();;
Host objects
Objects are supplied by the web browser, like Form, Image and Element. We use document object instead those