zoukankan      html  css  js  c++  java
  • JavaScript基本语法

    JavaScript基本介绍

    介绍

    JavaScript是一种运行在客户端 的脚本语言 。JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

    组成

    JS由ECMAScript、BOM和DOM组成。其中,ECMAScript是JS的核心,描述了语言的基本语法和数据类型,它也是一套规范,定义了一种语言的标准与具体实现。BOM叫做浏览器对象模型,它是一套操作浏览器功能的API,并且通过BOM可以操作浏览器窗口。最后,DOM叫做文档对象模型,是一套操作页面元素的API,利用DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。

    书写位置

    写在行内

    <input type="button" value="按钮" onclick="alert('Hello World')" />
    

    写在script标签里面

    <head>
      <script>
        alert('Hello World!');
      </script>
    </head>
    

    写在外部js文档里面,然后引用

    <script src="main.js"></script>
    

    变量

    变量的定义

    var x; //申明变量
    var x,y; //申明多个变量
    var x = 1;//申明标量并赋值
    var x = 1, y = 2;//申明多个变量并赋值
    

    变量命令规则和规范

    规则

    必须遵守的,不遵守会报错:

    • 由字母、数字、下划线、$符号组成,不能以数字开头
    • 不能是关键字和保留字,例如:for、while。
    • 区分大小写

    规范

    建议遵守的,不遵守不会报错:

    • 变量名必须有意义
    • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword

    数据类型

    简单数据类型

    Number类型

    var x = 66; //定义一个普通的数字
    var a = 0134;//在前面加一个0,代表一个八进制的数字
    var b = 0x12a;//在前面加一个0x,代表一个十六进制的数字
    var c = 5e+3;//科学计数法
    

    另外还有NaN:not a numbersNaN: is not a number来进行数值判断。

    String类型

    放在双引号或者单引号里面的字符,如:

    name = 'y'; //不管是什么简单类型,被赋予的值都叫做字面量
    age = '18';
    

    该类型和其他语言一样有转义符,在此就不赘述了。另外,我们可以使用length这个方法来获取字符串的长度:

    var info = "YuanMing is so handsome!";
    console.log(info.length);
    //24
    

    Boolean类型

    和其他语言一样,该类型只有两个值,truefalse

    UndefinedNull

    undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined,而null表示一个空,变量的值如果想为null,必须手动设置。

    复杂数据类型

    Object类型

    获取变量的类型

    var age = 18;
    console.log(typeof age);  // 'number'
    

    注释

    单行注释

    //注释内容
    

    多行注释

    /*
    * 注释内容
    * 
    * 
    * 
    * */
    

    数据类型转换

    转换成字符串类型

    var a = 1;
    console.log(a.toString());
    console.log(String(a));
    //两个方法都可以
    

    转换成数值类型

    var a = '1';
    console.log(Number(a));
    var b = '123abc';
    console.log(parseInt(b));//返回123,如果第一个字符是数字会解析知道遇到非数字结束,否则返回NaN
    var c = '12.66abc';
    console.log(parseFloat(c));//返回12.66,如果第一个字符是数字会解析知道遇到非数字结束,否则返回NaN
    

    转换成布尔类型

    我们使用Boolean()方法,其中0 空字符串 null undefined NaN等都会转换成false 其它都会转换成true。

    操作符

    算术运算符

    + - * / %  
    

    一元运算符

    • 前置++:先加1,后参与运算
    • 后置++:先参与运算,后加1
    • 前置-- :先减1,后参与运算
    • 后置-- :先参与运算,后减1
    var num = 1;
    var res = num++ + 1;
    console.log(num)
    console.log(res);
    //2,2
    

    逻辑运算符

    • &&
    • ||
    • !

    关系运算符

    <  >  >=  <= == != === !==
    
    ==与===的区别:==只进行值得比较,===类型和值同时相等,则相等
    var result = '55' == 55;  	// true
    var result = '55' === 55; 	// false 值相等,类型不相等
    var result = 55 === 55; 	// true
    

    赋值运算符

    =   +=   -=   *=   /=   %=
    

    运算符优先级

    优先级从高到底
    	1. ()  优先级最高
    	2. 一元运算符  ++   --   !
    	3. 算数运算符  先*  /  %   后 +   -
    	4. 关系运算符  >   >=   <   <=
    	5. 相等运算符   ==   !=    ===    !==
    	6. 逻辑运算符 先&&   后||
    	7. 赋值运算符
    

    流程控制

    顺序结构

    从上到下执行的代码就是顺序结构,这是程序运行的默认顺序。

    分支结构

    if语句·

    if (/* 条件表达式 */) {
      // 执行语句
    }
    
    if (/* 条件表达式 */){
      // 成立执行语句
    } else {
      // 否则执行语句
    }
    
    if (/* 条件1 */){
      // 成立执行语句
    } else if (/* 条件2 */){
      // 成立执行语句
    } else if (/* 条件3 */){
      // 成立执行语句
    } else {
      // 最后默认执行语句
    }
    

    三元运算

    表达式1 ? 表达式2 : 表达式3
    

    switch语句

    switch (expression) { //在比较值时使用的是全等操作符, 因此不会发生类型转换
      case 常量1:
        语句;
        break;
      case 常量2:
        语句;
        break;
      case 常量3:
        语句;
        break;
      …
      case 常量n:
        语句;
        break;
      default:
        语句;
        break;
    }
    

    循环结构

    while语句

    // 当循环条件为true时,执行循环体,
    // 当循环条件为false时,结束循环。
    while (循环条件) {
      //循环体
    }
    

    do...while语句

    do {  //不管怎样都会先执行一次代码块
      // 循环体;
    } while (循环条件);
    

    for语句

    // for循环的表达式之间用的是;号分隔的
    for (初始化表达式1; 判断表达式2; 自增表达式3) {
      // 循环体4
    }
    

    continuebreak

    break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
    continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

    数组

    定义

    数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。且JS里面的元素可以是不同数据类型的。

    创建数组

    通过构造函数创建数组

    var array=new Array();//定义了一个数组
    ar 数组名=new Array(长度);//定义了数组,并且规定了数组的元素个数
    

    如果数组中没有数据,但是有长度,那么数组中的每个值都是undefined类型;如果在Array(多个值),那么这个数组中就有数据了,数组的长度就是这些数据的个数。

    通过字面量的方式创建数组

    var array=[];//空数组
    var array=[长度];//空数组,规定了数组的长度
    var arr2 = [1, 3, 4]; //创建一个包含3个数值的数组,多个数组项以逗号隔开
    

    大致上来说,通过这种方式创建的数组与通过构造函数创建的数组一样。

    获取数组元素

    // 格式:数组名[索引],索引从0开始
    // 功能:获取数组对应下标的那个值,如果下标不存在,则返回undefined
    var arr = ['red',, 'green', 'blue'];
    arr[0];	// red
    arr[2]; // blue
    arr[3]; // 这个数组的最大下标为2,因此返回undefined
    

    遍历数组

    //我们可以使用数组.length的方式获取数组的长度
    var arr=[10,20,30,40,50,60,70,80,90,100];
    //小于的是数组的长度--个数
    for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
    }
    

    新增数据元素

    // 格式:数组名[索引] = 值;
    // 如果下标有对应的值,会把原来的值覆盖,如果下标不存在,会给数组新增一个元素
    

    函数

    函数的申明

    函数申明

    function 函数名(){
      // 函数体
    }
    

    函数表达式·

    var fn = function() {
      // 函数体
    };
    //函数表达式后面,赋值结束后,要加分号
    

    函数的调用

    函数名();//函数名后面加()就可以执行了
    

    函数的参数

    已知参数个数

    // 函数内部是一个封闭的环境,可以通过参数的方式,把外部的值传递给函数内部
    // 带参数的函数声明
    function 函数名(形参1, 形参2, 形参...){
      // 函数体
    }
    
    // 带参数的函数调用
    函数名(实参1, 实参2, 实参3);
    

    未知参数个数

    //我们不给形参就可以了
    function f1() {
    console.log(arguments.length); //通过arguments对象可以获取传入的每个参数的值
    }
    
    f1(1,2,3,4,5)//5
    

    函数的返回值

    //声明一个带返回值的函数
    function 函数名(形参1, 形参2, 形参...){
      //函数体
      return 返回值; 
      //函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出
    }
    
    //可以通过变量来接收这个返回值
    var 变量 = 函数名(实参1, 实参2, 实参3);
    //如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
    

    匿名函数与自调用

    匿名函数就是没有名字的函数,我们可以通过自调用方式来执行,不过该函数只能被执行一次。

    (function () {
      alert("Hello,World!");
    })();
    

    作用域

    大致和python里面的作用域一样,不过JS有一个隐式全局变量。声明的变量没有var,就叫隐式全局变量,可以在全局使用。

    预解析

    JS代码被执行前会先进行预解析过程,其过程如下:

    1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。
    2. 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
    3. 先提升变量,再提升函数
    4. 注意:函数表达式预解析执行会报错

    对象

    对象的创建

    调用系统的构造函数创建对象

    var obj = new Object(); //创建一个对象
    obj.name = "YuanMing";  //添加特征
    obj.age = 18;
    obj.coding = function () {  //添加方法
    console.log(obj.name+" is coding!"); //obj可以用this替代
    };
    
    obj.coding();//YuanMing is coding!
    

    工厂模式创建对象:

    function creatPerson(name,age) { //创建一个可以多次创建对象的函数
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.eatFood = function () {
    console.log(this.name+" is eating food!");
    };
    return obj; //一定要返回这个对象
    }
    var person1 = creatPerson("yuanming",18);
    var person2 = creatPerson("xiaohua",17);
    person1.eatFood();
    person2.eatFood();
    

    自定义构造函数创建对象

    function Person(name,age) { //首字母大写就是区别对象和函数的特征
    this.name = name;  //必须使用this,而不是obj
    this,age = age;
    this.eatFood = function () {
    console.log(this.name+" is eating food!");
    };
    }
    var person1 =new Person("yuanming",18);  //创建对象的时候,必须用new
    var person2 =new Person("xiaohua",17);
    person1.eatFood();
    person2.eatFood();
    

    字面量的方式创建对象

    var obj1 = {}; //创建一个对象
    obj1.name = "YuanMing";
    obj1.age = 18;  //添加特征和方法
    obj1.coding = function () {
    console.log(this.name+" is coding!");
    };
    obj1.coding(); //YuanMing is coding!
    
    var obj2 = {
    name: "xiaohua",  //把所有方法和特征像字典一样放入
    age: 20,
    coding: function () {
    console.log(this.name + " is coding!")
    }
    }
    obj2.coding(); //xiaohua is coding!
    

    设置和获取属性值的另一种方法

    var obj2 = {
    name: "xiaohua",  //把所有方法和特征像字典一样放入
    age: 20,
    coding: function () {
    console.log(this.name + " is coding!")
    }
    }
    //就像操作字典一样
    var obj2 = {
    name: "xiaohua",
    age: 20,
    coding: function () {
    console.log(this.name + " is coding!")
    }
    }
    console.log(obj2["name"]);
    //xiaohua
    obj2["coding"]();
    //xiaohua is coding!
    

    JSON格式

    var json = {
    "name":"YuanMing",
    "age":18,
    "hometown":"MeiShan"
    }
    for(var key in json){
    console.log(key+"--->"+json[key]); //在真正意思上的JSON数据里面不能使用对象.key的方式
    }
    \name--->YuanMing
    \age--->18
    \hometown--->MeiShan
    

    内置对象

    MDN官网

    基本包装类型

    为了方便操作基本数据类型,JavaScript还提供了三个特殊的基本类型:String/Number/Boolean,我们可以在这三种基本类型后面直接操作。

    Math对象

    Math.PI						// 圆周率
    Math.random()				// 生成随机数
    Math.floor()/Math.ceil()	 // 向下取整/向上取整
    Math.round()				// 取整,四舍五入
    Math.abs()					// 绝对值
    Math.max()/Math.min()		 // 求最大和最小值
    Math.sin()/Math.cos()		 // 正弦/余弦
    Math.power()/Math.sqrt()	 // 求指数次幂/求平方根
    

    随机取数的演示:

    console.log(parseInt(Math.random()*5)) //*5表示[0,5)之间
    

    Data对象

    var date = new Date(); 
    date.valueOf;//获取当前时间,距1970年1月1日(世界标准时间)起的毫秒数
    
    // HTML5中提供的方法,有兼容性问题
    var now = Date.now();	
    
    // 不支持HTML5的浏览器,可以用下面这种方式
    var now = + new Date();			// 调用 Date对象的valueOf() 
    
    toString()		// 转换成字符串
    // 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用
    toDateString()
    toTimeString()
    toLocaleDateString()
    toLocaleTimeString()
    
    getTime()  	  // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
    getMilliseconds() 
    getSeconds()  // 返回当前的秒数
    getMinutes()  // 返回当前的分钟数
    getHours()    // 返回当前的小时数
    getDay()      // 返回星期几
    getDate()     // 返回当前月的第几天
    getMonth()    // 返回月份,从0开始
    getFullYear() //返回4位的年份  如 2016
    

    Array对象

    //检测一个对象是否是数组:
    instanceof
    Array.isArray() //HTML5中提供的方法,有兼容性问题
    
    toString()		//把数组转换成字符串,逗号分隔每一项
    alueOf()        //返回数组对象本身
    pop() 		    //取出数组中的最后一项,这个值将被移除
    shift()		    //取出数组中的第一个元素,这个值将被移除
    unshift() 	    //在数组最前面插入项,返回数组的长度
    reverse()		//翻转数组
    sort(); 		//即使是数组sort也是根据字符,从小到大排序
    concat()  		//把参数拼接到当前数组
    slice() 		//从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
    splice()		//删除或替换当前数组的某些项目,参数start, deleteCount, options(要替换的项目)
    indexOf() or lastIndexOf()   //获取该元素的索引,如果没找到返回-1
    join()			//方法将数组的所有元素连接到一个字符串中
    every()			//判断是否全部都满足条件
    from()          //复制一个一样的数组
    find()          //返回第一个符合条件的值
    forEach()  		//返回每一个元素
    map()			//把数组中的值,进行相同的操作
    filter()		//筛选值
    some()			//判断是否至少一个满足条件 
    

    String对象

    charAt()    	//获取指定位置处字符
    charCodeAt()  	//获取指定位置处字符的ASCII码
    str[0]   		//HTML5,IE8+支持 和charAt()等效
    concat()   		//拼接字符串,等效于+,+更常用
    slice()    		//从start位置开始,截取到end位置,end取不到
    substring() 	//从start位置开始,截取到end位置,end取不到
    substr()   		//从start位置开始,截取length个字符
    indexOf()   	//返回指定内容在元字符串中的位置
    lastIndexOf() 	//从后往前找,只找第一个匹配的
    trim()  		//只能去除字符串前后的空白
    to(Locale)UpperCase() 	//转换大写
    to(Locale)LowerCase() 	//转换小写
    String.fromCharCode(101, 102, 103);	 //把ASCII码转换成字符串
    search()         //查询字符内容,用正则表达式
    replace()		//把字符串中的什么替代成什么
    split()			//以什么为标准,分割字符串
    
  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/MingleYuan/p/10809403.html
Copyright © 2011-2022 走看看