JavaEE学习之走进JS

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量178 收藏 1
点赞数
文章标签： javascript 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ozl520/article/details/111649867
版权

JS

JavaScript概述

1.JavaScript简介

  • JavaScript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型语言，内置支持语言。它的解析器被称为JS引擎，为浏览器的一部分，广泛用于客户的脚本语言，最早在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能

2.JavaScript发展史

在这里插入图片描述

3.JavaScript环境搭建

  • 两种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--环境创建方式1-->
    <script type="text/javascript">
        document.write("hello world");
    </script>
    <!--环境创建方式2-->
    <script type="text/javascript" src="js1.js"></script>
</body>
</html>

在这里插入图片描述

JavaScript基本语法

1.变量声明

  • 在JavaScript中，任何的变量关键字都用var关键字来声明，var是variable的缩写
  • var是声明关键字，a是变量名，语句以分号结尾
  • 这里值得注意是，JavaScript中的关键字，不可以作为变量名，就像在Java中一样
    在这里插入图片描述
  • JavaScript的部分关键字
    在这里插入图片描述

2.基本类型

  • 变量的基本类型又有Number，String，Boolean，Underfined，Null五种
  • 来声明一个数字Number类型，如下：
    在这里插入图片描述
  • 来声明一个字符串String类型
    在这里插入图片描述
  • 来声明一个布尔Boolean类型
    在这里插入图片描述
  • 在Java中，当一个变量未被初始化的时候，Java中null或者基本数据类型的默认值
  • 在JavaScript中，当一个变量未被初始化的时候，它的值为undefined

3.引用类型

  • 在Java中需要类定义，然后实例对象：
    在这里插入图片描述
  • 在JavaScript中对象可以直接写出来：
    在这里插入图片描述

4.数组类型

  • 数组就是和我们之前理解的数组概念一致，而在JavaScript中称为Array类型
  • 我们说JSON可以标记一个对象，那么它同样可以标记一个数组，就是java基础中我们学过的JSONArray
    在这里插入图片描述

5.运算符

  • 逻辑运算符
名称运算符描述
与&&要求表达式两边的都为true才是true
或||要求表达式左右两边只要有一个为true，整体结果就为true
非！将布尔值取反
  • 关系运算
名称运算符
等于==
小于<
小于或等于<=
大于>
大于或等于>=
不等于!=
值和类型相同===
  • 单目运算
名称运算符描述
自增++变量每次加1，再赋给变量
自减–变量每次减1，在赋给变量
  • 双目运算
    在这里插入图片描述
  • 三目运算符： ？ ：
    在这里插入图片描述

6.条件分支结构

  • if-else分支
    在这里插入图片描述
  • switch分支
    在这里插入图片描述

7.循环结构

  • for循环
    在这里插入图片描述
  • while循环
    在这里插入图片描述
  • do-while循环
    在这里插入图片描述
  • break与continue关键字
    • break用于结束循环
    • continue用于结束本次循环

8.函数

  • 函数定义：用function关键在声明，后面是方法名字，参数列表不写var。整个方法不写返回值类型
    在这里插入图片描述
  • 方法的定义与调用举例
    在这里插入图片描述

9.常见弹窗函数

  • alert弹框：这是一个只能点击确定按钮的弹窗
  • alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个x关闭
    在这里插入图片描述
  • confirm弹框：这是一个你可以点击确定或者取消的弹窗
  • confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个x关闭，都返回false
    在这里插入图片描述
  • prompt弹框：这是一个你可以输入文本内容的弹窗
    • 第一个参数是提示信息，第二的参数是用户输入的默认值
  • 当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null在这里插入图片描述

10.事件

事件名称描述
onchangeHTML元素内容改变
onclick用户点击html元素
onmouseover用户将鼠标移入一个html元素中
onmousemove用户在一个html元素上移动鼠标
onmouseout用户从一个HTML元素上移开元素
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载
onsubmit表单提交

11.正则表达式

  • 正则表达式是描述字符模式的对象
  • 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具
  • 语法：
    • var patt=new RegExp(pattern,modifiers);
    • var patt=/pattern/modifiers
  • 修饰符：用于执行区分大小写和全局匹配
修饰符描述
i执行对大小写不敏感匹配
g执行全局匹配
m执行多行匹配
  • 方括号：用于查找某个范围内的字符
表达式描述
[abc]查找括号之间的任何字符
[^abc]查找任何不在方括号之间的字符
[0-9]查找任何从0-9的数字
[a-z]查找任何从小写a-z的字符
[A-Z]查找任何从大写A-Z的字符
[A-z]查找任何从大写·A到小写z的字符
[adgk]查找给定集合内的任何字符
[^adgk]查找给定集合外的任何字符
（red|blue|green）查找任何指定的选项
  • 元字符：是拥有特殊含义的字符
