Java EE入门（三）——JavaScript基础

Java EE入门（三）——JavaScript基础
　　iwehdio的博客园：https://www.cnblogs.com/iwehdio/

1、JavaScript

JS 是一种直译式脚本语言（对源码直接进行解释执行），提供用户交互功能。
JS的组成：
- ECMAScript：核心部分，定义了JS语言的语法规范、属性、方法和对象等。
- DOM：文档对象模型，主要是用来管理页面。
- BOM：浏览器对象模型，前进后退屏幕宽高等封装在浏览器中的功能。
JS的语法特点：
- 变量弱类型（只需指定类型为变量 var ），区分大小写，语句结束后的分号可有可无。
- 写在 head 中的 script 标签内。
- 声明变量：var 变量名 = 变量值;。
- 声明函数：var 函数名 function(){ }或function 函数名(){ }。
JS的数据类型：
- 基本类型：string、 number、 boolean、 undefined、null。
- 引用类型：对象、内置对象。
- 类型转换：自动转换。
JS的运算符和语句：
- 运算符和语句与 Java 一样。
- 三个等号 === 表示值和类型都必须相等。
```
var x = 111;
var y = "111";
alert(x == y);		//true
alert(x === y);		//flase
```
JS的输出：
- alert()：弹框输出。
- document.write()：在页面中输出。
- console.log()：向控制台输出。
- .innerHTML：对象的属性，向页面输出。
- document.getElementByld("id名称")：获取页面元素。
- .value：对象的值。
JS开发步骤：
1. 确定事件。
2. 通常事件都会触发一个函数。
3. 函数里面通常会操作页面元素，做交互工作。
JS定时器：
- setInternal("代码串"，时间)：按照指定时间周期（毫秒），执行函数或代码串。代码串可以是代码文本或者所要执行的函数。这个方法是 Window 对象的，但是因为其是一个最顶层的对象，因此可直接调用。
- setTimeout()：与上用法相同，但只会执行一次。
- clearInternal(timerID)和clearTimeout(timerID)：终止定时。创建定时器会返回 timerID 。
图片显示与隐藏：
- img.style.display = none;：图片的隐藏。
- img.style.display = block;：图片的显示。
HTML 文档的加载顺序：从上而下顺序执行，遇到函数只加载而不执行。因此如果在 script 标签内、函数外获取下方 body 中的 id 会获取失败。
JS中的常用事件：
- onfocus：获得焦点。
- onblur：失去焦点。
- onkeyup：键盘按键抬起。
- onclick：单击事件。
- ondblclick：双击事件。
- onmouseout：鼠标移出。
- onmouseenter：鼠标移入。
引入外部JS文件：<script type="文件类型" src="文件路径"></script>。

表格的隔行换色：表格 table 的 rows 集合获取所有行组成的数组。

function init(){	//文档加载完成 onload 事件触发
    // 获取表格
    var tab = document.getElementById("tab");
    // 获取表格中行的集合
    var rows = tab.rows;
    for(var i=0; i<rows.length; i++){
        if(i%2==0){
            rows[i].bgColor = "red";
        } else {
            rows[i].bgColor = "blue";
        }
    }
}

复选框的全选和全不选：checkbox 的 checked 属性。
- 对所需要设置的所有复选框设置 name 或 class 属性。
- 通过 getElementByClassName() 或 getElementByName() 获取所需要设置的所有复选框。
- 获取全选按钮的值，并将所有需要设置的所有复选框设置为相同的值。
DOM ：文档对象模型，管理文档的增删改查规则，定义了网文访问和操作 HTML 文档的标准。
- 整个 html 文件，可以看作是 document 对象下的节点。而 html 节点下又有 head 节点和 body 节点。
- 节点之间有父子关系，子节点包含在父节点的两个标签之间。
- 节点一般分为元素、属性和文本节点。
- 常用的 HTML DOM 方法：
  - getElementById(id) - 获取带有指定 id 的节点（元素）。
  - appendChild(node) - 插入新的子节点（元素）。
  - removeChild(node) - 删除子节点（元素）。
