JavaScript——语法、基本对象

JavaScript基础

目录

• 概念
• js基本语法
  • js和html的结合方式
  • js注释
  • js数据类型
  • js变量
  • js运算符
  • js流程控制语句
• js基本对象
  • String对象
  • Function对象
  • Array对象
  • Data对象
  • Math对象
  • RegExp对象
  • Global对象

---

概念

• JavaScript是一门客户端脚本语言.
• 运行在客户端浏览器中,每个浏览器都有JavaScript的解析引擎
• 脚本语言:不需要变编译,直接就可以被浏览器解析执行
• 功能

  JavaScript可以增强用户和html页面的交互过程,可以来控制html元素,让界面有一些动态效果,增强用户体验.

• JavaScript = ECMAScript + JavaScript特有的(BOM+DOM)

---

js基本语法

js和html的结合方式

• 内部js
  定义<script>,标签内容就是js代码
• 外部js
  定义<script>,通过src属性引入外部的js文件

注意:

1. <script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序.
2. <script>可以定义多个.

---

js注释

• 单行注释: //
• 多行注释: /* */

---

js数据类型

• 原始数据类型(基本数据类型)
  • number:数字. 整数/小数/NaN(not a number 一个不是数字的数字类型)
  • string: 字符串。 字符串 “abc” “a” ‘abc’, 'abc'和"abc"都是字符串
  • boolean: true和false
  • null: 一个对象为空的占位符
  • undefined: 未定义。如果一个变量没有给初始化值则会被默认赋值为undefined
• 引用数据类型: 对象

---

js变量

• 变量
  存储数据的内存空间.
• Java语言是强类型语言，而JavaScript是弱类型语言。
  • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
• 语法

  var 变量名 = 初始化值;
  

• typeof() 运算符
  获取变量的类型.

---

js运算符

• 一元运算符: 只有一个运算数的运算符

1. ++, - -的区别(和Java相同不说了)
2. +, - 正负号

注意:在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换.

• string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
• boolean转number：true转为1，false转为0

• 算术运算符
  
• 赋值运算符
  
• 比较运算符
  

1. 类型相同: 直接比较
   *字符串: 按照字典顺序别叫,按位逐一比较，直到得出大小为止。
2. 类型不同: 先进行类型转换,再比较
   *===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

• 逻辑运算符
  
  1. number：0或NaN为假，其他为真
  2. string：除了空字符串("")，其他都是true
  3. null&undefined:都是false
  4. 对象：所有对象都为true
• 三元运算符
  表达式 ? 值1 : 值2;

js流程控制语句

• if … else
• switch

    <script>
        var a;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;
        }
    </script>

注意:
* 在Java中switch可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
* 在JS中,switch语句可以接受任意的原始数据类型

• while

    <script>
        //1 ~ 100 求和  5050
        var sum = 0;
        var num = 1;
        while (num <= 100) {
            sum += num;
            num++;
        }
        alert(sum);
    </script>

• do … while
• for

    <script>
        //1 ~ 100 求和  5050
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        alert(sum);
    </script>

---

js对象

String对象

• 创建

1. var str = new String(“abc”)
2. var str = “abc”

• 方法

3. bold(): 加粗字符串
4. fontcolor("red"): 给字符串添加颜色
5. fontsize(7): 给字符串设置大小 1-7从小到大
6. link("https://www.baidu.com"): 给一个字符串添加一个链接
7. concat(str): 连接字符串
8. charAt(): 返回指定位置的字符串
9. indexof(): 检索字符串,返回位置,不存在返回-1

注意: 这里列举了一些常用方法,其他方法可以查文档 :https://www.w3school.com.cn/jsref/jsref_obj_string.asp

• 属性
  length: 返回字符串的长度.

---

Function函数(方法)对象

• 创建
  方式一

  function 方法名称(形式参数列表){
             方法体...
   }
  

  方式二

  var 方法名 = function(形式参数列表){
             方法体...
   }
  

• 属性
  length: 返回该方法对象的参数个数.
• 特点

1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数,也就是说我们传递的参数都会被封装到arguments中