元字符描述
.查找单个字符，除了换行和结束符
\w查找单词字符
\W查找非单词字符
\d查找数字
\D查找非数字
\ s查找空白字符
\S查找非空白字符
\b查找单词边界
\B查找非单词边界
\0查找null字符
\n查找换行符
\ f查找换页符
\r查找回车符
\t查找制表符
\xxx查找以八进制xxx规定的字符
\xdd查找以十六进制dd规定的字符
\uxxx查找以十六进制xxx规定的Unicode字符
  • 量词：用于表示重复次数的含义
量词描述
n+匹配任何包含至少一个n的字符串
n*匹配任何包含0个或多个n的字符串
n？匹配任何包含0个或一个n的字符串
n{X}匹配包含X个n的序列的字符串
n{X,}X是一个正整数，前面的模式n连续出现至少X次时匹配
n{X,Y}X和Y为正整数，前面模式n连续出现至少X次，最多Y次时匹配
n$匹配任何结尾为n的字符
^n匹配任何任何开头为n的字符
?=n匹配任何其后紧接指定字符串n的字符串
?!n匹配任何其后没有紧接指定字符串n的字符串
  • RegExp对象方法
方法描述
compile编译正则表达式
test检索字符串中指定的值，返回true或false
exec检索字符串中指定的值，返回找到的值，并确定其位置
  • 支持正则表达式的String对象方法
方法描述
search检索与正则表达式相匹配的值
match找到一个或多个正则表达式的匹配
replace替换与正则表达式匹配的子串
split把字符串分割为字符串数组
  • 正则表达式的使用
    • test方法：搜索字符串指定的值，根据结果并返回真或假
      在这里插入图片描述
    • exec()方法：检索字符串中指定的值，返回值是被找到的值。如果没有发现匹配，则返回null
      在这里插入图片描述

JavaScript的DOM

1.概述

  • 通过HTML DOM，可访问JavaScript HTML所有的元素
  • 当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
  • HTML DOM模型被构造为对象的树：
    在这里插入图片描述
  • 可通过编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML
    • JavaScript能够改变页面中的所有HTML元素
    • JavaScript能够改变页面中的所有HTML属性
    • JavaScript能够改变页面中的所有CSS样式
    • JavaScript能够对页面中的所有事件作出反应

2.查找HTML元素

  • 通常，通过JavaScript，您需要操作HTML元素
  • 为了做到这些事情，您必须要找到该元素，有三种办法来做这个事情：
    • 通过id找到HTML元素
      • 在DOM中查找HTML元素的最简单方法，是通过使用元素的id
      • 方法：document.getElementById(“id属性值”);
      • 如果找到该元素，则该方法将以对象（在x中）的形式返回该元素
      • 如果未找到该元素，则x将包含null
    • 通过标签名找到HTML元素（返回数组）
      • 方法：getElementsByTagName（“合法的元素名”）
    • 通过类名找到HTML元素（返回数组）
      • 方法：getElementsByClassName(“class属性值”)

3.改变HTML

  • 改变HTML输出流：document.write（）可用于直接向HTML输出流写内容
    在这里插入图片描述
  • 改变HTML内容：使用innerHTML属性
    在这里插入图片描述
  • 改变HTML属性：document.getElementById(id).attribute=新属性值
  • attribute替换成真实的属性名
    在这里插入图片描述

4.CSS变化

  • 对象.style.property=新样式
  • 将property替换成真实的css属性名
    在这里插入图片描述
    在这里插入图片描述

5.DOM事件

  • HTML DOM事件允许我们通过触发事件来执行代码
  • 比如以下代码：
    • 元素被点击
    • 页面被加载
    • 输入框被修改
  • 本例改变了id=“id1”的HTML元素样式，当用户点击时：
    在这里插入图片描述
    在这里插入图片描述
  • HTML DOM使JavaScript有能力对HTML事件作出反应
    • 本例中，用户在< h1>元素上点击时，会改变其内容：
      在这里插入图片描述
  • 本例从事件处理器调用一个函数：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function change(id){
            id.innerHTML="改变了";
        }
    </script>
</head>
<body>
    <h1 onclick="change(this)">原来</h1>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

  • 如需向HTML元素分配事件，您可以使用时间属性
    在这里插入图片描述
  • HTMl DOM允许您使用JavaScript来向HTML元素分配事件
    在这里插入图片描述

