js语法和python比较类似
比如我们新建一个文件夹 在里面新建script.js文件 然后用sublime打开文件夹
运行js需要先新建一个HTML文件,用来调用js文件
index.html
:
<!DOCTYPE html>
<html>
<head>
<title>javascript ES5\ES6</title>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<button onclick="test()">点击</button>
</body>
</html>
script.js
:
一、javascript的数据类型
-
数字:正数,浮点数 NaN(不是一个数)
var a = 20;
//NaN
console.info(isNaN(20/"esf"))
console.info(typeof a)
-
字符串:单引号、双引号
-
布尔型:true、false
-
null型:null
-
undefined 型:undefined
二、变量的作用范围
js 默认情况下,变量以函数为单位
变量加var是局部变量,不加var是全局变量
三、常量:常量是一旦赋值就不能修改的量
常量一般用大写字母表示
const关键字
const varName;
const PI = 3.1415926;
console.info(PI)
>>>3.1415926
PI=333
>>>报错,常量不能赋值
四、函数
函数的格式:
function funName(){
}
var varName = funName;
var varName = function funName(){
}
function sum(a,b){
return a+b;
}
b=sum
document.write(b(1,2));
>>>3
从上面的例子可以看出 函数名就是函数的地址
函数的输出:
- document.write() 输出到文档
- console.info() 输出到控制台
//函数也可以赋给一个变量:
var ss=function(a,b){
return a + b;
}
document.write(ss(3,4));
-
闭包:函数套函数
内部函数可以使用外部函数的变量
function outter(){
var a = "outter"
function inner(){
var a = "inner"
console.info(a)
}
console.info("--------" + a)
return inner;
}
console.info(outter()())
五、数组
一组数据的列表
var arr = [ ]
var arr = array(14,5,2)
六、面向对象
6.1 js中一切皆对象
var name = "zhangsan";
console.info(name.indexof("s")) //判断name中是否含由字符‘s’
console.info(name.substr(6)) //截取name中的前六位
console.info(name.lenth) //获取字符串 name的长度
上面的例子 我们定义的字符串name 其实也是一个对象 有好多方法可以直接调用
详见 https://blog.51cto.com/10325748/2107290
6.2 创建一个对象
function Student(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.info(this.name + "说:Hello!")
}
} //在函数里面定义函数 函数里也有this关键字
var s1 = new Student("盖伦",100);
s1.sayHello();
var s2 = new Student("盖伦2",100);
s1.sayHello();
>>>
盖伦说:Hello
盖伦2说:Hello
这种方法有个缺点 就是每当新建一个实例 s1、s2的时候 函数sayHello 作为对象也会分配相应的内存空间 浪费内存
改进: 用prpto方法把函数的方法单独出来 这样每新建对象的时候 函数function就不会被分配内存空间
function Student(name,age){
this.name = name;
this.age = age;
// this.sayHello = function(){
// console.info(this.name + "说:Hello!")
}
Student.prototype.sayHello = function(){
console.info(this.name + "说:Hello!")
};
七、js在ES6版本的新用法
1.箭头函数
var a = v => v + 2;
/*
相当于
function(v){
return v+2;
}
*/
console.info(a(5));
>>>7
2.类
class Person(){
constructor(name){
this.name = name;
}
}
3.继承
class User extend Person(){}
4.模板字符串
var name = "张三"
var age = 20;
var introduce = `my name is ${name},my age is &{age};`
console.info(introduce)
>>>my name is 张三,my age is 20;
八、三大结构:顺序、分支、循环
1.条件结构:
if(a>20){
} else if(){
}
求三个数最大值:
var a = 10;
var b = 20;
var c = 30;
var max = - Infinity; //负无穷
if (a>b){
max =a;
} else {
max = b;
}
if (max<c){
max = c;
}
console.info(max)
2.三目表达式 exrp ? exrp1 : exrp2
max1=a > b ? a : b
max1 = max1 >c ? max1 : c
console.info(max1)
//一行写完:
max1=(a > b ? a : b) > c ? (a > b ? a : b) : c;
console.info(max1)
3.++a 和a++
var a = 0;
var b = a++ +3
console.info(b)
console.info(a)
4.分支结构
c=1
switch (c){
case 1:
console.info("11111");
break;
case 2:
console.info("22222");
break;
case 3:
console.info("22222");
break;
default:
console.info("default");
}
5.循环 for in
var arr= [1,2,3,4,5,6,7]
for(i in arr){
console.info(arr[i])
}
//for循环
for (var i=0;i<arr.length;i++){
console.info(arr[i])
}
6.while循环
var i =0;
while(i<arr.length){
console.info(arr[i])
i++;
}
//do while循环
var i = 0;
do{
console.info(arr[i])
i++;
}while(i<arr.length); //do while循环会先执行一遍再判断条件是否正确
7. break跳出循环 continue 跳出本次循环
打印九九乘法表:
for (var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j + "*" + i +"=" + (i*j)+" ");
}
document.write("<br />")
}