1 基本语法

<script src="main.js"></script> //引入js文件
//这是一句注释

2 数据类型

//数据类型-Number
123
1.2
-
1
1e3 //1000
1.2e4 //12000
NaN // not a number
Infinity //无穷大

//String 字符串
'王花花';
"王花花";
'王花花说："你好"';
'he\'s'; //转义字符
'啊' +
'祖国'; //换行
`啊
祖国` //换行

//boolean 布尔值
true
false

//Array 数组
['a', 'b', 1, 2, 3]
[
    '苹果',
    '香蕉',
    '菠萝',
    1,
    true
]

//Object 对象

var result = {
    title: '如何減肥？',
    desc: '少吃，多动'
}
result.title;

3 变量

var box = 'huahua';
box = 1;
box = [] // Object

let bag = 'yo';

console.log(box);
console.log(typeof box);
console.log(box.length);

4 控制流：if & else

var isAdmin = true;

if(isAdmin){
    console.log('他是管理员');
}else{
    console.log('他是管理员');
}

if(今天是礼拜一){
    ...
}else if(今天是礼拜二){
    ...
}else if(今天是礼拜三){
    ...
}else{
    ...
}

5 控制流：switch

var day = 3;

switch(day){
    case 1:
    //...
    console.log('今天吃牛肉面');
    break;
    case 2:
    //...
    console.log('今天吃凉皮');
    break;
    case 3:
    //...
    console.log('今天吃干锅');
    break;
    default:
    console.log('今天什么也不吃');
}

6 运算符

1+1;//2
'1' + '1'; //'11'

//- *

//%
10%3; //1
11%3;  //2

// ++自增
var loginCount = 0;
//loginCount = loginCount + 1;
console.log(++loginCount); //1

var loginCount = 0;
console.log(loginCount++); //0
// --自减

//> < >= <=
console.log('1 > 2:',1>2);

// = 赋值
var a = 1;

//==判断值是否相等
console.log('1 == 2:',1==2);
console.log('1 == 1:',1==1);
console.log('1 >= 1:',1>=1);

// === 判断是否严格相等（包括类型相等）
console.log('1 === 1:',1 === 1);
console.log("'1' === 1:",'1' === 1);

//!=
console.log('1 != 2:',1 != 2);

// && ||

var a = false,
    b = true;

if(a && b){
    console.log('转账成功！');
}else{
    console.log('转账失败！');
}

if(a || b){
    console.log('转账成功！');
}else{
    console.log('转账失败！');
}

7 循环：for

var result =[
    '百度一下，你就知道',
    '百度百科',
    '百度网盘',
    '百度视频'
];
for(var i = 0; i < result.length;i++){
    console.log(result[i]);
}

8 循环：while

var attempt =0;
while(attempt < 5){
    //继续尝试...
    attempt++;
    console.log(attempt);
}
console.log('loop stopped');

9 函数

function 做饭(){
    //买菜
    //洗菜
    //切菜
    //炒菜
}

做饭();
//...
做饭();

function buy(钱){
    if(!钱){
        alert('报警');
    }else{
        alert('您慢走');
    }
}

var  a =1;  //a是全局变量,相当于window.a = 1;
function fun(){
    var b =2; //b是局部变量
}
console.log(a); // 1 
console.log(b); //b is not defined

function 买买买(钱){
    if(!钱){
        return '钱呢？！';
    }
    return '您走好！';
}

10 对象

//javascript对象 包括属性和方法

//1、内置对象：如Date Array String等 
//访问对象的属性
var message = "hello world";
var x = message.length;
console.log(x); //11
//访问对象的方法
x = message.toUpperCase();
console.log(x);
/*
//2、自定义对象
//a. 创建对象实例
var person = new Object();
person.firstname='John';
person.lastname = 'Doe';
person.age = 18;
person.eyecolor = 'blue';
*/
//同 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

//b. 使用对象构造器-使用函数来构造对象
//先用函数构造一个对象构造器
function person(firstname,lastname,age,eyecolor){
    this.firstname = firstname; //this就是指这个person对象
    this.lastname = lastname;
    this.age = age;
    this.eyecolor = eyecolor;
}
//调用这个函数构造对象
var student = new person('John','Doe',18,'blue');
//document.write(student.firstname);
var x;
var txt = '';
//循环遍历对象的属性
for(x in student){
    txt = txt + student[x] + ',';
}
document.write(txt);

11 window对象：alert confirm和prompt

alert('1');
var r = confirm('您确定要删除此文件吗？');
console.log(r);
var n = prompt('你叫什么名字？');
alert('你好，'+ n);
console.log('你好,'+ n);
console.log('你好,', n);

12 window对象：setTimeout setInterval和clearInterval

setTimeout(function(){ //当2000ms的时间到了后，执行function里的内容
    console.log('2s到了');
},2000);

/*
var count = 0;
setInterval(function(){ //每2000ms就执行function里的内容
    count++;
    console.log(count);
},2000);
*/


var count = 0;
var timer = setInterval(function(){ //每2000ms就执行function里的内容
    count++;
    if(count > 3){
        clearInterval(timer);   //当count到3时就清除计时，timer类似于这个计时进程的id
        return;                 //并不在往下执行，否则会打印4次
    }
    console.log(count);
},2000);

setTimeout(function(){ 
    console.log('时间到了'); //第三个打印
},0);
console.log('yo'); //第一个打印
console.log('haha'); //第二个打印

13 JS Html DOM

image.png

<!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>

    <p id="p1">ha</p>
    <img id="image" src="#" alt="">
    <div id="box" style="height:100px;width:100px;background:pink;"></div>

    <script>
        //直接向 HTML 输出流写内容
        document.write(Date());
        //改变 HTML 元素的内容
        document.getElementById('p1').innerHTML = 'hello world';
        //改变 HTML 元素的属性
        document.getElementById('image').src = '../img/eee.jpg';
        //改变 HTML 元素的样式
        document.getElementById('p1').style.color = 'blue';

        //HTML 事件的例子：
        //当用户点击鼠标时
        document.getElementById('p1').onclick = function () {
            this.style.color = 'red';
        }
        //当网页已加载时
        //<body onload="checkCookies()">
        //当图像已加载时
        //当鼠标移动到元素上时
        document.getElementById('image').onmouseover = function(){
            this.src = '../img/bn.jpg'; 
        }
        document.getElementById('image').onmouseout = function(){
            this.src = '../img/eee.jpg'; 
        }
        document.getElementById('box').onmousedown = function(){
            this.style.background = 'blue'; 
        }
        document.getElementById('box').onmouseup = function(){
            this.style.background = 'pink'; 
        }
        //当输入字段被改变时
        //当提交 HTML 表单时
        //当用户触发按键时
        //点击元素出发监听事件
        document.getElementById('box').addEventListener("click",function(){
            alert("hello world");
        })

    </script>

</body>

</html>