- 常用的 HTML DOM 属性：
  - innerHTML - 节点（元素）的文本值。
  - parentNode - 节点（元素）的父节点。
  - childNodes - 节点（元素）的子节点。
  - attributes - 节点（元素）的属性节点。
- 查找节点：
  - getElementById() 返回带有指定 ID 的元素。
  - getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
  - getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
- 增加节点：
  - createAttribute() 创建属性节点。
  - createElement() 创建元素节点。
  - createTextNode() 创建文本节点。
  - insertBefore() 在指定的子节点前面插入新的子节点。
  - appendChild() 把新的子节点添加到指定节点。
- 删除节点：
  - removeChild() 删除子节点。
  - replaceChild() 替换子节点。
- 修改节点：
  - setAttribute() 修改属性。
  - setAttributeNode() 修改属性节点。

2、案例

案例1：点击按钮替换文本：

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function dianji(){
			//alert("被点击了");
            //HTML支持样式，Text不支持样式
			var div1 = document.getElementById("123");
			div1.innerHTML = "<font color=red>内容被替换了1</font>";
			var div2 = document.getElementById("124");
			div2.innerText = "<font color=red>内容被替换了2</font>";
		}
	</script>
</head>
<body>
	<input type="button" value="点击" onclick="dianji()"/>
	<div id="123">
		替换前的文字1
	</div>
	<div id="124">
		替换前的文字2
	</div>
</body>

案例2：简单的数据校验。

校验用户名，长度不能小于6位。
1. 确定事件：提交事件 onsubmit 。
2. 事件所要触发的函数 checkForm() 。
3. 在函数中要做用户名的长度比较。

实现：

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		//checkForm是一个特殊的事件，必须有返回值
		function checkForm(){
			var a = document.getElementById("username");
			var v = a.value;
			if(v.length >= 6){	//.length获取输入长度
				return true;
			} else {
				alert("用户名太短");
                  return false;
			}
		}
	</script>
</head>
<body>
	<form action="../3、CSS/网站首页优化/main.html" onsubmit="return checkForm()">
		用户名：<input type="text" id="username"/>
		<input type="submit" value="提交" />
	</form>
</body>

案例3：轮播图

每一秒更换显示一张图片。
1. 确定事件：文档加载完成的时间，在 body 上的 onload 事件。
2. 事件触发的函数：init()。
3. 在 init() 中，每1000毫秒执行一次 change() 函数。
4. change() 函数中循环切换图片。

实现：

<head>
	<meta charset="utf-8">
	<title></title>
	<script>		
		var index = 0;
		function change(){
			var img = document.getElementById("pic");
			var curIndex = (index++)%3 + 1
			img.src = "./img/"+curIndex+".jpg";
		}		
		function init(){
			setInterval("change()",1000);
		}
	</script>
</head>
<body onload="init()">
	<img src="./img/1.jpg" id="pic"/>
</body>

案例4：页面图片的定时弹出与隐藏。

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function show(){
			var img = document.getElementById("display");
			img.style.display = "block";
			setTimeout("hide()",3000);
		}
		function hide(){
			var img = document.getElementById("display");
			img.style.display = "none";
		}
		function init(){
			setTimeout("show()",3000);
		}
	</script>
</head>
<body onload="init()">
	<img src="./img/header.jpg" id="display" style="display: none;"/>
	<img src="./img/okwu.jpg" />
</body>

案例5：带提示的表单校验。

检测用户名和密码的长度，并在获得焦点、失去焦点和抬起键盘按键时给出提示。
比较两次输入的密码是否一致并给出提示。
完成所有要求的情况下可以进行提交。

实现：

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function showTips(id){
			var span_name = document.getElementById(id);
			if(id=="span_username"){
				var word = "用户名";
				var v = document.getElementById("username");
			} else if(id=="span_password"){
				var word = "密码";
				var v = document.getElementById("password");
			}
			if(v.value.length < 6){
				span_name.innerHTML = word + "不能短于六位";
				return false;
			} else {
				span_name.innerHTML = word + "长度可用";
				return true;
			}				
		}
		function check(){
			var repassword = document.getElementById("repassword").value;
			var password = document.getElementById("password").value;
			var checkTips = document.getElementById("span_repassword");
			if(repassword != password){
				checkTips.innerHTML = "两次输入的密码不一致";
				return false;
			} else {
				checkTips.innerHTML = "密码一致";
				return true;
			}
		}		
		function checkForm(){
			return showTips("span_username") && showTips("span_password") && check();
		}
	</script>
