美文网首页React NativeHTML5 学习
HTML5快速入门(四)—— JavaScript

HTML5快速入门(四)—— JavaScript

作者: 珍此良辰 | 来源:发表于2016-09-05 01:18 被阅读678次

    前言:

    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);
      
      
      结果: 查看console.log输出的信息.gif
    • 接下来,我们来看看在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变量拼接.png
      • 结论:从上面可以看出,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);
      
      
      结果: 数组结果.png

    从上面的示例中可以看出在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

    JS函数的定义和使用


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

    • 格式: 格式
       // 定义
          function sum(a, b) {
      
              return a + b;
          }
      
          // 调用
          console.log('和为:' + sum(10, 20));
      
      

    结果:


    函数使用一.png
    • 其实在JS里,本身就自带一个数组,一般称它为内置数组(arguments),在开发中它的作用非常大,因为我们传进来的东西都会存放进这个数组中

          <script>
              // 这里我们利用这个特性将数组中的所有元素相加
              // 函数的内置数组 --> arguments
              function sum2() {
                  var count = 0;
                  // 遍历
                  for (var i = 0; i<arguments.length; i++) {
                      count += arguments[i];
                  }
                  return count;
              }
      
              // 调用
              console.log('和为:', sum2(1,2,3));
          </script>
      
      

    结果:


    函数使用二.png
    • 匿名函数:匿名函数有个注意点是必须要有接收者

          var test = function () {
      
              console.log('匿名函数被调用');
          }
          
          // 调用
          test();
      
      
    结果: 匿名函数使用.png

    对象


    • 先来简单创建一个对象
    ```
        // 创建对象
        var person = {
            // 名字
            name : '狗蛋',
            // 年龄
            age : 18,
            // 行为
            action : ['eat', 'run', 'jump'],
            
            eat : function (something) {
                // 想要使用对象里面的属性,可以使用this关键字来获取
                console.log(this.name + '吃' + something);
            }
        };
        
        
        // 调用对象
        console.log(person.name, person.age, person.action[1], person.eat('面包'));
    
    ```
    

    结果:


    对象使用一.png

    通过构造函数来批量产生对象


    • 在JS中,如果我们需要批量产生对象,需要使用构造函数来实现,构造函数可以看成Objective-C中的类,而Objective-C生成对象是通过alloc -> init或者new,在JS中,就是用new来创建对象

          // 构造函数
          // 方式一:
          function Person() {
              // 因为 this 在那个地方,那它就指向谁相当于 Objective-C 中的self
              this.name = null;
              this.age = 18;
              this.action = [];
              // 注意,函数需要我们实现里面的逻辑
              this.eat = function (something) {
                  console.log(this.name + '吃' + something);
              }
          }
      
          // 生成对象
          var ps1 = new Person();
          ps1.name = '张三';
      
          var ps2 = new Person();
          ps2.name = '狗蛋';
          
          // 方式二:
          function Person2(name, age, action, eat) {
      
              this.name = name;
              this.age = age;
              this.action = action;
      
              this.eat = function (something) {
                  console.log(this.name + '吃' + something);
              };
          }
          
          // 生成对象
          var ps3 = new Person2('王二麻子', '19', ['eat', 'jump', 'run']);
          
          console.log(ps1, ps2, ps3);
          
      

      结果:


      批量生成对象.png

    JS中的两大内置对象之window


    • window:全局的内置对象,只要是全局的东西,它都能调用

      • 所有的全局变量都是window的属性
      • 所有的全局函数都是window的方法


      var name = '张三';
      
      // 调用
      console.log(age, window.age);
      
      function person() {
          var name = '狗蛋';
      }
      
      // 调用
      person();
      window.person();
      
      
    • 动态跳转:通过JS的配合,可以动态在某个地方实现跳转,在移动开发中,经常用来传值

      window.location.href = 'https://www.baidu.com';
      
      

    JS中的两大内置对象之document


    • document

      • 可以动态获取当前页面的所有标签
      • 可以对拿到的标签进行增删改查(CRUD)操作


          <script>
              // 插入
              document.write('hello world');
              document.write('<input type = 'color'>');
          </script>
      
      

    DOM操作


    • 这里我们结合上面的document来进行比较有趣的DOM操作

    • 需求:页面显示一张图片,和一个按钮,当我们点击按钮时,改变原本显示的图片

    • 要改变图片我们需要拿到<img>标签,还需要监听<button>标签的点击,这个时候就需要用到document这个内置对象

      • document几种常用的获取标签的方式
        • getElementsByClassName
        • getElementsByName
        • getElementById:根据id获取,与其它方式不同,它返回的不是一个数组(原因:因为id是唯一的
        • getElementsByTagName
        • getElementsByTagNameNS
          <body>
              <img src="img/icon.png">
              <button onclick="changeImg();">更改图片</button>
              
              <script>
                  function changeImg() {
                  // getElementsByTagName
                  var img = document.getElementsByTagName('img')[0];
                  // 修改图片
                  img.src="img/lufei.jpg";
                  }
              </script>
          </body>
      
      
    效果: 更改图片.gif
    • 这边我们增加个需求,当我们不断点击按钮时,让图片不断在2张图片间切换

      • 补充:在HTML中,会自动给图片加上一些前缀以保证路径完整,所以如果简单的判断图片路径是不可以的,所以下面的判断中我们会涉及到2个函数
        • indexOf:截取指定区域的字符,正确会返回任意正数,错误则返回-1
        • lastIndexOf:获取尾部区域字符,正确会返回任意正数,错误则返回-1
          <body>
          <img id="iconImg" src="img/icon.jpg" width="100" height="100">
          <button class="btn">更改图片</button>
      
              <script>
                  var img = document.getElementById('iconImg');
                  var btn = document.getElementsByClassName('btn')[0];
      
                  btn.onclick = function changeImg() {
              
                      if (img.src.lastIndexOf("img/icon.jpg") != -1) { // 当前图片为img/icon.jpg
                          img.src = 'img/lufei.jpg';
                      } else {
                      img.src = 'img/icon.jpg';
                      }
                  }
              </script>
          </body>
      
      

    效果:


    图片来回切换效果.gif

    DOM事件


    • DOM事件有个有趣的规则 —— 所有的事件都是以on开头,这样方便我们记忆和使用

    • 下面会介绍几种常用的事件

          <body>
              <img name="icon" src="img/icon.jpg" width="100" height="100">
      
              <script>
                  // 当window加载时调用
                  window.onload = function () {
      
                      var img = document.getElementsByName('icon')[0];
      
                      // 鼠标进入图片
                      img.onmouseover = function () {
                          console.log('鼠标进入图片');
                      }
      
                      // 鼠标在图片上移动
                      img.onmousemove = function () {
                          console.log('鼠标在图片上移动');
                      }
      
                      // 鼠标离开图片
                      img.onmouseout = function () {
                      console.log('鼠标离开图片');
                      }
      
                      // 图片被点击
                      img.onclick = function () {
                          console.log('图片被点击');
                      }
                  }
              </script>
          </body>
      
      

    效果:


    DOM事件示例一.gif
    • 顺带提一下,记得之前的文章中,我们使用伪类来监听<input>标签获取焦点时的事件,学习JS后,我们可以使用JS来实现,记住这么一句话 —— JS是万能的

          <body>
              <input class="input" type="text" placeholder="我是文本框">
      
              <script>
                  // 获取input标签
                  var input = document.getElementsByClassName('input')[0];
      
                  window.onload = function () {
                      // 当input获取焦点时
                      input.onfocus = function () {
                          console.log('获取到焦点');
                      }
                  }
              </script>
          </body>
      
      

    效果:


    DOM事件示例二.gif

    综合示例一


    • 图片浏览器

      • 需求:分别点击上一页下一页按钮可以切换不同图片


          <body>
              <button class="lastbtn">上一页</button>
              <img class="img" src="img/icon.jpg" width="100" height="100">
              <button class="nextbtn">下一页</button>
      
              <script>
                  window.onload = function () {
                      // 获取标签
                      var lastBtn = document.getElementsByClassName('lastbtn')[0];
                      var nextBtn = document.getElementsByClassName('nextbtn')[0];
                      var img = document.getElementsByClassName('img')[0];
      
                      lastBtn.onclick = function () {
                          if (img.src.lastIndexOf('img/icon.jpg') != -1) {
                              img.src = 'img/lufei.jpg';
                          }else {
                              img.src = 'img/icon.jpg';
                          }
                      }
      
                      nextBtn.onclick = function () {
                          if (img.src.lastIndexOf('img/icon.jpg') != -1) {
                              img.src = 'img/lufei.jpg';
                          }else {
                              img.src = 'img/icon.jpg';
                          }
                      }
                  }
              </script>
          </body>
      
      

      效果:


      综合示例一.gif

    综合示例二


    • 倒计时

      • 需求:点击按钮即开始倒计时,当倒计时结束时显示文字标题


          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style type="text/css">
      
                  .title{
                      /*字体大小*/
                      font-size:120px;
                      /*字体颜色*/
                      color: green;
                      /*居中*/
                      text-align: center;
                      /*隐藏*/
                      display:none;
                  }
      
                  .countdown{
                      font-size:100px;
                      color: green;
                      text-align: center;
                  }
              </style>
          /head>
          <body>
              <div class="title">感谢您的支持</div>
              <div class="countdown">5</div>
              <center><button class="start">开始倒计时</button></center>
      
              <script>
                  window.onload = function () {
                      // 获取标签
                      var countdown = document.getElementsByClassName('countdown')[0];
                      var title = document.getElementsByClassName('title')[0];
                      var start = document.getElementsByClassName('start')[0];
      
                      // 设置定时器(需要传两个参数,第一个是函数<也就是要执行的方法>, 第二个是执行间隔<单位为毫秒:1s==1000ms>)
                      start.onclick = function () {
                          // 使用this修饰timer让其成为全局,方便内部使用
                          this.timer = setInterval(function () {
      
                              countdown.innerText -= 1;
      
                              if (countdown.innerText == 0) {
                                  // 清除定时器
                                  clearInterval(this.timer);
                                  // 隐藏倒计时(要设置css,就需要先获取style属性才能获取到css内的属性进行设置)
                                  countdown.style.display = 'none';
                                  // 显示标题
                                  title.style.display = 'block';
                              }
                          }, 1000);
                      }
                  }
              </script>
          </body>
      
      
      效果: 综合示例二.gif

    补充


    • 上面讲到了JS的外部样式,具体操作在这边补充一下

      • 首先,我们确认了外部JS文件名后直接现在头部书写外部链接


      <script src="JS/index.js"></script>
      
      
      • 接下来在项目中新建JS文件,取名为index ——> 完成 详情可以参考下面的动态图
    外部JS的操作.gif
    • 还有一点需要注意的是 :<script>一般都写在body的末尾,因为解析器是从上往下解析的,如果放在前面或者<head>内,会出现一些不想看到的问题,具体的后续文章会讲解

    • 上面只讲了DOM的增和改2个操作,这边就对DOM的操作再做一下补充

      • 增:这里我们用2种方法给页面添加<button>标签


      // 方式一
      document.write('<button>按钮</button>');
      
      
      效果: DOM操作增一.png
      • 还有一种方式,就是拿到相应的标签,往标签内新增一个新标签,我们先给页面初始化一个div标签


          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style type="text/css">
                  .background{
                      background: yellow;
                      width: 200px;
                      height: 200px;
                  }
              </style>
          </head>
          <body>
              <div class="background"></div>
              
              <script src="JS/index.js"></script>
          </body>
      
      

      效果:


      DOM操作增二-一.png
      • 接着,在index.js文件中往div内添加新的标签


          // 方式二
          // 获得标签
          var background = document.getElementsByClassName('background')[0];
      
          // 创建一个新按钮标签
          var newButton = document.createElement('button');
          newButton.innerText = '新按钮';
          // 将标签注入div
          background.appendChild(newButton);
      
      

      效果:


      DOM操作增二-二.png
    • 改:上面我们就已经使用了多次改的操作,就不再叙述了

      • 删:删除的话这里介绍最好用的一个


          // 删
          newButton.remove();
      
      
      效果: DOM操作删.png
    - 查:
        - getElementsByClassName、getElementsByName、getElementById、getElementsByTagName上面都说过了
        - 这边介绍一下怎么查看标签内包含的子标签
        <br><br>
        
        ```
            // 查
            var check = background.childNodes;
            console.log(check);
        
        ```
    
    效果: DOM操作查.png

    相关文章

      网友评论

      本文标题:HTML5快速入门(四)—— JavaScript

      本文链接:https://www.haomeiwen.com/subject/xjykjttx.html