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/
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/iwehdio/p/12308015.html