</head>
<body>
	<form action="轮播图.html" onsubmit="checkForm()">
		<div></div>
		<div align="middle" style="padding-top: 200px;">
			用户名：<input type="text" id="username" onfocus="showTips('span_username')" onblur="showTips('span_username')" onkeyup="showTips('span_username')"/><span id="span_username">请输入用户名</span><br />
			密码：<input type="password" id="password" onfocus="showTips('span_password')" onblur="showTips('span_password')" onkeyup="showTips('span_password')"/><span id="span_password">请输入密码</span><br />
			确认密码：<input type="password" id="repassword" onblur="check()" onkeyup="check()"/><span id="span_repassword">请再次输入密码</span><br />
			<input type="submit" value="提交"/>
		</div>
	</form>
</body>

案例6：省市联动。

根据第一个下拉菜单中的省，改变第二个下拉菜单中的市的显示。

实现：

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var pro2city = [
			["武汉市","黄冈市","孝感市"],
			["西安市","咸阳市","宝鸡市"],
			["海淀区","朝阳区","昌平区"]
		]
		
		function selectPro(){
			var province = document.getElementById("province");
			var v = province.value;
			var cities = pro2city[v];
			var city = document.getElementById("city");
			city.options.length = 0;
			for(var i=0; i<cities.length; i++){
				var cre_option = document.createElement("option");
				var cre_text = document.createTextNode(cities[i]);
				cre_option.appendChild(cre_text);
				city.appendChild(cre_option);
			}
		}
	</script>
</head>
<body>
	<select id="province" onchange="selectPro()">
		<option>---请选择---</option>
		<option value="0">湖北省</option>
		<option value="1">陕西省</option>
		<option value="2">北京市</option>
	</select>
	<select id="city">
		
	</select>
</body>

案例7：向右选择。

在左边的菜单中选择项目，通过 >> 按钮移动到右边。

实现：

<head>
	<meta charset="UTF-8">
	<title></title>
	<script>	
		function selectOne(){
			var leftSelect = document.getElementById("leftSelect");
			var options = leftSelect.options;
			var rightSelect = document.getElementById("rightSelect");
			for(var i=0; i < options.length; i++){
				var option1 = options[i];
				if(option1.selected){
					rightSelect.appendChild(option1);
				}
			}
		}
		function selectAll(){
			var leftSelect = document.getElementById("leftSelect");
			var options = leftSelect.options;
			var rightSelect = document.getElementById("rightSelect");
			for(var i=options.length - 1; i >=0; i--){
				var option1 = options[i];
				rightSelect.appendChild(option1);
			}
		}	
	</script>
</head>
<body>
	<div style="float: left;">
		<br />
		<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
			<option>A</option>
			<option>B</option>
			<option>C</option>
			<option>D</option>
		</select>
		<br />
		<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
		<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
	</div>

	<div style="float: leftt;"> 
		<br />
		<select multiple="multiple" id="rightSelect">
			<option>11</option>
			<option>22</option>
			<option>33</option>
			<option>44</option>
		</select>
		<br />
	</div>			
</body>

iwehdio的博客园：https://www.cnblogs.com/iwehdio/

相关阅读:
luncence
git与svn与github与码云的区别
 redis缓存在项目中的使用
 大宗风控体系“药不能停”：一线实战高手解密衍生品交易风险管控的三个层级！
永恒的风控：大宗商品贸易融资背后的核心风险该如何规避？
达信：深度解读COSO新版企业风险管理框架（ERM）
DataOps Reading Notes
SDN Reading Notes
给某mooc站点准备的FE大纲
 《财富》杂志推荐的75本商业必读书？
原文地址：https://www.cnblogs.com/iwehdio/p/12308015.html