IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaWEB三:Javascript -> 正文阅读

[JavaScript知识库]JavaWEB三:Javascript

Javascript

简介

  1. 起源

    1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript,因为Netscape与Sun合作,网景公司管理层希望它外观看起来像Java,因此取名为JavaScript。

  2. 特性
    ① 脚本语言

    JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件,而是在程序的运行过程中对源文件逐行进行解释。

    ② 基于对象

    JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是面向对象的三大特性:『封装』、『继承』、『多态』中,JavaScript能够实现封装,可以模拟继承,不支持多态,所以它不是一门面向对象的编程语言。

    ③ 弱类型

    JavaScript中也有明确的数据类型,但是声明一个变量后它可以接收任何类型的数据,并且会在程序执行过程中根据上下文自动转换类型。

    ④ 事件驱动

    JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。

    ⑤ 跨平台性

    JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

一、基础语法

  1. 数据类型

    基本数据类型:与其它语言一致

    引用数据类型:数组[ ],new出来的对象,声明的对象{ }

  2. 变量

    关键字:var

    标识符:严格区分大小写

    变量使用规则

    • 如果使用了一个没有声明的变量,那么会在运行时报错

      Uncaught ReferenceError: b is not defined

    • 如果声明一个变量没有初始化,那么这个变量的值就是undefined

  3. 函数(方法)

    3.1 具体可用函数方法,可查看《网页制作完全手册》 - DHTML方法

    3.2 常见的三种内置函数

    ? ① alert( ):弹出警告框

    ? ② confirm( ):弹出确认框

    ? ③ console.log( ):控制台日志打印

    3.3 函数的声明

    // 直接声明
    function sum(a, b){
        return a + b;
    }
    // 赋给一个引用变量,相当于创建了一个函数对象,最后要加分号,因为这也是一个赋值语句
    var total = function(){
        return a + b;
    };
    

    3.4 函数的调用

    // 函数名调用
    var result = sum(2, 3);
    // 函数对象调用
    var totalResult = total(2,3);
    
  4. 对象

    JavaScript中没有『类』的概念,对于系统内置的对象可以直接创建使用。

    ①使用new关键字创建对象
    		// 创建对象
    		var obj01 = new Object();
    		
    		// 给对象设置属性和属性值
    		obj01.stuName = "tom";
    		obj01.stuAge = 20;
    		obj01.stuSubject = "java";
    		
    		// 在控制台输出对象
    		console.log(obj01);
    
    ②使用{}创建对象
    		// 创建对象
    		var obj02 = {
    			"soldierName":"john",
    			"soldierAge":35,
    			"soldierWeapon":"gun"
    		};
    		
    		// 在控制台输出对象
    		console.log(obj02);
    
    ③给对象设置函数属性
    // 创建对象
    var obj01 = new Object();
    
    // 给对象设置属性和属性值
    obj01.stuName = "tom";
    obj01.stuAge = 20;
    obj01.stuSubject = "java";
    
    obj01.study = function() {
    	console.log(this.stuName + " is studying");
    };
    
    // 在控制台输出对象
    console.log(obj01);
    // 调用函数
    obj01.study();
    
    或:
    // 创建对象
    var obj02 = {
    	"soldierName":"john",
    	"soldierAge":35,
    	"soldierWeapon":"gun",
    	"soldierShoot":function(){
    		console.log(this.soldierName + " is using " + this.soldierWeapon);
    	}
    };
    
    // 在控制台输出对象
    console.log(obj02);
    // 调用函数
    obj02.soldierShoot();
    
    ④this关键字
    • 在函数外面:this关键字指向window对象(代表当前浏览器窗口)
    • 在函数里面:this关键字指向调用函数的对象
    // 直接打印this
    console.log(this);
    
    // 函数中的this
    // 1.声明函数
    function getName() {
    	console.log(this.name);
    }
    
    // 2.创建对象
    var obj01 = {
    	"name":"tom",
    	"getName":getName
    };
    var obj02 = {
    	"name":"jerry",
    	"getName":getName
    };
    
    // 3.调用函数
    obj01.getName();
    obj02.getName();
    
    5、数组
    ① 使用new关键字创建数组
    // 1.创建数组对象
    var arr01 = new Array();
    
    // 2.压入数据
    arr01.push("apple");
    arr01.push("orange");
    arr01.push("banana");
    arr01.push("grape");
    
    // 3.遍历数组
    for (var i = 0; i < arr01.length; i++) {
    	console.log(arr01[i]);
    }
    
    // 4.数组元素反序
    arr01.reverse();
    for (var i = 0; i < arr01.length; i++) {
    	console.log(arr01[i]);
    }
    
    // 5.数组元素拼接成字符串
    var arrStr = arr01.join(",");
    console.log(arrStr);
    
    // 6.字符串拆分成数组
    var arr02 = arrStr.split(",");
    for (var i = 0; i < arr02.length; i++) {
    	console.log(arr02[i]);
    }
    
    // 7.弹出数组中最后一个元素
    var ele = arr01.pop();
    console.log(ele);
    
    ② 使用[]创建数组
    // 8.使用[]创建数组
    var arr03 = ["cat","dog","tiger"];
    console.log(arr03);
    

