JSshow – 學習JavaScript最全面的教程

一、學習目標

1、了解JavaScript的基礎語法和基本概念

2、掌握JavaScript使用DOM和BOM進行網頁交互的方法

3、熟悉Ajax技術和jQuery庫的簡單使用

4、了解ES6相關新特性和JSON數據格式

二、JavaScript基礎

1.變數和數據類型

<script>
//定義變數
var name = "Tom";
var age = 20;

//輸出變數
document.write(name+" is "+age+" years old.");

//數據類型
var num = 10;                           //數字
var str = "Hello World!";               //字元串
var bool = true;                        //布爾型
var arr = [1,2,3,4];                    //數組
var obj = {name:"Tom",age:20};          //對象
var nil = null;                         //空
var undef = undefined;                  //未定義
</script>

2.運算符和流程式控制制

<script>
//運算符
var a = 10;
var b = 20;
document.write("a+b="+(a+b));           //算術運算符
document.write("a==b:"+(a==b));         //比較運算符
document.write("a&&b:"+(a&&b));         //邏輯運算符

//流程式控制制
var score = 80;
if(score>=60 && score=70 && score=80 && score=90){
    document.write("卓越");
}else{
    document.write("不及格");
}
</script>

3.函數和對象

<script>
//函數
function add(num1,num2){
    return num1+num2;
}
document.write(add(1,2));               //輸出3

//對象
var person = {name:"Tom",age:20};
document.write(person.name);            //輸出Tom
</script>

三、DOM和BOM

1.DOM操作

<script>
//獲取元素
var div = document.getElementById("myDiv");
var spans = document.getElementsByTagName("span");
var inputs = document.getElementsByName("myInput");

//修改元素
div.innerHTML = "修改後的文本";
spans[0].style.color = "red";
inputs[0].value = "修改後的值";
</script>

2.BOM操作

<script>
//瀏覽器對象
document.write("瀏覽器類型:"+navigator.userAgent);
document.write("屏幕解析度:"+screen.width+"*"+screen.height);

//定時器
var timer = setInterval(function(){
    document.write("Hello!");
},1000);
setTimeout(function(){
    clearInterval(timer);
},5000);

//彈窗
alert("Hello JavaScript!");
confirm("Are you sure?");
prompt("Please input your name:");
</script>

四、Ajax和jQuery

1.Ajax

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){
        document.write(xhr.responseText);
    }
};
xhr.open("GET","http://www.example.com/api",true);
xhr.send();
</script>

2.jQuery

<script src="jquery.js"></script>
<script>
$.get("http://www.example.com/api",function(data){
    $("#myDiv").html(data);
});
</script>

五、ES6和JSON

1.ES6新特性

<script>
//let和const
let a = 1;
const b = 2;

//箭頭函數
let add = (num1,num2) => num1+num2;

//模板字元串
let name = "Tom";
let str = `My name is ${name}.`;

//拓展運算符
let arr1 = [1,2,3];
let arr2 = [...arr1,4,5,6];

//解構賦值
let [x,y,z] = [1,2,3];

//類和繼承
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getInfo(){
        return this.name+" is "+this.age+" years old.";
    }
}
class Student extends Person{
    constructor(name,age,grade){
        super(name,age);
        this.grade = grade;
    }
    getInfo(){
        return super.getInfo()+" and study in grade "+this.grade+".";
    }
}

//Promise
let promise = new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve("ok");
    },1000);
});
promise.then(function(result){
    document.write(result);
});
</script>

2.JSON數據格式

<script>
//JSON對象
var person = {name:"Tom",age:20};
var jsonStr = JSON.stringify(person);
document.write(jsonStr);

//JSON字元串
var jsonStr = '{"name":"Tom","age":20}';
var person = JSON.parse(jsonStr);
document.write(person.age);
</script>