JavaScript精简之说

最新推荐文章于 2024-08-18 16:27:39 发布
最新推荐文章于 2024-08-18 16:27:39 发布
阅读量242 收藏
点赞数
文章标签： json 前端 java ViewUI
原文链接：https://my.oschina.net/zcysxj/blog/880196
版权

JavaScript详说

一：JavaScript概述：

      首先JavaScript是一种脚本语言。我们平时在做网站的时候，前端使用HTML和CSS样式，后台可能用PHP或者是JSP......，那么JavaScript是负责什么呢？她可以修改HTML代码（改善用户体验）、可以在不刷新页面的情况下与服务器进行交互、还可以存储数据。 前面我们说到的改善用户体验这一块，JavaScript更是有JQuery库，对于页面美化效果更是一件让人津津乐道的事情（我们暂且先不谈论JQuery）。

二：JavaScript如何写？写在哪？

      JavaScript如何写：和面向对象语言Java相似，JavaScript也有函数（方法）、变量、条件、循环语句......

      写在哪：和CSS样式表相似。JavaScript可以有：内联脚本代码、嵌入式脚本代码、外联时代码。 他们的优先级是：内联>嵌入>外联。

三：JavaScrip对DOM元素的操作：

185749_RyqZ_3322616.png

四：JavaScript对DOM元素的定位：

190842_QEQV_3322616.png

五：JavaScript处理DOM元素中的属性节点：

191621_D2Sd_3322616.png

六：JavaScript处理文本节点可以使用innerHTML="";的方法

对上面的小结（代码），下面做的案例是，在一个div中动态的创建一个元素，并且写上Text文本，最后添加属性，并且运用css样式修饰该节点：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	//页面准备完成便新建一个元素
	window.onload=function(){
		//在对DOM元素的操作时，不管是，新建一个元素还是删除一个元素，
		//一定要建立在其父节点的基础上
		var target=document.getElementById("div1");
		//新建一个<p>元素
		var newDom=document.createElement("p");
		//新建一个文本元素
		var newText=document.createTextNode("这是新的DOM元素");
		//将文本元素添加到DOM元素中
		newDom.appendChild(newText);
		//将新建的DOM元素添加到父节点中
		target.appendChild(newDom);
	};

	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

七：HTML中节点之间的关系，以及常用操作节点的方法：

193755_x4bV_3322616.png

八：JavaScript有很多常用的数据类型，这里和Java是一样的，我说一下关于数组：

