前端基础篇（16）——理解什么是Javascript并应用

最新推荐文章于 2022-08-03 15:14:25 发布

安逸

最新推荐文章于 2022-08-03 15:14:25 发布

阅读量403

点赞数

分类专栏： web 文章标签： javascript js css

本文链接：https://blog.csdn.net/qq_44667083/article/details/107735566

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

理解什么是Javascript并应用

一、Javascript概述
二、JS的组成
三、JS的语法
四、JS的开发步骤：
五、DOM

一、Javascript概述

Javascript是一种直译式脚本语言。

脚本语言：
Java源代码——>编译成.class文件——>Java虚拟机中才能执行。
脚本语言：源码——>解释执行
JS是由浏览器解释执行。

HTML：决定了页面的框架
CSS：美化页面
JS：提供用户交互的

二、JS的组成

ECMAScript：核心部分，定义JS的语法规范。
DOM：document Object Model文档对象模型，主要用来管理页面文档的。
BOM：Browsesr Object Model浏览器对象模型，前进、后退、页面刷新，地址栏，历史记录，屏幕宽高。

三、JS的语法

1.变量是弱类型的：var不限定数据类型
2.区分大小写
3.语句结束之后的分号，可以有，可以没有。
4.写在script标签里。

1.值类型(基本类型)：

字符串（String）
数字(Number)
布尔(Boolean)
对空（Null）
未定义（Undefined）
Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值）

2.引用数据类型：

对象(Object)
数组(Array)
函数(Function)。

3.类型转换：

JS内部自动转换。

4.JS运算符和语句：

（1）运算符和Java一样
“===”全等号：值和类型必须相同。
“ ==”值相等就可以了。
（2）语句和Java一样。
（3）JS输出：
a.alter（）直接弹框
b.document.log()向控制台输出
c.innerHTTML:向页面输出
d.获取页面元素：document.getElementByld(“d的名称”)
（4）JS声明变量：
var 变量名 = 变量值
JS声明函数：
var 函数名称 = function（）{
}
function 函数名称（）{
}

四、JS的开发步骤：

1.确定事件
2.通常事件都会触发一个函数：定义函数
3.函数里面通常都会去操页面元素，做一些交互动作：比如点击、修改图片、动态修改innerHTML属性

JS简单数据校验：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	1.校验用户名，长度不能小于6位
        	确定事件：提交事件onsubmit
        	事件要触发函数checkForm
        	函数中要去做一些校验
        -->
        <script type="text/javascript">
        	function checkForm(){
        		//获取用户输入的内容
        		var input1 = document.getElementById("username")
        		var uValue = input1.value
        		if(uValue.length>=6){
        			
        		}else{
        			alert("对不起，用户名太短了")
        			return false
        		}
        		
        		//邮箱的校验
        		//获取用户输入的邮箱的值
        		var email = document.getElementById("email")
        		var uEmail = email.value;
        		if(/^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/.test(uEmail)){
        			alert("校验成功")
        		
        		}else{
        			alert("校验失败")
        			return false
        		}
        		return true
        	}
        </script>
	</head>
	<body>
		<form action="../小米官网/首页.html"  onsubmit="return checkForm()">
			
			用户名：<input type="text" id="username"/><br />
			邮箱：<input type="text" id="email"/><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

JS中的常用事件：

1.定时器：

setInetval(“test()”,3000)每隔多少毫秒执行一次函数。
setTimeout（“test()”,3000）多少毫秒之后执行一次函数。
定时器调用之后都会返回一个timerID
clearInterval(timerID)
clearTimeout(timerID)

2.表单校验中的常用事件：

onfocus事件：获得焦点事件
onblur事件：失去焦点事件
onkeyup事件：按键抬起事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	1.校验用户名，长度不能小于6位
        	确定事件：提交事件onsubmit
        	事件要触发函数checkForm
        	函数中要去做一些校验
        -->
        <script type="text/javascript">
        	function showTips(){
        		//首先获得要操作的元素
        		var span = document.getElementById("span_username")
        		span.innerHTML = "<font color='red' size='2'> 用户名长度不能小于六位</font>"
        	}
        	function checkUsername(){
        		//获取用户输入的内容
        		var input1 = document.getElementById("username")
        		//对输入的内容进行校验
        		//获得要显示的结果span
        		var span = document.getElementById("span_usernamr")
        		var uValue = input1.value
        		if(uValue.length<6){
        			//显示校验结果
        			span.innerHTML = "<font color='red' size='2'>对不起，用户名太短</font>"
        		}else{
        			span.innerHTML = "<font color='red' size='2'>恭喜您，可用</font>"
        		}
        	}	
        </script>
	</head>
	<body>
		<form action="../小米官网/首页.html"  ">
			
			用户名：<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()"/><span id="span_usernamr"></span><br />
			密码：<input type="password" id="password"/><br />
			邮箱：<input type="text" id="email"/><br />
			确认密码：<input type="password" id="repassword"/><br />
			邮箱：<input type="text" id="email"/><br />
			手机号：<input type="text" id="text"/><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

五、DOM

1.什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

2.什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

3.HTML DOM树：

在这里插入图片描述

4.DOM应用案例——实现省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//准备数据
			var provinces = [
			["深圳市","东莞市","惠州市","广州市"],
			["长沙市","东莞市","惠州市","广州市"],
			["深圳市","东莞市","惠州市","广州市"]
			];
			
			function selectProvince(){
				//得到当前要操作的元素
				var province = document.getElementById("province");
				//得到当前选中的是哪一个省份
				var value = province.value;
				//从数组中取出对应的城市信息
				var cities = provinces[value];
				
				var citySelect = document.getElementById("city");
				
				citySelect.options.length = 0;//清空
				for (var i = 0;i<cities.length;i++) {
		//			alert(cities[i]);
					var cityText = cities[i];
				//动态创建城市元素节点
					//创建option节点
					var option1 = document.createElement("option");
					//创建城市文本节点
					var textNode = document.createTextNode(cityText);
				//添加到城市select中
				option1.appendChild(textNode);//将option节点和文本内容关联起来
				
				citySelect.appendChild(option1);
				}
			}
		</script>
	</head>
	<body>
		<select id="province" onchange="selectProvince()">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		
		<select name="" id="city">
		</select>
	</body>
</html>