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>