前言:
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标签中书写
外部JS
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
类型
- 结论:从上面可以看出,JS的运算规则是从左向右进行拼接的,且如上面所示,任何类型的变量与
定义数组
var array = [10, '张三', 30.0, ['数组中的数组', 8.0]];console.log(typeof array, array);// 取值:JS和其它语言一样,数组都是使用下标来取值// 遍历for(var i = 0; i
结果:
从上面的示例中可以看出在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)
,在开发中它的作用非常大,因为我们传进来的东西都会存放进这个数组中结果:
匿名函数:匿名函数有个注意点是必须要有接收者
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)操作
DOM操作
- 这里我们结合上面的
document
来进行比较有趣的DOM操作 - 需求:页面显示一张图片,和一个按钮,当我们点击按钮时,改变原本显示的图片
- 要改变图片我们需要拿到
<img>
标签,还需要监听<button>
标签的点击,这个时候就需要用到document
这个内置对象document
几种常用的获取标签的方式- getElementsByClassName
- getElementsByName
- getElementById:根据id获取,与其它方式不同,它返回的不是一个数组(原因:
因为id是唯一的
) - getElementsByTagName
- getElementsByTagNameNS
效果:
- 这边我们增加个需求,当我们不断点击按钮时,让图片不断在2张图片间切换
- 补充:在HTML中,会自动给图片加上一些前缀以保证路径完整,所以如果简单的判断图片路径是不可以的,所以下面的判断中我们会涉及到2个函数
- indexOf:截取指定区域的字符,正确会返回任意正数,错误则返回-1
- lastIndexOf:获取尾部区域字符,正确会返回任意正数,错误则返回-1
效果:
- 补充:在HTML中,会自动给图片加上一些前缀以保证路径完整,所以如果简单的判断图片路径是不可以的,所以下面的判断中我们会涉及到2个函数
DOM事件
- DOM事件有个有趣的规则 —— 所有的事件都是以
on
开头,这样方便我们记忆和使用 下面会介绍几种常用的事件
效果:
顺带提一下,记得之前的文章中,我们使用伪类来监听
<input>
标签获取焦点时的事件,学习JS后,我们可以使用JS来实现,记住这么一句话 —— JS是万能的效果:
综合示例一
- 图片浏览器
- 需求:分别点击
上一页
和下一页
按钮可以切换不同图片
- 需求:分别点击
综合示例二
- 倒计时
- 需求:点击按钮即开始倒计时,当倒计时结束时显示文字标题
Title /head>感谢您的支持5
补充
- 上面讲到了JS的外部样式,具体操作在这边补充一下
- 首先,我们确认了外部JS文件名后直接现在头部书写外部链接
- 接下来在项目中新建JS文件,取名为
index
——> 完成 详情可以参考下面的动态图
- 还有一点需要注意的是 :
<script>
一般都写在body的末尾,因为解析器是从上往下解析的,如果放在前面或者<head>
内,会出现一些不想看到的问题,具体的后续文章会讲解 - 上面只讲了DOM的增和改2个操作,这边就对DOM的操作再做一下补充
- 增:这里我们用2种方法给页面添加
<button>
标签
// 方式一document.write('');
效果:
- 还有一种方式,就是拿到相应的标签,往标签内新增一个新标签,我们先给页面初始化一个div标签
Title 效果:
- 接着,在index.js文件中往div内添加新的标签
// 方式二 // 获得标签 var background = document.getElementsByClassName('background')[0]; // 创建一个新按钮标签 var newButton = document.createElement('button'); newButton.innerText = '新按钮'; // 将标签注入div background.appendChild(newButton);
效果:
- 增:这里我们用2种方法给页面添加
- 改:上面我们就已经使用了多次改的操作,就不再叙述了
- 删:删除的话这里介绍最好用的一个
// 删 newButton.remove();
效果:
- 查:
- getElementsByClassName、getElementsByName、getElementById、getElementsByTagName上面都说过了
- 这边介绍一下怎么查看标签内包含的子标签
// 查 var check = background.childNodes; console.log(check);
效果: