1 基本语法
//引入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
Document
ha