二、DOM文档对象模型

  1. 对象

    浏览器把HTML文档从服务器上下载下来之后就开始按照**『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』**

  2. DOM树

    第一个读取到的肯定是根标签html,然后是它的子标签head,再然后是head标签里的子标签……所以从html标签开始,整个文档中的所有标签都会根据它们之间的**『父子关系』被放到一个『树形结构』**的对象中。

  3. 节点

    整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

    其实严格来说,JavaScript并不支持真正意义上的『继承』,这里我们借用Java中的『继承』概念,从逻辑上来帮助我们理解各个类型之间的关系。

    组成部分节点类型具体类型
    整个文档文档节点Document
    HTML标签元素节点Element
    HTML标签内的文本文本节点Text
    HTML标签内的属性属性节点Attr
    注释注释节点Comment
  4. DOM操作

    由于实际开发时基本上都是使用JavaScript的各种框架来操作,而框架中的操作方式和我们现在看到的原生操作完全不同,所以下面罗列的API仅供参考,不做要求。

    4.1 在整个文档范围内查询元素节点
    功能API返回值
    根据id值查询document.getElementById(“id值”)一个具体的元素节
    根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
    根据name属性值查询document.getElementsByName(“name值”)元素节点数组
    4.2 在具体元素节点范围内查找子节点
    功能API返回值
    查找全部子节点element.childNodes 【W3C考虑换行,IE≤8不考虑】节点数组
    查找第一个子节点element.firstChild 【W3C考虑换行,IE≤8不考虑】节点对象
    查找最后一个子节点element.lastChild 【W3C考虑换行,IE≤8不考虑】节点对象
    4.3 查找指定元素节点的父节点
    功能API返回值
    查找指定元素节点的父节点element.parentNode节点对象
    4.4 查找指定元素节点的兄弟节点
    功能API返回值
    查找前一个兄弟节点node.previousSibling 【W3C考虑换行,IE≤8不考虑】节点对象
    查找后一个兄弟节点node.nextSibling 【W3C考虑换行,IE≤8不考虑】节点对象
    4.5 属性操作
    需求操作方式
    读取属性值元素对象.属性名
    修改属性值元素对象.属性名=新的属性值
    4.6 文本操作
    需求操作方式
    读取文本值element.firstChild.nodeValue
    修改文本值element.firstChild.nodeValue=新文本值
    4.7 DOM增删改操作
    API功能
    document.createElement(“标签名”)创建元素节点并返回,但不会自动添加到文档中
    document.createTextNode(“文本值”)创建文本节点并返回,但不会自动添加到文档中
    element.appendChild(ele)将ele添加到element所有子节点后面
    parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
    parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
    parentEle.removeChild(childNode)删除指定的子节点
    element.innerHTML读写HTML代码