6.EventListener

  • addEventListener()方法

  • 在用户点击按钮时触发监听事件
    在这里插入图片描述

  • addEventListener()方法用于指定元素添加事件句柄

  • addEventListener()方法添加的事件句柄不会覆盖已存在的时间句柄

  • 你可以向一个元素添加多个事件句柄

  • 你可以向同个元素添加多个同类型的事件句柄，如：两个click事件

  • 你可以向DOM对象添加时间监听，不仅仅是html元素。如window对象

  • addEventListener()方法可以更简单控制事件（冒泡与获取）

  • 当你使用addEventListener()方法时，JavaScript从HTML标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听

  • 可以使用removeEventListener()方法来移除事件的监听
    在这里插入图片描述

参数名描述
event事件的类型（如“click”或“mousedown”）
function事件触发后调用函数
useCapture用于描述事件是冒泡还是捕获，该参数可选的
  • 当用户点击元素时弹出hello
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function myfunction(){
            alert("hello ")
        }
    </script>
</head>
<body>
    <button type="button" id="mybtn">点击</button>
    <script>
        document.getElementById("mybtn").addEventListener("click", myfunction);
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

  • addEventListener()方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件
    在这里插入图片描述
  • 你可以向同一个元素添加不同类型的事件：
    在这里插入图片描述
  • addEventListener()允许你在HTML DOM对象添加事件监听，HTML DOM对象如：HTML元素，HTML文档，window对象。或者其他支出事件对象，如：xmlHttpRequest对象
  • 当用户重置窗口大小时添加事件监听
    在这里插入图片描述
  • 事件传递有两种方式：冒泡与捕获
  • 事件传递定义了元素事件触发的顺序。如果你将< p>元素插入到< div>元素中，用户点击< p>元素，哪个元素的click事件先被触发呢
    • 在冒泡 中，内部元素的事件先被触发，然后再触发外部元素的事件，即：< p>元素先被触发，< div>元素后被触发
    • 在捕获 中，外部元素的事件先被触发，然后再触发内部元素的事件，即：< div>元素先被触发，< p>元素后被触发
  • addEventListener()方法可以指定“userCapture”参数来设置传递类型
    在这里插入图片描述
  • 默认值为false，即为冒泡传递，当值为true时，为捕获传递
    在这里插入图片描述
  • removeEventListener()方法移除由addEventListener()方法添加的事件句柄
    在这里插入图片描述

7.操作元素

  • 如需向HTML DOM添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
    • 创建元素：document.createElement()
    • 追加元素：appendChild()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <p>你好</p>
    </div>
    <script>
        var para = document.createElement("p1");
        var node=document.createTextNode("天选之子");
        para.appendChild(node);

        var element=document.getElementById("div1");
        element.appendChild(para);
    </script>
</body>
</html>

在这里插入图片描述

  • 删除已有的HTML元素
  • 使用方法：removeChild()
    在这里插入图片描述

浏览器BOM

  • 浏览器对象模型（BOM-Brower Object MOdel）使JavaScript有能力与浏览器“对话”
  • 由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性

1.window

  • 所有浏览器都支持window对象，他表示浏览器的窗口
  • 所有的·JavaScript全局对象，函数以及变量均自动成为window对象的成员
  • 全局变量是window对象的属性
  • 全局函数是window对象的方法
  • 甚至HTML DOM的document也是window的对象的属性之一
  • window的尺寸
    • 对于Internet Explorer，Chrome，Firefox,Opera以及Safari：
      • window.innerHeight-浏览器窗口的内部高度（包括滚动条）
      • window.innerWidth-浏览器窗口的内部宽度（包括滚动条）
    • 对于Internet Explorer8、7、6、5
      • document.documentElement.clientHeight
      • document.documentElement.clientWidth
        在这里插入图片描述
  • Window Screen
    • 可用宽度：screen.avaliWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
    • 可用高度：screen.availHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏
      在这里插入图片描述
  • Window Location
    • window.location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面
    • window.loaction对象在编写时可不使用window这个前缀
      • location.hostname返回web主机域名
      • location.pathname返回当前页面的路径和文件名
      • location.port返回web主机的端口
      • location.protocol返回所使用的web协议
      • loacation.href属性返回当前页面的url
      • location.assign()方法加载新的文档
        在这里插入图片描述
  • Window History
    • window.history对象包含浏览器的历史
    • window.history对象在编写的时候可不使用window这个前缀
      • history.back()-与浏览器点击按钮后退相同
      • history.forward()-与浏览器点击按钮向前相同
  • Window Navigator
    • window.navigator对象在编写时可以不使用window这个前缀
      在这里插入图片描述

