第二章 JavaScript 基本语法

2.1 JS编写位置

  • 我们目前学习的JS全都是客户端的JS,也就是说全都是需要在浏览器中运行的,所以我们我们的JS代码全都需要在网页中编写

  • 按钮与超链接标签中的JS代码

    <body>
    	
    	<!--
    		可以将js代码编写到标签的onclick属性中
    		当我们点击按钮时,js代码才会执行
    		
    		虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
    	-->
    	<button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>
    	
    	<!--
    		可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
    	-->
    	<a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
    	<a href="javascript:;">你也点我一下</a>
    	
    </body>
    
  • 我们的JS代码需要编写到<script>标签中

    • 可以将js代码编写到外部js文件中,然后通过script标签引入写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用的方式

      <!--通过script标签引入一个外部的js文件-->
      <script type="text/javascript> src="./waibu.js"></script>
      

      注:script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略如果需要则可以在创建一个新的script标签用于编写内部代码

    • 直接在script标签中编写

      <!-- 直接在script标签中编写内部的代码 -->
      	<script type = "text/javascript">
      		
      		alert("控制浏览器弹出一个警告框");
      		document.write("在body(网页页面显示)");
      		console.log("在网页的控制台显示");
      		
      	</script>
      
  • 我们一般将script标签写到head中(和style标签有点像)

  • 属性︰

    • type :默认值text/javascript可以不写,不写也是这个值。
    • src :当需要引入一个外部的js文件时,使用该属性指向文件的地址。

2.2 注释

  • 注释中的内容不会被解析器解析执行,但是会在源码中显示,我们一般会使用注释对程序中的内容进行解释。

  • JS中的注释和Java的的一致,分为两种∶

    • 单行注释://注释内容

    • 多行注释:/*注释内容*/

      <script type="text/javascript">
      			
      			/*
      			 	多行注释
      			 	JS注释
      			 */
      			
      			//单行注释
      			console.log("hello"); //该语句用来在控制台输出一个日志
      			alert("hello");		
      </script>
      

2.3 语句规范

  • JS中严格区分大小写
  • JS中每一条语句以分号(;)结尾。如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,
    而且有些时候,浏览器会加错分号,所以在开发中分号必须写
  • JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化

2.4 字面量和变量

  • 字面量:都是一些不可以改变的值,比如:1,2,3。

    • 字面量都是可以直接使用,但是我们一般都不会直接使用字面量。
  • 变量:变量可以用来保存字面量,而且变量的值是可以任意改变的,变量更加方便我们的使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量。

    • 变量的声明:使用var关键字声明一个变量。

      var a;
      
    • 变量的赋值:使用 = 为变量赋值。

      var a; //先声明一个变量a
      a = 123;//对变量a进行赋值
      
    • 声明和赋值同时进行

      var a = 123;
      
    • 可以通过变量对字面量进行描述(给某一个值或对象标注名称)

      //声明一个age的变量来保存年龄(见名知意)
      var age = 80;
      

2.5 标识符

  • 所谓标识符,就是指变量、函数、属性的名字,或函数的参数。

  • 命名一个标识符时需要遵守如下的规则:

    • 标识符中可以含有字母数字_$

    • 标识符不能以数字开头

    • 标识符不能是ES中的关键字或保留字

      • 关键字

        在这里插入图片描述

      • 保留字

        在这里插入图片描述

    • 标识符一般都采用驼峰命名法(首字母小写,每个单词的开头字母大写,其余字母小写)

      eg:xxxYyyZzz

2.6 数据类型

  • 数据类型决定了一个数据的特征,比如∶123和"123”,直观上看这两个数据都是123,但实际上前者是一个数字,而后者是一个字符串。
  • 对于不同的数据类型我们在进行操作时会有很大的不同。
  • JavaScript中一共有5种基本数据类型:
    • 字符串型( String )
    • 数值型(Number )
    • 布尔型( Boolean )
    • null型(Null )
    • undefined型 ( Undefined )
  • 这5种之外的类型都称为Object,所以总的来看JavaScript中共有六种数据类型。

2.6.1 typeof 运算符

  • 使用typeof操作符可以用来检查一个变量的数据类型。
  • 使用方式: typeof 数据,例如typeof 123
  • 返回结果︰
    • typeof 数值 numbe
    • typeof 字符串 string
    • typeof 布尔型 boolean
    • typeof undefined undefined
    • typeof null object

2.6.2 String

  • String用于表示一个字符序列,即字符串。

  • 字符串需要使用括起来。

  • 转义字符:

    转义字符含义转义字符含义
    \n换行\\斜杠
    \t制表\’单引号
    \b空格\"双引号
    \r回车
  • 将其他数值转换为字符串有三种方式: toString()String()拼串

2.6.3 Number

  • Number类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。
  • Number表示的数字大小是有限的,范围是∶±1.7976931348623157e+308,如果超过了这个范围,则会返回±Infinity。
  • NaN,即非数值(Not a Number )是一个特殊的数值,JS中当对数值进行计算时没有结果返回,则返回NaN。