• 调用
  方法名称(实际参数列表).

• Demo

         /**
           * 求任意个数的和
           */
          function add (){
             var sum = 0;
              for (var i = 0; i < arguments.length; i++) {
                  sum += arguments[i];
              }
              return sum;
          }
  
          var sum = add(1,2,3,4);
          alert(sum);
  

• js的函数重载问题

• 什么是重载? 方法名相同, 参数不同

• js重载是否存在?

1. js中不存在重载
2. 可以通过arguments数组来模拟重载.

注意: 说白了,这就和Java中的语法糖 可变参数有异曲同工之妙.

---

Array对象

• 创建
  方式一

  var arr = new Array(元素列表);
  

  方式二

  var arr = new Array(默认长度);
  

  方式三

  var arr = [元素列表];
  

• 方法

1. concat() 连接两个或更多的数组，并返回结果。
2. join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
3. pop() 删除并返回数组的最后一个元素
4. push()向数组的末尾添加一个或更多元素，并返回新的长度。
5. reverse() 颠倒数组中元素的顺序。

• 属性
  length: 返回数组的长度
• 特点

1. 在js中, 数组元素的类型可以是不同的
2. 在js中, 数组长度是可变的

• 相关文档: https://www.w3school.com.cn/jsref/jsref_obj_array.asp

---

Data对象

• 创建

  var date = new Date()
  

• 常见方法

1. toLocaleString()：返回当前date对象对应的时间本地字符串格式
2. getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

• 相关文档 https://www.w3school.com.cn/jsref/jsref_obj_date.asp

---

Math对象

• 创建
  特点：Math对象不用创建，直接使用。 Math.方法名();
• 方法

1. random():返回 0 ~ 1 之间的随机数。 含0不含1
2. ceil(x)：对数进行上舍入。
3. floor(x)：对数进行下舍入。
4. round(x)：把数四舍五入为最接近的整数。

• 属性
  PI : 返回圆周率
  E : 返回常量e
• Demo

     /**
       * 取 1~100之间的随机整数
       *      1. Math.random()产生随机数：范围 [0,1)小数
       *      2. 乘以 100 --> [0,100) 小数
       *      3. 舍弃小数部分 ：floor --> [0,100) 整数
       *      4. +1 -->[0,99] 整数 [1,100]
       */
  
     var number =  Math.floor((Math.random() * 100)) + 1;
     document.write(number);
  

• 相关文档: https://www.w3school.com.cn/jsref/jsref_obj_math.asp

---

RegExp对象

RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

• 定义字符串的组成规则

1. 单个字符:[], [ab]表示a或b中的一个, [a-zA-Z0-9] 表示a-z或A-Z或0-9中的一个字符
   如： [a] [ab] [a-zA-Z0-9_]
   * 特殊符号代表特殊含义的单个字符:
   \d:单个数字字符 [0-9]
   \w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
   ?：表示出现0次或1次
   *：表示出现0次或多次
   +：出现1次或多次
   {m,n}:表示 m<= 数量 <= n
   * m如果缺省： {,n}:最多n次
   * n如果缺省：{m,} 最少m次
3. 开始结束符号
   * ^:开始
   * $:结束

• 创建
  方式一

  var reg = new RegExp("正则表达式");
  

  方式二

  var reg = /正则表达式/;
  

• 方法
  test(参数): 验证指定的字符串是否符合正则定义的规范
• 相关文档 https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

---

Global对象

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();

• 方法

1. encodeURI():url编码
2. decodeURI():url解码
3. encodeURIComponent():url编码,编码的字符更多
4. decodeURIComponent():url解码
5. parseInt():将字符串转为数字
   逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
6. eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。

• URL编码
  桂朝阳–%E6%A1%82%E6%9C%9D%E9%98%B3
  注意: 这里使用URL编码,在UTF-8编码下,一个中文字符是占3个字节,在GBK下是占2个字节,这里一个%表示一个字节,一个字节有8bit, 每4个bit转为十六进制,所以就显示出上面的编码.
• 相关文档 https://www.w3school.com.cn/jsref/jsref_obj_global.asp

---