零基础入门JAVAweb——前端开发JavaScript基本介绍篇

小罗のdiary

已于 2022-05-08 21:23:23 修改

阅读量3.2k

点赞数 1

分类专栏： javaweb 文章标签： javascript java 前端

于 2022-04-30 00:06:14 首次发布

本文链接：https://blog.csdn.net/m0_57209839/article/details/124498105

版权

javaweb 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

🧑作者简介

📮首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主

🕴职业：👨‍🎓在校大学生

😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步

🏆擅长：单片机的基本原理，java基本原理

🎉🎉欢迎来首页阅读我的博客🎉🎉

📖主要内容

💦💦💦💦💦💦💦💦💦💦💦

💦💦了解JavaScript是什么语言，该语💦💦

💦💦言的特点，和java的区别，使用方💦💦

💦💦式，了解Ajax，了解并使用jquery💦💦

💦💦💦💦💦💦💦💦💦💦💦

📖目录

标记中）

❤️四、JavaScript和java的区别

❤️一、JavaScript的定义

💨JavaScript是一种基于对象和时间驱动并具有安全性能的解释型脚本语言，在web开发中应用广泛。

❤️二、JavaScript的特点

✨1.解释性

💨脚本语言，采用小程序段的方式实现编程，不需要编译，这和java有一点区别

✨2.基于对象

💨可以不用创建对象，直接应用自己已经创建的对象，这和java有一点区别

✨3.事件驱动

💨以事件驱动的方式对客户端输入做出响应，无需经过服务器端

❤️三、JavaScript的使用方式

✨1.直接嵌入（一般在<head>标记中）

🎏（1）.jsp中的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面内嵌入</title>
<script language="javascript">
	alert("页面内嵌入");
</script>	
</head>
<body>
</body>
</html>

🎏（2）结果

✨2.链接外部

🎏（1）Javaweb项目目录

🎏（2）.jsp中和.js中的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接外部</title>
<script language="javascript"src="js.js"></script>
</head>
<body>
</body>
</html>

alert("这是链接外部的JavaScript");

🎏（3）结果

❤️四、JavaScript和java的区别

💨JavaScript的语法和Java的基本相同，但还有一些区别

JavaScript

Java

数据类型

var

int,char,string….

函数

function 函数名(参数){}

数据类型函数名(参数){}

❤️五、Ajax技术

✨1.定义

💨是异步的JavaScript和XML（XML是可扩展标记语言）

✨2.核心技术

💨XMLHttpRequest,该技术具有应用程序接口的JavaScript对象，能够使用http连接一个服务器。

✨3.Ajax流程及图解

🎏（1）传统的web流程

传统的web每次执行操作都要触发一次http请求

🎏（2）Ajax流程

Ajax应用利用JavaScript的调用，将信息传输给Ajax引擎，再由该引擎来决定是否触发http请求

🎏（3）步骤

发送请求->处理服务器响应->处理XML响应(可以看出Ajax工程很繁琐，代码量也很大)

✨4.优点

🎏（1）.减轻服务器负担

🎏（2）.将部分工作利用客户端闲置资源进行处理，节约空间和资源

🎏（3）.无需刷新页面

❤️六、jquery技术

✨1.定义

💨该技术是一套简洁、快速、的JavaScript脚本库，是Ajax的简化版（需下载）

在jQuery中，无论使用哪种类型的选择符都需要从$()开始

💟标记选择器：$(“div”):获取文档中全部的<div>

💟ID选择器：$(“#username”):获取文档中ID属性值username的一个元素

💟类别选择器：$(“.red”):获取文档中CSS类名为red的所有元素

✨2.jquery库的下载

🎏（1）

打开网站：Download jQuery | jQuery

🎏（2）

点击图中圈起来的网址

🎏（3）

复制里面的代码，再创建一个txt文件，将复制的代码黏贴在txt文件中，改后缀名，将txt后缀名改成.js

🎏（4）

将.js文件导入

✨3.jquery的使用

🎏（1）Javaweb项目目录

🎏（2）.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- type表文档格式,src表文件路径 -->
<script type="text/javascript"src="jquery-3.6.0.min.js"></script>
<title>JQuery的使用</title>
<script>
	$(document).ready(function(){//表文档加载完后调用function()函数
		$("a").click(function(){//获取超链接对象，添加单击事件
			alert("我的第一个JQuery脚本");
		});
	});
</script>
</head>
<body>
	<a href="#">弹出提示对话框</a>
</body>
</html>

🎏（3）结果

相信大家到这里应该已经读完了吧！😁😁

觉得写得好的话点个赞再走呗！😊😊

小罗のdiary

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
零基础入门JAVAweb——前端开发JavaScript基本介绍篇

🧑作者简介📮首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主🕴职业：👨‍🎓在校大学生😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步🏆擅长：单片机的基本原理，java基本原理🎉🎉欢迎来首页阅读我的博客🎉🎉📖主要内容💦💦💦💦💦💦💦💦💦💦💦💦💦了解JavaScript是什么语言，该语💦💦💦💦言的特点，和java的区别，使用方💦💦💦💦式，了解Ajax，了解并使用jquery💦💦💦💦💦💦💦💦💦💦💦💦💦❤
复制链接

扫一扫