2.JavaScript定时器

  • 定义定时器
    • setInterval(“调用函数”,毫秒时间)：每间隔固定毫秒值就执行一次函数
    • setTimout(“调用函数”,毫秒时间)：在固定的时间之后执行一次调用函数
  • 关闭定时器
    • clearIntetval(定时器名称)
    • clearTimeOut(定时器名称)
      在这里插入图片描述
ozl520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JAVAEE---JS(基础语法）
m0_58157267的博客
05-10 497
有了JS之后,我们所看到的网页就相当于一个web app(普通客户端程序) JS是编程语言,要想执行JS,需要有一个JS的执行引擎(所谓的引擎对标JVM) 对于在浏览器上执行的JS来说,可以视为三个部分: 1.JS核心语法 2.DOM API:浏览器提供的一组操作页面元素的API 3.BOM API:浏览器提供的一组操作浏览器窗口的API 对于在Node.js上执行的JS来说,可以视为两个部分: 1.JS核心语法 2.Node.js提供的API(这个API和DOM/BOM无关),
对JavaScript、JSP、Java及javaEE之间区别的理解
专注于此刻
08-22 1526
对JavaScript、JSP、Java及javaEE之间区别的理解 JavaScript和Java名字极为类似，相信不少的初学者或者准备学这些知识的人对于JavaScript、JSP、Java及JavaEE这几个感念理解都会混淆，有所疑惑。曾经的我也是常常把这几个感念混淆。后来查了很多资料，也对JavaScript、JSP及Java学习了一段时间。下面就他们之间的区别谈一下我的看法吧...
JavaEE——JavaScript
l4432321的博客
07-13 670
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。JavaScriptdocument对象(文档对象)：·方法getElementById("id搜索") 返回一个元素返回NodeList节点集合:getElementsByClassName("样式的名称")getElementsByTagName("标记名称...
java ee和javascripe_JavaEE——JavaScript
weixin_30932183的博客
02-27 175
原标题：JavaEE——JavaScript声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。Java ·内置对象：Windowdocument 文档对象 所有的标记都是它管理的history 浏览历史信息location 地址栏管理对象status 状态栏对象方法：alert()alert() 对话框conf...
JavaEE——JSP标签
l4432321的博客
12-22 326
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。JSP标签JSTL:java自己开发出来的一套标记库，给你在JSP页面中使用的，可以简化和美化JSP页面的代码，它同样有循环、判断、三元等各种语句，和el表达式混用。一般我们用上了jstl和el表达式之后在jsp页面上就看不到java代码了。想用jstl标记库，你
JavaEE学习笔记.pdf
11-28
JavaEE学习笔记.pdf
JavaEE学习思维导图
03-15
对想要学习JavaEE的人来说是一个总结性的学习路线图，通过此图，使想要入门的人对于JavaEE有整体的认识
JavaEE学习文档
10-19
jsp、EL、jstl、servlet...
javaee学习资料
01-05
该资源是博主学习javaee时参考的资料,就像API那样非常好用,是由静态网页组成的书籍. 注意使用方法,在压缩包里面有说明
javascript和java ee_JavaScript在JAVAEE项目中的作用
weixin_34508986的博客
03-02 330
原标题：JavaScript在JAVAEE项目中的作用Java语言，简称js，目前世界编程语言排名第6位。相当流行的一种编程语言。学习js语言非常简单，只需要一个浏览器就可以运行，一个记事本就可以编辑js代码。js语言非常不规范。不规范有个好处，很容易入门。 js这门语言非常强大，强大到可以实现你所想得到的。所以，入门容易，精通真的很难。如果你想成为javaEE工程师，js入门也就行了。java才...
前端三剑客之 JavaScript - javaEE初阶 - 细节狂魔
DarkAndGrey的博客
05-08 4486
文章目录前言 前言 关于 JS，分成2个部分来进行介绍 1、JS的基础语法 这个对于熟练掌握 Java的朋友来说，非常简单。 2、JS的 DOM api 浏览器给 js 提供的一些接口，通过这些接口来进行一些页面内容的操作 ...
【redis】Spring之RedisTemplate配置与使用
05-30 331
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1201
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 524
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 174
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
javaee学习笔记
08-31
JavaEE学习笔记是我自己在学习过程中总结的javaweb各项技术和知识点。它包含了JavaEE的十三种核心技术，分别是JDBC、JNDI、EJB、RMI、Servlet、JSP、XML、JMS、Java IDL、JTS、JTA、JavaMail和JAF。 JavaEE是一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值