前言:

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));

    结果:

JS函数的定义和使用


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

  • 格式:

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

结果:

  • 其实在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>

结果:

  • 匿名函数:匿名函数有个注意点是必须要有接收者

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

结果:

对象


  • 先来简单创建一个对象

    	// 创建对象
    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('面包'));

结果:

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


  • 在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);

    结果:

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>

效果:

  • 这边我们增加个需求,当我们不断点击按钮时,让图片不断在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>

效果:

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>

效果:

  • 顺带提一下,记得之前的文章中,我们使用伪类来监听<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>

效果:

综合示例一


  • 图片浏览器

    • 需求:分别点击上一页下一页按钮可以切换不同图片
    	<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>

    效果:

综合示例二


  • 倒计时

    • 需求:点击按钮即开始倒计时,当倒计时结束时显示文字标题
    	<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>

    效果:

补充


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

    • 首先,我们确认了外部JS文件名后直接现在头部书写外部链接
    <script src="JS/index.js"></script>
    
    
    • 接下来在项目中新建JS文件,取名为index ——> 完成 详情可以参考下面的动态图

  • 还有一点需要注意的是 :<script>一般都写在body的末尾,因为解析器是从上往下解析的,如果放在前面或者<head>内,会出现一些不想看到的问题,具体的后续文章会讲解

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

    • 增:这里我们用2种方法给页面添加<button>标签
    // 方式一
    document.write('<button>按钮</button>');

    效果:

    • 还有一种方式,就是拿到相应的标签,往标签内新增一个新标签,我们先给页面初始化一个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>

    效果:

    • 接着,在index.js文件中往div内添加新的标签
    	// 方式二
    // 获得标签
    var background = document.getElementsByClassName('background')[0]; // 创建一个新按钮标签
    var newButton = document.createElement('button');
    newButton.innerText = '新按钮';
    // 将标签注入div
    background.appendChild(newButton);

    效果:

  • 改:上面我们就已经使用了多次改的操作,就不再叙述了

    • 删:删除的话这里介绍最好用的一个
    	// 删
    newButton.remove();

    效果:

    • 查:

      • getElementsByClassName、getElementsByName、getElementById、getElementsByTagName上面都说过了
      • 这边介绍一下怎么查看标签内包含的子标签
      	// 查
      var check = background.childNodes;
      console.log(check);

效果:

html5快速入门(四)—— JavaScript的更多相关文章

  1. html5快速入门(二)—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  2. HTML5快速入门(三)—— 标签综合运用

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  3. html5快速入门(一)—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  4. 快速入门上手JavaScript中的Promise

    当我还是一个小白的时候,我翻了很多关于Promise介绍的文档,我一直没能理解所谓解决异步操作的痛点是什么意思 直到我翻了谷歌第一页的所有中文文档我才有所顿悟,其实从他的英文字面意思理解最为简单粗暴 ...

  5. AndroidStudio快速入门四:打造你的开发工具,settings必备

    http://blog.csdn.net/jf_1994/article/details/50085825 前言:这里是使用AS的基本设置,适合新入手的朋友阅读,将这里介绍的设置完基本使用无忧啦. 1 ...

  6. Ant快速入门(四)-----Ant的任务(Task)

    到目前为止,我们已经掌握了Ant生成文件的基本结构,以及<project.../>,<target.../>,<property.../>等元素的配置方式.而< ...

  7. mybatis快速入门(四)

    mybatis动态标签<where><if><foreach>以及sql片段 1.创建一个包装类UserQueryVo.java package cn.my.myb ...

  8. Solr.NET快速入门(四)【相似查询,拼写检查】

    相似查询 此功能会返回原始查询结果中返回的每个文档的类似文档列表. 参数通过QueryOptions的MoreLikeThis属性定义. 示例:搜索"apache",为结果中的每个 ...

  9. Dubbo快速入门 四

    4.业务场景 4.1).提出需求 某个电商系统,订单服务需要调用用户服务获取某个用户的所有地址: 我们现在 需要创建两个服务模块进行测试 模块 功能 订单服务web模块 创建订单等 用户服务servi ...

随机推荐

  1. MySql联接算法

    联接算法是MySql数据库用于处理联接的物理策略.在MySql 5.5版本仅支持Nested-Loops Join算法,如果联接表上有索引时,Nested-Loops Join是非常高效的算法.如果有 ...

  2. 相克军_Oracle体系_随堂笔记015-网络原理及配置

    oracle网络没有负载, 没有负载的就不容易出问题.相对很简单的.   1.监听的动态注册: PMON 注册监听,或者 alter system register; 强制PMON抓紧注册. 都属于动 ...

  3. Oracle11g中数据的倒库和入库操作以及高版本数据导入低版本数据可能引发的问题

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在10g之前,传统的导出和导入分别使用EXP工具和IMP工具 ...

  4. spring boot 配置启动后执行sql, 中文乱码

    spring.datasource.schema指定启动后执行的sql文件位置. 我发现中文乱码,原因是没有指定执行sql script encoding: spring: datasource: u ...

  5. jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  6. MVC学习系列9--控制器接收从视图传递过来的参数

    前面学习了,从控制器向视图传递数据,现在学习怎么从视图向控制器传递数据. 通常,我们有两种方式,来处理浏览器的请求,一个是GET方式,一个是POST方式.一般来说,直接通过在浏览器中输入URL话,请求 ...

  7. Hadoop源码编译过程

    一.           为什么要编译Hadoop源码 Hadoop是使用Java语言开发的,但是有一些需求和操作并不适合使用java,所以就引入了本地库(Native Libraries)的概念,通 ...

  8. .NET设计模式(1):1.1 单例模式(Singleton Pattern)

    概述 单例模式就是保证在整个应用程序的生命周期中,在任何时刻,被指定的类只有一个实例,并为客户程序提供一个获取该实例的全局访问点. 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单 ...

  9. HTML5知识初级题目

    在 HTML5 中,onblur 和 onfocus 是: 在 HTML5 中,哪个元素用于组合标题元素? HTML5 中不再支持下面哪个元素? HTML5 中不再支持下面哪个元素? HTML5 之前 ...

  10. 【C#】分享一个可携带附加消息的增强消息框MessageBoxEx

    --------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我 ...