2.6.4 数值的转换

  • 有三个函数可以把非数值转换为数值:Number()parseInt()parseFloat()
  • Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。
  • parseInt()只会将字符串转换为整数,而parseFloat()可以转换为浮点数。

2.6.5 Boolean(布尔型)

  • 布尔型也被称为逻辑值类型或者真假值类型。

  • 布尔型只能够取真( true)假( false )两种数值。除此以外,其他的值都不被支持。

  • 其他的数据类型也可以通过Boolean()函数转换为布尔类型。

  • 转换规则:

    数据类型转换为true转换为false
    Booleantruetrue
    String任何非空字符串“”(空字符串)
    Number任何非0数字0和NaN
    Object任何对象null
    Undefinedn/aundefined

2.6.6 Undefined

  • Undefined类型只有一个值,即特殊的undefined 。
  • 在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined。例如∶
    • var message;
    • message 的值就是 undefined。
  • 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。

2.6.7 Null

  • Null类型是第二个只有一个值的数据类型,这个特殊的值是null 。
  • 从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object。
  • undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true ;

2.7 运算符

  • JS中为我们定义了一套对数据进行运算的运算符。
  • 这其中包括∶算数运算符、位运算符、关系运算符等。

2.7.1 算数运算符

  • 算数运算符顾名思义就是进行算数操作的运算符。

  • JS中为我们提供了多种算数运算符。

  • 算数运算符∶

    运算符说明运算符说明
    +加法++(前置)自增
    -减法++(后置)自增
    *乘法–(前置)自减
    /除法–(后置)自减
    %取模+符号不变
    -符号反转
  • 自增++ ,自减 --

    • 自增和自减分为前置运算和后置元素。

    • 所谓的前置元素就是将元素符放到变量的前边,而后置将元素符放到变量的后边。

      //自增
      ++a;//前置自增
      a++;//后置自增
      
      //自减
      --a;//前置自减
      a--//后置自减
      
    • 运算符在前置时,表达式值等于变量原值。

    • 运算符在后置时,表达式值等于变量变更以后的值。

2.7.2 逻辑操作符

  • —般情况下使用逻辑运算符会返回一个布尔值。

  • 逻辑运算符主要有三个:非、与、或。

  • 在进行逻辑操作时如果操作数不是布尔类型则会将其转换布尔类型在进行计算。

  • 非使用符号!表示,与使用&&表示,或使用||表示。

    运算符说明短路规则
    !逻辑非(NOT)
    &&逻辑与(AND)若左值为假,则不运算右值
    ||逻辑或(OR)若左值为真,则不运算右值
    • 与运算符使用&&表示。
    • 与运算符可以应用于任何数据类型,且不一定返回布尔值。
    • 对于非布尔值运算,会先将非布尔值转换为布尔值。
    • 对布尔值做运算时,如果两个值都为true则返回true ,否则返回false。
    • 非布尔值时∶如果两个都为true,则返回第二个值,如果两个值中有false则返回靠前的false的值。
    • 或运算符使用||表示。
    • 或运算符可以应用于任何数据类型,且不一定返回布尔值。对于非布尔值运算,会先将非布尔值转换为布尔值。
    • 对布尔值进行运算时,如果两个值都为false则返回false ,否则返回true。
    • 非布尔值时∶如果两个都为false ,则返回第二个值,否则返回靠前true的值。

2.7.3 赋值运算符

  • 简单的赋值操作符由等于号( =)表示,其作用就是把右侧的值赋给左侧的变量。

  • 如果在等于号左边添加加减乘除等运算符,就可以完成复合赋值操作。

  • +=*=-=/=%=

    a += 10 ; //等价于 a = a + 10;
    a -= 10 ; //等价于 a = a - 10;
    a *= 10 ; //等价于 a = a * 10;
    a /= 10 ; //等价于 a = a / 10;
    a %= 10 ; //等价于 a = a % 10;
    

2.7.4 关系运算符

  • 小于(<)、大于(> )、小于等于(<=)和大于等于(>= )这几个关系运算符用于对两个值进行比较,比较的规则与我们在数学课上所学的一样。

  • 这几个运算符都返回一个布尔值。用来表示两个值之间的关系是否成立。

  • 相等

    • JS中使用==来判断两个值是否相等,如果相等则返回true。

    • 使用!=来表示两个值是否不相等,如果不等则返回true。

    • 注意:null和undefined使用==判断时是相等的。

      表达式表达式
      null == undefinedtruetrue == 1true
      “NaN” == NaNfalsetrue == 2false
      5 == NaNfalseundefined == 0false
      NaN == NaNfalsenull == 0false
      NaN != NaNtrue“5” == 5true
      false == 0true
  • 全等

    • 除了==以外,JS中还提供了===
    • ===表示全等,他和==基本一致,不过==在判断两个值时会进行自动的类型转换,而===不会。
    • 也就是说"55"==55会返回true,而"55"===55会返回false ;
    • 同样我们还有!==表示不全等,同样比较时不会自动转型。
    • 也就是说"55"!=55会返回false,而"55"!==55会返回true ;
  • 逗号

    • 使用逗号可以在一条语句中执行多次操作。

    • 使用逗号运算符分隔的语句会从左到右顺序依次执行。

      var num1=1, num2=2, num3=3;
      

