js入门

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)+"&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br />")
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容