HTML5快速入门（四）—— JavaScript

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
6.如果文章的图片无法显示或页面显示不全，烦请转至简书查阅：简书

JS简介

---

• javaScript是一门广泛用于浏览器客户端的脚本语言
• 由Netspace公司设计，与Sun公司合作，所以起名叫javaScript（抱大腿嫌疑）,一般都叫它JS
• 常见用途
  
  • HTML DOM操作（节点操作）如：增、删、改节点
  • 给HTML网页增加动态功能，如：动画
  • 事件处理 —— 如：监听鼠标点击、滑动等
• Node.js：一个JavaScript运行环境（runtime），是对google V8引擎进行了封装
  
  • V8引擎执行javaScript速度非常快，性能非常好
  • Node.js优势
    
    • 可作为后台语言
    • 单线程 —— 在不新增外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）
    • 非阻塞的输入输出（I/O）、V8虚拟机、事件驱动

JS书写形式

---

• 页内JS：在当前网页的script标签中书写

      <script type="text/javascript">
      </script>
  

• 外部JS

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

JS基本数据类型

---

• 在JS中，定义变量需要使用var关键字来修饰

  • 要想看到console.log输出的信息，需要在网页内右击选择检查（查看元素），选择菜单内的控制器即可（本人用的是mac版的火狐，其它浏览器的还请自己找下）
    
    
    

  
      // 可以不用加’;‘号但是为了代码更清晰，还是加上比较好
      // 定义变量
      var name = '张三';
      var name2 = '狗蛋';
      var age = 23;
      var score = 33.0;
      var height = null;
  
      // 输出变量
      console.log(name, name2, age, score, height);
  
      // 查看数据类型
      console.log(typeof name, typeof name2, typeof age, typeof score, typeof height);
  

  结果：

• 接下来，我们来看看在JS里面变量怎么进行拼接

    var name = '张三';
        var name2 = '狗蛋';
  
      var newName = name + name2;
      var newName2 = name + name2 + '王二麻子';
  
      console.log(newName, newName2);
  
      // 不同类型的变量进行拼接
      var string = 10 + '10';
      var string2 = 10 + 10 + '10';
      var string3 = '10' + 10 + 10;
  
      var string4 = 10 + 20.0 + '30';
  
      console.log(string, string2, string3, string4);
  

  结果：

  • 结论：从上面可以看出，JS的运算规则是从左向右进行拼接的，且如上面所示，任何类型的变量与String类型进行拼接最终都会被强转为String类型

• 定义数组

  var array = [10, '张三', 30.0, ['数组中的数组', 8.0]];
  
  console.log(typeof array, array);
  
  // 取值：JS和其它语言一样，数组都是使用下标来取值
  // 遍历
  for(var i = 0; i<array; i++) {
  
      console.log(i, array[i]);
  }
  
  for(var i in array) {
  
      console.log(i, array[i]);
  }
  
  // 删除和插入元素
  var array1 = [10, 20, 30];
  
  // 插入元素
  array1.push(40);
  
  console.log(array1);
  
  // 删除元素
  array1.pop();
  
  console.log(array1);
  

  结果：

从上面的示例中可以看出在JS里面，数组可以放任何类型的数据
- 类库(Math):与数学相关的运算都在这个库里面

```
    // 类库 Math(与数学相关的运算都在这个库里面)
    // 取最小值转换为整数
    console.log('floor' + Math.floor(7.1, 10, 20, 30.0, 40));

    // 取最小值
    console.log('min' + Math.min(1, 2, 3, 4, 5));

    // 取最大值
    console.log('max' + Math.max(1, 2, 3, 4, 5));

```

结果：![计算结果.png](http://upload-images.jianshu.io/upload_images/1923109-9d97567cf323efd3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

JS函数的定义和使用

---

• 需要注意的是JS的函数不用甚至返回类型就可以直接返回数据

• 格式：

   // 定义