摘要:1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-HTML5快速入门(四)――JavaScript

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 前言:

1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我

2.更新时间没有规律,一般会在3天左右更新一篇(全系列预计会有12篇)因为需要工作,所以只能在闲暇之余整理,如果有喜欢的朋友可以关注我,将会第一时间获得更新信息

3.如果有需要Reactive Native + H5跨平台开发的朋友,可以联系我,在本系列结束之前会根据需求的程度决定是否继续

4.全系列文章最后尽可能地附上综合实例,帮助朋友更好地理解

5.此系列会涉及到HTMLCSS、JavaScript等

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类型

定义数组

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

```

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

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中的两大内置对象之windowwindow:全局的内置对象,只要是全局的东西,它都能调用所有的全局变量都是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中的两大内置对象之documentdocument可以动态获取当前页面的所有标签 可以对拿到的标签进行增删改查(CRUD)操作

DOM操作这里我们结合上面的document来进行比较有趣的DOM操作 需求:页面显示一张图片,和一个按钮,当我们点击按钮时,改变原本显示的图片要改变图片我们需要拿到

javascript代码实例教程-HTML5快速入门(四)――JavaScript-脚本宝典
标签,还需要监听

 

这边我们增加个需求,当我们不断点击按钮时,让图片不断在2张图片间切换

补充:在HTML中,会自动给图片加上一些前缀以保证路径完整,所以如果简单的判断图片路径是不可以的,所以下面的判断中我们会涉及到2个函数

indexOf:截取指定区域的字符,正确会返回任意正数,错误则返回-1 lastIndexOf:获取尾部区域字符,正确会返回任意正数,错误则返回-1

DOM事件

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

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

综合示例一

图片浏览器

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

综合示例二

倒计时

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

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-HTML5快速入门(四)――JavaScript

全部内容,希望文章能够帮你解决

javascript代码实例教程-HTML5快速入门(四)――JavaScript

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过