JavaScript基础

认识JavaSceipt

• JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
• JavaScript特点
  • 向HTML页面中添加交互行为
  • 脚本语言，语法和Java类似
  • 解释性语言，边执行边解释

JavaScript的组成：

JavaSceipt基本结构：

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >
1
2
3
4
5

JavaSceipt执行流程：

JavaScript的引用方式：

• 使用可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

  js的语法：

  

  变量的使用

  变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候 我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

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

  var a;
  1

  变量的赋值： 使用=为变量赋值。

  a = 123;
  1

  声明和赋值同时进行：

  var a = 123;
  1

  变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用！！！

  数据类型：

  JavaScript中一共有5种基本数据类型：

  • 字符串型（String）
  • 数值型（Number）
  • 布尔型（Boolean）
  • undefined型（Undefined）
  • null型（Null）

  这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。
  示例：
  

  String：

  String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

  方法名称	说明
  charAt(index)	返回在指定位置的字符
  indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
  substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
  split(str)	将字符串分割为字符串数组
  length	返回字符串的长度 var str=“this is JavaScript”; 示例：var strLength=str.length; //长度是18

  Number：

  Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

  Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

  • 最大值：+1.7976931348623157e+308
  • 最小值：-1.7976931348623157e+308
  • 0以上的最小值：5e-324

  特殊的数字：

  • Infinity：正无穷
  • -Infinity：负无穷
  • NaN：非法数字（Not A Number）

  其它的进制：

  • 二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
  • 八进制：0 开头表示八进制
  • 十六进制：0x 开头表示十六进制

  使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

  数组：

  创建数组：

  同类型有序数组创建：

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  1

  不同类型有序数组创建：

  var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];
  1

  

  数组的常用方法：

  借鉴：
  添加链接描述

  方法名称	说明
  join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
  sort()	对数组排序
  push()	向数组末尾添加一个或更多 元素，并返回新的长度
  pop()	该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
  length	设置或返回数组中元素的数目
  unshift()	该方法向数组开头添加一个或多个元素，并返回新的数组长度
  shift()	该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
  concat()	该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
  reverse()	该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
  splice()	该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
  slice()	该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

  push()方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
  console.log(arr);
  console.log(result);
  1
  2
  3
  4

  

  pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var result = arr.pop();
  console.log(arr);
  console.log(result);
  1
  2
  3
  4

  

  unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var result = arr.unshift("牛魔王", "二郎神");
  console.log(arr);
  console.log(result);
  1
  2
  3
  4

  

  shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var result = arr.shift();
  console.log(arr);
  console.log(result);
  1
  2
  3
  4

  

  forEach()方法演示：该方法可以用来遍历数组

  forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：

  第一个参数：就是当前正在遍历的元素
  第二个参数：就是当前正在遍历的元素的索引
  第三个参数：就是正在遍历的数组
  注意：这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach()，还是使用for循环来遍历数组。

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  arr.forEach(function (value, index, obj) {
      console.log(value + " #### " + index + " #### " + obj);
  });
  1
  2
  3
  4

  

  slice()方法演示：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

  参数：

  第一个参数：截取开始的位置的索引，包含开始索引
  第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
  注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

  var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
  var result = arr.slice(1, 4);
  console.log(result);
  result = arr.slice(3);
  console.log(result);
  result = arr.slice(1, -2);
  console.log(result);
  1
  2
  3
  4
  5
  6
  7

  

  splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

  参数：

  第一个参数：表示开始位置的索引
  第二个参数：表示要删除的元素数量
  第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

  var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
  var result = arr.splice(3, 2);
  console.log(arr);
  console.log(result);
  result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
  console.log(arr);
  console.log(result);
  1
  2
  3
  4
  5
  6
  7

  

  concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
  var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
  var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
  console.log(result);
  1
  2
  3
  4
  5

  

  join()方法演示：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  var result = arr.join("@-@");
  console.log(result);
  1
  2
  3

  

  reverse()方法演示：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

  var arr = ["孙悟空", "猪八戒", "沙和尚"];
  arr.reverse();
  console.log(arr);
  1
  2
  3

  

  sort()方法演示：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

  var arr = ["b", "c", "a"];
  arr.sort();
  console.log(arr);
  1
  2
  3

  

  注意：即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

  var arr = [1, 3, 2, 11, 5, 6];
  arr.sort();
  console.log(arr);
  1
  2
  3

  

  我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序，如下：

  如果返回一个大于0的值，则元素会交换位置
  如果返回一个小于0的值，则元素位置不变
  如果返回一个等于0的值，则认为两个元素相等，也不交换位置
  经过上边的规则，我们可以总结下：

  如果需要升序排列，则返回 a-b
  如果需要降序排列，则返回 b-a

  var arr = [1, 3, 2, 11, 5, 6];
  arr.sort(function (a, b) {
      return a - b;
  });
  console.log(arr);
  1
  2
  3
  4
  5

  

  typeof运算符：

  用来检查变量的返回类型：

  

  运算符：

  
  逻辑运算符的区别：

  • && 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：
    • 两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
    • JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
    • 非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
  • || 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：
    • 两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
    • JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
    • 非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
  • ! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：
    • 如果对一个值进行两次取反，它不会变化
    • 非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
      比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

  比较运算符的区别：

  • 使用 == 来做相等运算
    • 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
  • 使用 != 来做不相等运算
    • 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
  • 使用 === 来做全等运算
    • 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
  • 使用 !== 来做不全等运算
    • 用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

  逻辑控制语句：

  控制符：

  • break：结束最近的一次循环，可以在循环和switch语句中使用。
  • continue：结束本次循环，执行下一次循环，只能在循环中使用

  条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的条件语句：

  • if…else
  • switch…case

  类似java中的语句

  if…else：

  示例：

  if(条件)
  {
     //JavaScript代码;
  }
  else
  {
    //JavaScript代码;
  }
  1
  2
  3
  4
  5
  6
  7
  8

  多层嵌套：

  if (age < 18) {
      //JavaScript代码;
  } else if (age == 18) {
      //JavaScript代码;
  } else {
      //JavaScript代码;
  }
  1
  2
  3
  4
  5
  6
  7

  switch：

  switch (表达式)
  {    
  	case 常量1 : 
         //JavaScript代码;
  		break;
       case 常量2 : 
   	  //JavaScript代码;
   		break;
           ...
  	 default : 
         //JavaScript代码;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  循环语句：

  循环语句和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

  • while
  • do…while
  • for

  while

  while(条件表达式){
      语句...
  }
  1
  2
  3

  do…while

  do{
      语句...
  }while(条件表达式);
  1
  2
  3

  for：

  for(初始化表达式 ; 条件表达式 ; 更新表达式){
      语句...
  }
  1
  2
  3

  JavaScript常用方法：

  常用的输入/输出：

  alert()

  alert("提示信息");
  1

  弹出提示信息
  

  prompt()

  prompt("提示信息", "输入框的默认信息");
  prompt("请输入你喜欢的颜色","红色");
  prompt("请输入你喜欢的颜色","");
  1
  2
  3

  

  函数：

  函数的概念：

  • 函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
  • 使用更简单：不用定义属于某个类，直接使用
  • 函数分类：系统函数和自定义函数

  常用系统函数：

  

  自定义函数：

  语法：
  函数声明方式：

  function 函数名([参数1,参数2,参数3,…]){
       //JavaScript语句
       [return 返回值]
  }
  1
  2
  3
  4

  函数表达式方式：

  var 函数名  = function([形参1,形参2,...,形参N]) {
      语句....
  }
  1
  2
  3

  函数的调用：

  直接调用函数名：

  // 函数声明
  var sum = function (num1, num2) {
      var result = num1 + num2;
      console.log("num1 + num2 = " + result);
  }
  
  // 函数调用
  sum(10, 20);
  1
  2
  3
  4
  5
  6
  7
  8

  与表单元素一起使用：

  事件名＝ "函数名( )" ;
  1

  示例：

  function study( ){
          for(var i=0;i<5;i++){
              document.write("
  欢迎学习JavaScript
  ");
          }
      }
  1
  2
  3
  4
  5

  单击此按钮时，调用函数study( )，执行函数体中的代码：

  <input name="btn" type="button"
     value="显示5次欢迎学习JavaScript"  onclick="study( )" />
  1
  2

  也可以配合输入框来使用：
  示例：

  function study(count){
          for(var i=0;i<count;i++){
              document.write("
  欢迎学习JavaScript
  ");
          }
      }
  1
  2
  3
  4
  5

  单击此按钮时，调用函数study (count )，执行函数体中的代码

  <input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
    onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
  1
  2

  事件：

  

  对象：

  对象的创建：

  示例：
  第一种方式：

  var person = new Object();
  person.name = "张三";
  person.age = 18;
  console.log(person);
  1
  2
  3
  4

  第二种方式，推荐使用：

  var person = {
      name: "张三",
      age: 18
  };
  1
  2
  3
  4

  对象的访问：

  对象.属性名
  1

  示例：
  person.name;

  删除属性：

  delete 对象.属性名
  1

  示例：

  var person = new Object();
  person.name = "张三";
  person.age = 18;
  console.log(person);
  
  delete person.name
  console.log(person);
  1
  2
  3
  4
  5
  6
  7

  对象的遍历：

  for (var 变量 in 对象) {
  
  }
  1
  2
  3

  示例：

  var person = {
      name: "小明",
      age: 18
  }
  
  for (var personKey in person) {
      var personVal = person[personKey];
      console.log(personKey + ":" + personVal);
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9