得益于 Youtube 的自动字幕功能，现在在上面看一些教程类的视频能听懂百分之七八十，再次感谢伟大的 Google。上周看到了一个 JavaScript 的视频，讲解的简单易懂，逻辑清晰，适合初步了解 JavaScript。

Variables & Data Types

two ways to Place JavaScript

JavaScript can be placed in the <body> and the <head> sections of an HTML page.or you can be place an external files. for example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script ></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
//tmp.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="tmp.js"></script>
</body>
</html>
1
2
//tmp.js
alert("my First JavaScript");

Variables

Declare JavaScript Variables with var keyword. Variables:

  • can be contain letters ([a-zA-z]), digits ([0-9]), underscore (_), and dollar signs ($).
  • Must begin with a letter
  • Case senstive (a and A are different variables)
  • Reverved words can’t be used 
1
2
3
4
5
6
7
8
9
10
11
12
13
var num1 = 43;
var num2 = 56;
alert(num1+num2);
var name = "beep";
var address = "hangzhou";
alert("My name is" + name + "I live in " + address);
// camel case => 
myFirstName = "wang";
// underscore case => 
my_first_book = "GFW";

Array

Two ways to create a array in JavaScript 

1
2
3
var colors = ['red', 'blue', 'green'];
var colors = new Array('red', 'blue', 'green');

And also 2 ways to add element to a Array in JavaScript,

colors[3] = "orange";

but it’s not the best way, we can use the push function

colors.push("orange");

Loops

Four types of loops.

  • Four loop
  • While loop
  • Foreach loop for arrays
1
2
3
4
5
6
7
8
//for loop
for(var i = 0; i < 10; i++){
    console.log(i);
}
//it print 0-9 in console of chrome
1
2
3
4
5
6
//while loop
i = 3;
while(i < 10){
    console.log(i);
    i++;
}
1
2
3
4
5
6
7
8
9
var number = [432,43,56,86,1,55];
numbers.foreach(function(number){
    console.log(number);
});
//we can also use for loops
for(var i = 0;i < numbers.length; i++){
    console.log(numbers[i]);
}

Conditions

  • if statement
  • switch statement
1
2
3
4
5
6
7
var1 = 32;
var2 = 43;
if (var1 < var2){   
    console.log("it is true")
}else{
    console.log('it is false')
}
1
2
3
4
5
6
7
8
9
10
11
12
var fruit = 'apple';
switch(fruit){
    case 'banana';
        alert("I hate bananas");
        break;
    case 'orange';
        alert("I love apples");
        break;
    default:
        alert('I love all fruits');
        break;
}

Objects

Object literal, we can set a variable and set it to an object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var person = {
    firstName: 'beep';
    lastName: 'pony';
    age: 45;
    children: ['son1', 'son2'];
    address: {
        street: 'wenyi road';
        city: 'Hangzhou';
        province: 'zhejiang';
    }
    fullName: function(){
        return this.firstName + "" + this.lastName;
    }
    
    // ·this· means the object itself, here represent person
}
console.log(person.fullName());

Object Constructor is just another way to create a single object

1
2
3
4
5
6
7
8
9
var apple = new Object();
apple.color = 'red';
apple.shape = 'round';
apple.describe = function(){
    return "Apple's color is" + this.color + "and the shape is " + this.shape;
}
console.log(apple.describe());

But if you have some other fruit, you have to do this whole thing for each fruit. we have much simpler way to do this. It’s Constructor Pattern

1
2
3
4
5
6
7
8
9
10
11
function Fruit(name, color, shape){
    this.name = name;
    this.color = color;
    this.shape = shape;
    this.describe = function(){
        return "A" + this.name + "is the color" + this.color + "and the shape is" + this.shape;
    }
}
var apple = new ;Fruit('apple','green','round');
console.log(apple.describe());

Events

Events is one of the most important aspects of learning JavaScript. JavaScript was created to make web pages interactive and dynamic.

1
2
3
4
5
6
7
8
9
// We hope users click the button and it pop an alert
<button onclick="doClick">Click me</button>
<script>
    function doClick(){
        console.log("You clicked~");
    }
</script>

We can change the heading text by clicked the button. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="header">
	<h1 id="heading">Learning the JavaScript</h1>
	<p>With Beepony</p>
</div>
<div class="container">
    <button onclick="changeText()"> Click me </button>
</div>
<script>
    function changeText(){
        var heading = document.getElenmentById('heading');
        heading.innerHTML = 'Your clicked';
    }
</script>

The onclick is’t the only event we can use. For example onmouseover event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="header">
	<h1 id="time">Learning the JavaScript</h1>
</div>
<div class="container">
    <h1 id='time'></h1>
    <button onmouseover="showDate()"> Show Date </button>
</div>
<script>
    function showDate(){
        var time = document.getElenmentById('time');
        time.innerHTML = Date();
    }
</script>

Forms

JavaScript plays a really big role in form validation and other types of functionality with forms. We can create simple forms with some feild.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form method='post' action="xx.php" name="myForm">
<div>
	<label >first Name</label>
	<input type="text" name = 'firstName' id="firstname" />
</div>
<div>
	<label >last Name</label>
	<input type="text" name = 'lastName' id="lastname" />
</div>
	
<div>
	<label >backgroud</label>
	<select name="backgroud" id="backgroud"
	onchange="changeBackground(this)">
		
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="green">Green</option>
	
	</select>
</div>
</br>
	<input type="submit" value="Submit" />
</form>

What we want to do is just to show how we can link some events to some of the feilds and do simple form validation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<form method='post' action="xx.php" name="myForm" onsubmit="return validateForm()">
<div>
	<label >first Name</label>
	<input type="text" name = 'firstName' id="firstname" />
</div>
<div>
	<label >last Name</label>
	<input type="text" name = 'lastName' id="lastname" />
</div>
	
<div>
	<label >backgroud</label>
	<select name="backgroud" id="backgroud"
	onchange="changeBackground(this)">
		
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="green">Green</option>
	
	</select>
</div>
</br>
	<input type="submit" value="Submit" />
</form>
<script>
    function validateForm(){
        var firstName = document.forms["myForm"]["firstName"].value;
        if(firstName == null || firstName == ""){
            alert("First name is required");
            return false;
        }
        if(firstName.length < 3){
            alert("First name must be at least 3 chars");
            return false;
        }
    }
</script>

if the Firstname is less 3 chars or null, we pop a alert.