zoukankan html css js c++ java

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

结果：查看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;
        		 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();
```
效果：
- 查：
  - getElementsByClassName、getElementsByName、getElementById、getElementsByTagName上面都说过了
  - 这边介绍一下怎么查看标签内包含的子标签
```
	// 查
	var check = background.childNodes;
	console.log(check);
```

效果： DOM操作查.png

查看全文

相关阅读:
while,do while和for循环语句的用法
 阶乘
 java--测体重练习
 java---相亲练习
 java ---运算符
 java数据类型定义与输出
 基本Java数据类型
 揭开UTF-8的神秘面纱
 POJ 1164 城堡问题【DFS/位运算/种子填充法/染色法】
POJ 3984 迷宫问题【BFS/路径记录/手写队列】

原文地址：https://www.cnblogs.com/miaomiaoshen/p/5840927.html