2.7.5 条件运算符

  • 条件运算符也称为三元运算符。通常运算符写为?:

  • 这个运算符需要三个操作数,第一个操作数在?之前,第二个操作数在?:之间,第三个操作数在:之后。

    x > 0 ? x : -x //求x的绝对值
    /*
    	该语句首先会执行 x > 0,如果返回true则执行冒号左边的代码并返回结果(这里返回的就是x本身)。如果返回false则执行冒号右边的代码,并将结果返回(这里返回的是-x)。
    	
    */
    

2.8 语句

  • 前边我所说表达式和运算符等内容可以理解成是我们一门语言中的单词,短语。
  • 而语句( statement)就是我们这个语言中一句一句完整的话了。
  • 语句是一个程序的基本单位,JS的程序就是由一条一条语句构成的,每一条语句使用;结尾。
  • JS中的语句默认是由上至下顺序执行的,但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

2.8.1 代码块

  • 代码块是在大括号{}中所写的语句,以此将多条语句的集合视为一条语句来使用。

    {
    	var a = 123;
    	a++;
    	alert(a);
    }
    
  • 我们—般使用代码块将需要—起执行的语句进行分组,需要注意的是,代码块结尾不需要加分号。

2.8.2 条件语句

  • 条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句。

  • 最基本的条件语句∶

    • if … else
    • switch…case
  • if 语句

    • 语法一:

      if(条件表达式){
          语句....
      }
      
      • if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句,如果条件表达式的值为false,则不会执行if后的语句。
      • if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中
      • if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句
    • 语法二:

      if(条件表达式){
          语句....
      }else{
          语句....
      }
      
      • if....else....语句:当该语句执行时,会先对if后的条件表达式进行求值判断,如果该值为true,则执行if后的语句,如果该值为false,则执行else后的语句
    • 语法三

      if(条件表达式){
          语句....
      }else if(条件表达式){
          语句....
      }else if(条件表达式){
          语句....
      }else{
          语句....
      }
      
      • if...else if...else...语句:当该语句执行时,会从上到下依次对条件表达式进行求值判断,如果值为true,则执行当前语句,如果值为false,则继续向下判断,如果所有的条件都不满足,则执行最后一个else后的语句,该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句
  • 条件分支语句:也叫switch语句

    • 语法:

      switch(条件表达式){
          case 表达式:
              语句....
              break;
          case 表达式:
              语句....
              break;
          default:
              语句....
              break;
      }
      
      • 执行流程:在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,如果比较结果为true,则从当前case处开始执行代码。当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,这样可以确保只会执行当前case后的语句,而不会执行其他的case,如果比较结果为false,则继续向下比较,如果所有的比较结果都为false,则只执行default后的语句
      • switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择。

2.8.3 循环语句

  • 和条件语句一样,循环语句也是基本的控制语句。

  • 循环中的语句只要满足一定的条件将会一直执行。

  • while 循环

    • 语法:

      while(条件表达式){
          语句....
      }
      
      • while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断,如果为true,则继续执行循环体,以此类推,如果值为false,则终止循环
  • do...while 循环

    • 语法:

      do{
          语句....
      }while(条件表达式)
      
      • do…while语句在执行时,会先执行循环体,循环体执行完毕以后,在对while后的条件表达式进行判断,如果结果为true,则继续执行循环体,执行完毕继续判断以此类推,如果结果为false,则终止循环
      • 实际上这两个语句功能类似,不同的是while是先判断后执行,而do…while会先执行后判断,do…while可以保证循环体至少执行一次,而while不能
  • for 循环

    • 语法:

      for(①初始化表达式;②条件表达式;④更新表达式){
      		③语句....
      }
      
      • for循环的执行流程;①执行初始化表达式,初始化变量(初始化表达式只会执行一次),②执行条件表达式,判断是否执行循环。,如果为true,则执行循环③,如果为false,终止循环,④执行更新表达式,更新表达式执行完毕继续重复②

2.8.4 break和continue

  • break和continue语句用于在循环中精确地控制代码的执行。使用break语句会使程序立刻退出最近的循环,强制执行循环后边的语句。
  • break和continue语句只在循环和switch语句中使用。
  • 使用continue语句会使程序跳过当次循环,继续执行下一次循环,并不会结束整个循环。
  • continue只能在循环中使用,不能出现在其他的结构中。

2.8.5 label

  • 使用 label 语句可以在代码中添加标签,以便将来使用。

  • 语法:

    label: 句子....
    
    //例子
    start: for (var i=0; i < count; i++) {
    	alert(i);
    }
    /*
    	这个例子中定义的 start 标签可以在将来由 break 或 continue 语句引用。加标签的语句一般都要与 for 语句等循环语句配合使用。
    */
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值