三、事件三要素

  1. 事件源

    是指哪个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源。

    再或者,可以这样理解, 当你对某个元素执行动作的时候,会触发一系列效果(动画,跳转…),那么这个元素就是事件源

  2. 事件

    是指执行的动作。

    例如,点击,鼠标划过,按下键盘,获得焦点。

  3. 事件驱动程序

    事件驱动程序即执行的结果。

    例如,当你点击cdsn图标的时候,会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。

四、事件的执行与书写

  1. 执行事件的步骤

    1.1 在页面上执行某事件 例:onclick

    1.2 获取发生该事件所在的事件源 event.srcElement

    1.3 确认该事件源的类型

    1.4 执行该事件所绑定的驱动程序

  2. 构建主程序的步骤

    2.1 获取窗口内的节点对象,直到事件源

    2.2 在事件源上绑定事件

    2.3 将相应的驱动程序赋值给该事件

  3. 构建驱动程序的步骤

    3.1 确定事件的状态event、确定有事件对应的事件源event.srcElement、确定事件源的类型event.srcElement…tagName==“节点类型(如:TD)”

    3.2 为事件源event.srcElement赋值对应的引用类型变量,要与主程序中的某变量相对应。

    3.3 以该事件源为基点,进行相应的功能编辑

    注:3.1和3.2也可能折合为2.1