（有一点需要着重说的是：JavaScript中没有int,boolean...因为JavaScript对于变量的是弱类型的，只要关键字var声明该变量就好。这样做有好处也有坏处：坏处就是，在后期维护代码的时候，有时候不太知道这个变量到底装的是什么呢；优点就是，声明变量变得更加的方便）

      1、Java中的数组定义：String[] str=new String[]{"张三",“李四","王五"};

           JavaScript中数组的定义：var str=["张三",“李四","王五"];

      2、下面在代码中说明数组中各个方法的作用:  （下面使用了join、slice、pop、concat、shift、unshift方法）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	//定义两个一维数组
	var str1=["Tim","Peter","Json"];
	var str2=["SSH","Java","Ajax"];
	//输出Tim,Peter,Json
	alert(str1);
	//使用join方法
	//输出Tim Peter Json（将都好换成了空格）
	alert(str1.join(" "));
	//使用Slice方法，作用，选取slice(index,index2),下标为index到index2的数据，包括
	//index不包括index2，其中第二个参数省略代表，一直到最后，包括输出最后一个
	//下面这句话输出：Peter
	alert(str1.slice(1,2));
	//shift和unshift使用
	//输出：删除对头元素:Time  ,原数组变成了：Peter,Json  
	alert("删除对头元素："+str1.shift()+"  ,原数组变成了："+str1);
	//输出  3  Annay,Peter,Json
	alert("给str1添加一个对头："+str1.unshift("Annay")+" ,原数组变成了："+str1);
	//输出：Json  Annay,Peter
	alert("移除str1最后一个元素："+str1.pop()+"，原数组变成了："+str1);
	//使用concat拼接两个数组 输出Annay,Peter,SSH,Java,Ajax
	alert(str1.concat(str2));
	</script>
</head>
<body>


</body>
</html>

九：JavaScript中灵活的对象（比Java中的对象灵活的多）：

      为什么说‘灵活’，这是因为：JavaScript中的对象里面可以存放任意类型的数据，布尔类型，字符串类型，数组类型，甚至是一个函数。最后在脚本中，如果想要访问对象里面的数据，可以直接通过对象名称.数据前面的key即可。

十：网络存储数据：

      1、首先必须要说的是，我们看到网络存储数据，大家很可能会想到使用cookies技术，事实上，cookies这项技术非常的不安全。使用cookies保存一些用户隐私信息是绝对不推荐的；

      2、现在很多浏览器支持用户关闭cookies的方式，如果Web开发中还涉及了cookies这门技术，那样的话还能实现功能的话就是无稽之谈了。

      3、可以使用localStorage和sessionStorage来替代cookies存储，下面展示一下，localStorage的用法，贴上代码：

    //存入一条数据
	localStorage.setItem("name","Tim");
	//输出Time
	alert(localStorage.getItem("name"));
	localStorage.removeItem("name");
	//输出null
	alert(localStorage.getItem("name"));

十一：JavaScript中几个函数的区别：（匿名函数、回调函数、普通函数）：

         1、普通函数：关键字function来标识，要有一个函数名称（和匿名函数最大的区别），还有一对大括号包裹上一些语句，便是普通函数了。

         2、回调函数：回调函数也非常的好理解，就是一个函数，在另一个函数中被触发调用便是回调函数了。

         3、匿名函数：首先我们要对变量的作用域有所了解（全局变量和局部变量就是一个范例），匿名函数，他也是一种函数，只不过没有函数名称而已，因为没有名称所以不能靠调用，所以匿名函数建立之后，函数里面的语句会自动执行。那么，你是否在想，既然有那么大的局限，JavaScript还要引入匿名函数有什么作用呢：问的好。我再开头处已经暗示了。加入你有一些变量，不在其他普通函数中，但又不想让他成为全局变量，那么这个时候最好的方式就是将变量放在匿名函数中了。

十二：JavaScript中事件监听器：

          步骤1：首先得到某一个元素的节点；

          步骤2：通过if判断，当前客户使用的浏览器是否支持addEventListener，如果支持，那么通过得到的DOM元素.addEventListener("事件","匿名函数",false/true)如果当前客户端不支持addEventListener则使用attachEvent("事件","匿名函数");

          步骤3：使用完毕之后，可以解除该事件监听，这和步骤2有点相似。首先，通过该DOM元素，在if中判断.removeEventListener("事件","匿名函数",false/true)，如果不存在，那么则使用detachEvent("事件","匿名函数")来解除事件。

十三：JavaScript中有很多事件处理，分为几类：键盘处理事件，焦点处理事件，鼠标处理事件和数据改变事件。这里比较可以查看W3C来学习一下，JavaScript中的事件。

十四：终于讲到了一个重点内容：Ajax（异步通信）。她的作用非常多。最让人着迷的就是她的响应机制。 无刷新，更新页面。

          既然，Ajax可以在无刷新的可以和服务器通信，那么首先了解一下，正常情况下，客户端是如何和服务器通信的呢？请看图片：

          211752_CyxU_3322616.png

          看一下我绘的X-Mind，对Ajax开发流程图：

213125_CmuV_3322616.png

看完上面的理论知识，现在，耐心的结合理论，看完我下面给出的案例。你一定会高清Ajax的来龙去脉。

下面贴上一个简单的实例吧：

功能介绍：利用Ajax完成客户上传图片的实时预览。

首先，先给出前端代码（不要着急，我会在重要的地方都加上注释）：

/*

    前台所做的事情：首先先创建一个表单，在表单上，首先出现一个空白头像的图片，但客户点击浏览完图像之后，Ajax大显神威，将input框中的value取到，后然进行正则表达式将‘\’换成‘/’（因为JavaScript中没有replaceAll方法，想要全部替换只能使用正则表达式和replace方法替换全部），Ajax将数据发送给后台，后台进行处理之后，将地址返回给Ajax，最后，Ajax拿到服务器响应之后，动态的创建一个img元素，将服务器返回的地址传入，这样，客户刚刚浏览的图片就可以异步无刷新的情况下展示出。（不要忘了让起初的那张空白头像hidden吧）。

*/

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.displayElement{
	display:hidden;
}
.newStyle{
	position:absolute;
	top:0px;
	left:5px;
}
</style>
<script type="text/javascript">
	//声明一个XMLHttpRequest对象（注意浏览器版本）
	var XMLHttp;
	function getHttpObject(){
		if(window.XMLHttpRequest){
			XMLHttp=new XMLHttpRequest();
		}else{
			XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return XMLHttp;
	}
	//这是<input type="file" onchange="finish()">
	function finish(){
		var targetValue=document.getElementById("input1").value;
		if(targetValue!==""){
			//在这一步中获取数据 
			//tomcat对URL 中的中文不认识 
			var newValue;
			//JS中没有replaceAll的方法，所以，必须使用真则表达式和raplace连用，才可以全部替换 
			newValue=targetValue.replace(new RegExp("\\\\",'gm'),"/");
			document.getElementById("p1").innerHTML="地址为："+targetValue;
			//这是服务器端地址，这里我们使用的是Get请求方式，因此，KeyWord要拼接在URL中 
			var url="http://localhost:8080/Project-ajax-02/PicPath?KeyWord="+newValue;
			//调用getHttpObject方法，得到XMLHttpRequest对象 
			XMLHttp=getHttpObject();
			//打开与服务器的链接 
			XMLHttp.open("GET",url,true);
			//因为使用的是Get方式，所以，参数都已经拼装在了URL中，所以这个地方的send中不需要再
			//发送参数了。加入我们使用的是POST方式，那么这个地方还要注意的是，我们必须要写一个
			//setRequestsHeader();方法了。 
			XMLHttp.send(null);
			//在对服务器连接进行监听，并且写上一个回调函数。注意，这个地方是将callback整个函数赋值
			//给XMLHttp.onreadystatechange，所以callback函数，不要加上‘（）’了。 
			XMLHttp.onreadystatechange=callback;
		}
	}
	function callback(){
		if(XMLHttp.readyState==4 && XMLHttp.status==200){
			//先让一开始页面上的空白头像隐藏 
			document.getElementById("noPic").className="displayElement";
			//动态的生成一个图片节点 
			var img=document.createElement("img");
			img.setAttribute("width",100);
			img.setAttribute("height",100);
			//新创建的节点，所需要的样式 
			img.className="newStyle";
			//使用responseText方法，得到服务器传递来的地址，然后通过setAttribute方法，将src放入节点中 
			img.setAttribute("src",XMLHttp.responseText);
			var body=document.getElementsByTagName("body")[0];
			//将新产生的节点放入父节点中，就可以展示了 
			body.appendChild(img);
		}
	}
</script>
</head>
<body>
<img id="noPic" alt="" width="100" height="100" src="picture/empty.png"><br/>
<form action="" enctype="multipart/form-data">
	头像：<input type="file" id="input1" name="file" onchange="finish(this)"><br>
	姓名：<input type="text" name="name1">
	<input type="submit" value="提交">
</form>	
<p id="p1"></p>
</body>
</html>

其次，给出后台代码：

/*

  相比刚刚的前台，后台的代码就简单了很多，只要将Ajax传递的数据，传递给Ajax就行。

*/

package njcc.action;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/PicPath")
public class GetPic extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String keyWord=req.getParameter("KeyWord");
		if(keyWord!=null && !keyWord.equals("")){
			resp.getWriter().write(keyWord);
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		super.doGet(req, resp);
	}
	
}

最后，让我们运行项目，查看结果吧：

235207_wyge_3322616.png

 

235222_4Cvg_3322616.png

这样的例子还有很多，比如说，实现百度中的查找框，你可以把所有的关键字封装成JSON数据，放在后台，前台呢，随着搜索框使用AJax，不断的和后台交互，最终实现，百度搜索框的功能，快动手试试看吧~

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/zcysxj/blog/880196

chungong6831
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript之学会吝啬 精简代码
10-29
javascript 之吝啬精简代码 javascript 之吝啬精简代码是指在前端开发中，学习如何吝啬自己的代码，写出更加简洁高效的代码。下面是相关知识点的总结： 一、吝啬代码 吝啬代码是指在编写代码时，尽量少用代码实现...
javascript 数组精简技巧小结
10-15
JavaScript 数组是编程中最常用的数据结构之一，尤其在前端开发中不可或缺。这篇文章总结了13个实用的JavaScript数组操作技巧，旨在帮助开发者提高代码效率和简洁性。 1. **删除数组的重复项**：在处理包含重复元素...
javascript 短路法代码精简
10-29
JavaScript中的短路法是一种在逻辑表达式中利用`&&`（与）和`||`（或）操作符的特性来简化代码和提高效率的技术。这种技术尤其适用于处理条件语句，如`if...else`结构。在理解短路法之前，我们需要先了解`&&`和`||`...
安企CMS多站点迁移教程
no_reg的博客
08-15 382
【代码】安企CMS多站点迁移教程。
JWT（JSON Web Token）工作原理及特点
modelsetget的博客
08-18 299
总结了JWT的基本概念、结构、工作流程、优势以及一些深入思考问题，希望对您理解JWT有所帮助。
MySQL中处理JSON数据:大数据分析的新方向
Chujun123528的博客
08-18 768
灵活性：JSON数据类型允许你在单个列中存储复杂的数据结构，如数组和嵌套对象，这减少了需要创建多个表来存储相关信息的必要性。查询能力：MySQL为JSON数据类型提供了一系列内置的函数，如, , , , , 等，使得查询和修改JSON数据变得非常便捷。索引支持：MySQL支持为JSON文档中的特定路径创建虚拟列（Generated Columns），然后可以在这些虚拟列上创建索引，从而加速基于JSON内容的查询。性能优化：随着MySQL的不断改进，对JSON数据的处理性能也在不断提高。虽然与专门的NoSQL
java 获取request中的json请求体
qq_37741426的博客
08-14 322
java 获取request中的json请求体
HarmonyOS笔记4：从云数据库获取数据
userhu2012的博客
08-14 1188
移动应用获取数据的方式主要有： 1.从网络中获取数据接口API。 2.从华为云数据库获取云数据库的资源。 3.从移动终端直接获取本地的数据 在HarmonyOS笔记3中已经完成了方式一从网络中获取数据接口API的方式。在本篇笔记中，将讨论从云数据库中获取数据。
hive sql 处理多层 json 数组
第一片心意的博客
08-15 833
通过 hive sql，展开包含多层 json 数组的字符串，然后获取到每个子 json 中的值。
C#基础：JSON和字符串、字典、实体类的相互转化方案
m0_67412019的博客
08-14 658
备注：可直接在控制台输出，不需要引用第三方nuget包。
Protobuf和JSON之间的选择指南
极道Jdon的技术博客
08-17 578
最后，需要注意的是，使用 Protobuf 时，需要特殊的架构感知客户端和其他工具，而对于 JSON，则不需要特殊的客户端，因为 JSON 是纯文本格式。但是，如果我们的项目需要对 JSON 数据进行严格验证，我们可以使用JSON Schema，这是一个用于定义和验证 JSON 数据结构的强大工具。虽然它提供了显着的好处，但它的使用是可选的。在本文中，我们探讨 JSON 和 Protocol Buffers 数据格式之间的主要区别，以便在为我们的应用程序制定数据编码策略时做出明智的决策。
FastJson JSON源码学习
家住海边，见过大风大浪
08-16 463
andor是Type的子接口，表示一个有参数的类型，例如Map<K,V>等。但实现上并不直接表示和Map<K,V>等，而是表示和等这种具体的类型。是不是看着眼熟，其实这就是我们常说的泛型。而代表的是一个泛型的实例，我们就称为“泛型实例”吧。当创建泛型P）时，将解析P），并且递归地创建PString实现这个接口的“类”必须实现一个equals()String）也相同的两个“类”等同起来。
C++ 设计模式——模板方法模式
qq_68194402的博客
08-15 655
模板方法模式是一种行为设计模式，它定义了一个算法的骨架，而将一些步骤延迟到子类中。通过这种方式，模板方法允许子类在不改变算法结构的情况下重新定义算法的某些特定步骤。
鸿蒙应用程序框架基础
gitzzp的博客
08-17 1059
pack.info文件猫叔了App Pack中每个HAP和HSP的属性，包含App中的bundleName和versionCode信息，以及Module中的name、type和abilites等信息。每个应用中至少包含一个.hap文件，可能包含若干个.hsp文件，也可能不包含。一个应用中的所有.hap文件和.hsp文件合并在一起称为一个Bundle，其对应的bundleName是应用的唯一标识。当应用发布上架到应用市场时，需要将Bundle打包为一个.app文件用于上架，这个.app文件称为。
【问题记录+总结】VS Code & Tex Live 2024 & Latex Workshop & Springer模板----更新ing
08-14 139
某中意期刊，只有Latex。之前只简单用过Latex玩和markdown写csdn文章，这次正儿八经用latex，还真的低估了难度，submission ddl整推了一周。
Vue3里如何使用本地lottie动画以及如何更优雅的批量引入图片
xChive的博客
08-17 399
介绍了 Lottie 动画及其在 Vue 3 项目中的使用方法，重点解决了批量引入图片和相对路径问题，确保动画正常显示。
SpringBoot注解大总结
最新发布
qq_65095414的博客
08-18 563
接受get请求执行注解下的方法（get/delete 请求参数一般拼接到url后面）也可以使用请求体但要规范不能使用请求体1.从http中读请求体中的数据 ,底层是HttpServletRequest 获取2.自动把JSON字符串映射成java中的对象@Post/pubpost/pub 请求参数一般放在请求体里面，且以JSON格式进行传输（post插入请求使用）Target->类上/方法上类上->提取controller中的一个重复的路径。
总结常见报错信息
m0_68903702的博客
08-16 316
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
JavaScript精简版：揭示编程奥秘，引领Web开发新潮流
《JavaScript王者归来 精简版》是一本全面且深入的JavaScript教程，不仅提供了技术知识，还传达了作者对编程艺术的理解，对于想要在JavaScript世界中探索的读者来说，是一本不可多得的参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值