五、代码实例

  1. 功能

    实现水果铺的日常统计表格,包括水果种类、单价、数量、小计、总计,并可以实时更新单价,并自动更新小计和总计。

  2. html
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" href="F:\Java\JavaWEB\前端技术\CSS\demo5.css">	
    	<script type="text/javascript" src="F:\Java\JavaWEB\前端技术\Javascript\demo1.js"></script>
    	</head>
    	<body>	
    		<div id="div_contain">
    			<div id="div_fruit_list"> 				
    				<table id="tbl_fruit">
    					<tr>
    						<th>名称</th>
    						<th>单价</th>
    						<th>数量</th>
    						<th>小计</th>
    						<th>操作</th>
    					</tr>
    					<tr>
    						<td>苹果</td>
    						<td>5</td>
    						<td>20</td>
    						<td>100</td>
    						<td ><img src="F:\Java\JavaWEB\前端技术\HTML\删除图标.jpg" class="delImg"/></td>
    					</tr>
    					<tr>
    						<td>西瓜</td>
    						<td>3</td>
    						<td>20</td>
    						<td>60</td>
    						<td><img src="F:\Java\JavaWEB\前端技术\HTML\删除图标.jpg" class="delImg"/></td>
    					</tr>
    					<tr>
    						<td>菠萝</td>
    						<td>4</td>
    						<td>25</td>
    						<td>100</td>
    						<td><img src="F:\Java\JavaWEB\前端技术\HTML\删除图标.jpg" class="delImg"/></td>
    					</tr>
    					<tr>
    						<td>榴莲</td>
    						<td>3</td>
    						<td>30</td>
    						<td>90</td>
    						<td><img src="F:\Java\JavaWEB\前端技术\HTML\删除图标.jpg" class="delImg"/></td>
    					</tr>
    					<tr>
    						<td>总计</td>
    						<td colspan="4">999</td>						
    					</tr>
    				</table>
    			</div>
    		</div>
    	</body>
    </html>
    
  3. css
    body{
    	margin:0;
    	padding:0;
    	background-color:antiquewhite;
    }
    div{
    	position:relative;
    	float:left;
    }
    #div_contain{
    	width:80%;
    	height:100%;
    	border:1px solid blue;
    	margin-left:10%;
    	border-radirs:20px;
    	background-color:lavenderblush;
    }	
    #div_fruit_list{
    	border:1px solid gray;
    	width:60%;
    	margin-left:20%;
    	margin-top:20%;
    
    }
    #tbl_fruit{    
    	width:100%;
    	line-height:28px;
    }
    #tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    	border:1px solid gray;
    	border-collapse:collapse;
    	text-align:center;
    	font_size:16px;
    	font-family:"华文中宋";
    	font-weight:lighter;
    	color:threeddarkshadow;
    }
    .delImg{
    	height:24px;
    	width:24px;
    }
    
  4. js
    // 将js代码全部写到js文件中
    
    // 一、js主代码
    // 1.window:整个浏览器窗口;onload:加载;function():匿名方法
    window.onload = function(){
    	updateZJ();
    	// 当页面加载完成,我们需要绑定各种事件
    	// 2.在文档节点(document)中根据id获取到表格(fruitTbl)
    	var fruitTbl = document.getElementById("tbl_fruit");
    	// 3.获取表格中的所有的行(事件源)
    	var rows = fruitTbl.rows;
    	for(var i = 1; i < rows.length-1; i++){
    		var tr = rows[i];
    		// 3.1 绑定鼠标悬浮设置背景颜色事件
    		tr.onmouseover = showBGColor;
    		tr.onmouseout = clearBGColor;
    		// 4 获取单元格节点(事件源)
    		var cells = tr.cells;
    		var priceTD = cells[1];
    		// 4.1 在priceTD事件源上绑定鼠标悬浮变小手事件		
    		priceTD.onmouseover = showHand;
    		// 4.2 在priceTD事件源上绑定鼠标点击事件
    		priceTD.onclick = editPrice;
    		// 8.绑定删除小图标的点击事件
    		var img = cells[4];
    		img.onclick = deleteTr;
    		
    	}
    }
    
    
    // 二、js方法(事件驱动程序)
    
    // 1 当鼠标悬停时,显示背景颜色
    function showBGColor(){
    	// event:当前发生的事件 event.srcElement:事件源,事件发生在哪个节点上  event.srcElement.tagName:TD
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		var td = event.srcElement;
    		// td.parentElement:获取td的父元素 -> tr
    		var tr = td.parentElement;
    		// 语法参考:《网页制作完全手册》
    		// 如果想要通过js代码设置某元素节点(代表一个HTML标签)的样式,则需要加上.style。
    		tr.style.backgroundColor = "navy";
    
    		// tr.cells表示获取这个tr中所有的单元格
    		var tds = tr.cells;
    		for(var i = 0; i < tds.length; i++){
    			tds[i].style.color = "red";
    		}
    	}
    }
    
    // 2 当鼠标离开时,恢复原样
    function clearBGColor(){
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		var td = event.srcElement;
    		var tr = td.parentElement;
    		tr.style.backgroundColor = "transparent";
    		var tds = tr.cells;
    		for(var i = 0; i < tds.length; i++){
    			tds[i].style.color = "threeddarkshadow";
    		}
    	}
    }
    
    // 3 当鼠标悬停在单价单元格时,鼠标变为小手
    function showHand(){
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		var td = event.srcElement;
    		td.style.cursor = "hand";
    	}
    
    }
    // 4 当鼠标点击事件
    function editPrice(){
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		// 4.1 获取事件源
    		var priceTD = event.srcElement;
    		/* 
    			这个if大循环是确保priceTD的第一个子节点不为空,且性质是文本,
    			这样再次点击该单元格时,就不会因子节点已变更为元素节点而导致整个方法的功能出现bug
    		*/
    		if(priceTD.firstChild && priceTD.firstChild.nodeType=="3"){
    			// innerText 表示设置或获取当前节点的内部文本
    			// 4.2 获取当前节点(事件源)的内部文本
    			var oldPrice = priceTD.innerText;
    			// innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
    			// 4.3 该行代码等同于:<td><input type='text' size='4'/></td>
    			priceTD.innerHTML = "<input type='text' size='4'/>";
    			// 4.4 为新文本框赋值
    			// 4.4.1 获取priceTD节点的子节点
    			var input = priceTD.firstChild;
    			// 4.4.2 if语句确保其子节点(子标签)是INPUT类型的
    			if(input.tagName=="INPUT"){
    				input.value = oldPrice;
    				// 4.4.3 选中输入框内部的文本
    				input.select();
    				// 4.5 绑定输入框失去焦点事件,失去焦点,更新单价
    				input.onblur = updatePrice;
    				// 9 在输入框上绑定键盘按下的事件,此处确保用户输入的是数字
    				input.onkeydown = ckInput;
    		
    
    			}
    		}
    	}
    }
    
    // 5 更新单价
    function updatePrice(){
    	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
    		// 5.1 首先指定事件源
    		var input = event.srcElement;
    		// 5.2 获取事件源的最新的值
    		var newPrice = input.value;
    		// 5.3 通过事件源调出单价的单元格
    		var priceTD = input.parentElement;
    		// 5.4 将更新后的新值赋给单价单元格,得到更新单价的效果
    		priceTD.innerText = newPrice;
    
    		// 5.5 更新当前行的小计单元格的值。将priceTD.parentElement放入函数的参数中,就是为了锁定该行
    		updateXJ(priceTD.parentElement);
    	}
    }
    
    // 6 更新小计单元格
    function updateXJ(tr){
    	if(tr && tr.tagName=="TR"){
    		var tds = tr.cells;
    		var price = tds[1].innerText;
    		var count = tds[2].innerText;
    		// innerText获取到的值的类型是字符串类型,因此需要类型转换,才能进行数学运算
    		var xj = parseInt(price)*parseInt(count);
    		tds[3].innerText = xj;
    
    		// 更新总计,也可用在最开始
    		updateZJ();
    	}
    }
    
    // 7 更新总计的方法
    function updateZJ() {
    	var fruitTbl = document.getElementById("tbl_fruit");
    	var rows = fruitTbl.rows;
    	var sum = 0;
    	for(var i=1; i < rows.length-1; i++){
    		var tr = rows[i];
    		var td = tr.cells;
    		var newPrice = parseInt(td[3].innerText);
    		sum = sum + newPrice;
    	}
    	rows[rows.length-1].cells[1].innerText = sum;
    }
    
    // 8 通过删除小图标而删除行
    function deleteTr() {
    	if(event && event.srcElement && event.srcElement.tagName=="IMG") {
    		var img = event.srcElement;
    		if(window.confirm("是否确认删除当前库存记录")){
    			var tr = img.parentElement.parentElement;
    			var fruitTbl = document.getElementById("tbl_fruit");
    			fruitTbl.deleteRow(tr.rowIndex)
    			updateZJ();
    		}		
    	}
    }
    
    // 9 检验键盘按下的值的方法
    function ckInput() {
    	// keyCode:是event属性,用于设置或获取与导致事件的按键关联的 Unicode 按键代码。 
    	/*
    		0 ~ 9 : 48 ~ 57
    		backspace: 8
    		enter: 13
    	*/
    	var kc = event.keyCode;
    	console.log(kc);
    	// returnValue 设置或获取事件的返回值。默认值是真,执行该事件;false:绑定在事件源上的默认行为会被取消 
    	if(!((kc>=48&&kc<=57) || kc==8 || kc==13)) {
    		event.returnValue=false
    	}
    	if(kc == 13){
    		// blur(): 使元素失去焦点并触发 onblur 事件。在4的鼠标点击程序中,已经给onblur绑定了驱动程序
    		event.srcElement.blur();
    	}
    
    }
    

参考资料:

  1. 第三章 JavaScript | 代码重工 (gitee.io),第一、二部分的笔记摘录于此

  2. javascript的事件三要素_清水-CSDN博客_事件三要素,第三部分摘录于此

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-26 11:22:00  更:2022-02-26 11:24:35 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:28:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码