重拾Java EE——JavaScript

2024-06-08 13:58
文章标签 java script ee 重拾

本文主要是介绍重拾Java EE——JavaScript，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JS知识网络图

一、js的简介

1、js是什么

js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言

    特点：(1)交互性(2)安全性：js不能访问本地磁盘(3)跨平台：浏览器中都具备js解析器

2、js能做什么

(1)js能动态的修改(增删)html和css的代码
(2)能动态的校验数据

3、js历史及组成

ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)

4、js被引入的方式

(1)内嵌脚本

<input type="button" value="button" onclick="alert('xxx')" />

(2)内部脚本

<script type="text/javascript">alert("xxx");
</script>

(3)外部脚本

首先先创建一个js文件
其次在html中引入

<script type="text/javascript" src="demo1.js"></script>

js代码放在哪？
放在哪都行,在不影响html功能的前提下 越晚加载越好

二、js基本语法

1、变量

(1)

        var x = 5;x = 'javascript';var y = "hello";var b = true;

(2)

        x = 5;

2、原始数据类型

介绍

(1)number:数字类型
(2)string：字符串类型
(3)boolean:布尔类型
(4)null:空类型
(5)underfind:未定义

注意：number、boolean、string是伪对象

类型转换：

1）number\boolean转成string

            toString();

2）string\boolean转成number

            parseInt()parseFloat()boolean不能转string可以将数字字符串转换成number 如果“123a3sd5” 转成123

3）强制转换

            Boolean()   强转成布尔数字强转成布尔  非零就是true   零就是false字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是falseNumber()    强转成数字布尔转数字 true转成1  false转成0字符串转数字 不能强转

3、引用数据类型

    java:   Object obj = new Object();js:     var obj = new Object();var num = new Number();

4、运算符

(1)赋值运算符

        var x = 5;

(2)算数运算符

            + - * / %+: 遇到字符串变成连接-：先把字符串转成数字然后进行运算*: 先把字符串转成数字然后进行运算/: 先把字符串转成数字然后进行运算

(3)逻辑运算符

        &&  ||

(4)比较运算符

        <   >   >=  <=  !=  =====:全等：类型与值都要相等

(5)三元运算符

        3<2?"大于":"小于"

(6)void运算符

        <a href="javascript:void(0);">xxxxxx</a>

(7)类型运算符

            typeof:判断数据类型 返回我的数据类型instanceof：判断数据类型 是否是某种类型var obj = new Object();alert(typeof obj);//objectalert(obj instanceof Object);//true

5、逻辑语句

(1)if-else

            //条件://数字非0 字符串非空====trueif(9){alert("true--");}else{alert("false--");}

(2)switch

            var x = "java";switch(x){case "css":alert("css");break;case "js":alert("js");break;case "java":alert("java");break;default:alert("def");}

(3)for

             for(var i = 0;i<5;i++){alert(i);}

(4)for in

            var arr = [1,3,5,7,"js"];for(index in arr){//index代表角标//alert(index);alert(arr[index]);}

三、js内建对象

1、Number

创建方式：

            var myNum=new Number(value);var myNum=Number(value);

属性和方法：

        toString():转成字符串valueOf()：返回一个 Number 对象的基本数字值

2、Boolean

创建方式：

            var bool = new Boolean(value);  var bool = Boolean(value);

属性和方法：

        toString():转成字符串valueOf()：返回一个 Boolean 对象的基本值(boolean)

3、String

创建方式：

            var str = new String(s);var str = String(s);

属性和方法：

            length:字符串的长度charAt():返回索引字符charCodeAt:返回索引字符unicodeindexOf():返回字符的索引lastIndexOf();逆向返回字符的索引split();将字符串按照特殊字符切割成数组substr():从起始索引号提取字符串中指定数目的字符substring():提取字符串中两个指定的索引号之间的字符toUpperCase();转大写

4、Array

创建方式：

            var arr = new Array();//空数组var arr = new Array(size);//创建一个指定长度的数据var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素var arr = [];//空数组var arr = [1,2,5,"java"];//创建数组直接实例化元素

属性和方法：

        length:数组长度join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个pop():删除并返回最后元素push()：向数组的末尾添加一个或更多元素，并返回新的长度reverse();反转数组sort();排序

5、Date

创建方式： 

            var myDate = new Date();var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值

属性和方法：

        getFullYear():年getMonth():月 0-11getDate():日 1-31getDay()：星期 0-6getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数toLocalString();获得本地时间格式的字符串

6、Math

创建方式：

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，
像 Math.sin() 这样的函数只是函数，不是某个对象的方法。无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

属性和方法

        PI：圆周率abs():绝对值ceil():对数进行上舍入floor():对数进行下舍入pow(x,y)：返回 x 的 y 次幂random():0-1之间的随机数round():四舍五入

7、RegExp

创建方式： 

            var reg = new RegExp(pattern);var reg = /^正则规则$/;

规则的写法：

        [0-9] [A-Z][a-z][A-z]\d 代表数据\D  非数字\w  查找单词字符\W  查找非单词字符\s  查找空白字符\S  查找非空白字符n+  出现至少一次n*  出现0次或多次n?  出现0次或1次{5} 出现5{2,8} 2到8次

方法： 

        test(str):检索字符串中指定的值。返回 true 或 false

需求：校验邮箱

        var email = haohao_827@163.comvar reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;reg.test(email);

四、js的函数

1、js函数定义的方式

(1)普通方式

语法：function 函数名(参数列表){函数体}

示例：

                function method(){alert("xxx");}method();

(2)匿名函数

语法：function(参数列表){函数体}

示例：

                var method = function(){alert("yyy");};method();

(3)对象函数

语法：new Function(参数1,参数2,…,函数体);
注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
示例：

                var fn = new Function("a","b","alert(a+b)");fn(2,5);

2、函数的参数

(1)形参没有var去修饰
(2)形参和实参个数不一定相等
(3)arguments对象 是个数组 会将传递的实参进行封装

    function fn(a,b,c){//var sum = a+b+c;//alert(sum);//arguments是个数组 会将传递的实参进行封装for(var i=0;i<arguments.length;i++){alert(arguments[i]);}}fn(1,2,4,8);

3、返回值

(1)在定义函数的时候不必表明是否具有返回值
(2)返回值仅仅通过return关键字就可以了 return后的代码不执行

        function fn(a,b){return a+b;//alert("xxxx");}alert(fn(2,3));

4、js的全局函数

(1)编码和解码

        encodeURI()   decodeURI()encodeURIComponet()   decodeURIComponent()escape()    unescape()三者区别：进行编码的符号范围不同吧，实际开发中常使用第一种

(2)强制转换

        Number()String()Boolean()

(3)转成数字

        parseInt()parseFloat()

(4)eval()方法

将字符串当作脚本进行解析运行, 代码嵌入的一种

            var str = "var a=2;var b=3;alert(a+b)";eval(str);function print(str){eval(str);}print("自定义逻辑");

五、js的事件

事件
事件源
响应行为

1、js的常用事件

onclick:点击事件

onchange:域内容被改变的事件

需求：实现二级联动

            <select id="city"><option value="bj">北京</option><option value="tj">天津</option><option value="sh">上海</option></select><select id="area"><option>海淀</option><option>朝阳</option><option>东城</option></select><script type="text/javascript">var select = document.getElementById("city");select.onchange = function(){var optionVal = select.value;switch(optionVal){case 'bj':var area = document.getElementById("area");area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";break;case 'tj':var area = document.getElementById("area");area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";break;case 'sh':var area = document.getElementById("area");area.innerHTML = "<option>浦东</option><option>杨浦</option>";break;default:alert("error");}};              </script>

onfoucus:获得焦点的事件onblur:失去焦点的事件

需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误

            <label for="txt">name</label><input id="txt" type="text" /><span id="action"></span><script type="text/javascript">var txt = document.getElementById("txt");txt.onfocus = function(){//友好提示var span = document.getElementById("action");span.innerHTML = "用户名格式最小8位";span.style.color = "green";};txt.onblur = function(){//错误提示var span = document.getElementById("action");span.innerHTML = "对不起 格式不正确";span.style.color = "red";};</script>

onmouseover:鼠标悬浮的事件 onmouseout:鼠标离开的事件

需求：div元素 鼠标移入变为绿色 移出恢复原色

 #d1{background-color: red;width:200px;height: 200px;}<div id="d1"></div><script type="text/javascript">var div = document.getElementById("d1");div.onmouseover = function(){this.style.backgroundColor = "green";};div.onmouseout = function(){this.style.backgroundColor = "red";};</script>

onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数

            <span id="span"></span><script type="text/javascript">window.onload = function(){var span = document.getElementById("span");alert(span);span.innerHTML = "hello js";};</script>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

        <input type="button" value="button"  onclick="alert('xxx')"/>

(2)将事件内嵌到html中而响应行为用函数进行封装

            <input type="button" value="button" onclick="fn()" /><script type="text/javascript">function fn(){alert("yyy");}</script>

(3)将事件和响应行为 与html标签完全分离

            <input id="btn" type="button" value="button"/><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){alert("zzz");};</script>

this关键字
this经过事件的函数进行传递的是html标签对象

            <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/><script type="text/javascript">function fn(obj){alert(obj.name);}</script>

3、阻止事件的默认行为

IE：

window.event.returnValue = false;

W3c:

传递过来的事件对象.preventDefault();

例子

        //ie：window.event.returnValue = false;//W3c：传递过来的事件对象.preventDefault();//W3c标准if(e&&e.preventDefault){alert("w3c");e.preventDefault();//IE标签}else{alert("ie");window.event.returnValue = false;}

//通过事件返回false也可以阻止事件的默认行为

        <a href="demo11.html" onclick="return false">点击我吧</a>

4、阻止事件的传播

IE：

window.event.cancelBubble = true;

W3c:

 传递过来的事件对象.stopPropagation();

例子

     if(e&&e.stopPropagation){alert("w3c");e.stopPropagation();//IE标签}else{alert("ie");window.event.cancelBubble = true;}

六、js的bom

1、window对象

弹框的方法：

            提示框：alert("提示信息");确认框：confirm("确认信息");有返回值：如果点击确认返回true  如果点击取消 返回falsevar res = confirm("您确认要删除吗？");alert(res);输入框：prompt("提示信息");有返回值：如果点击确认返回输入框的文本 点击取消返回nullvar res =  prompt("请输入密码？");alert(res);

open方法：

            window.open("url地址");           open("../jsCore/demo10.html");

定时器：

1）setTimeout

setTimeout(函数,毫秒值);
clearTimeout(定时器的名称);

                setTimeout(function(){alert("xx");},3000);

例子：

                var timer;var fn = function(){alert("x");timer = setTimeout(fn,2000);};var closer = function(){clearTimeout(timer);};fn();
2）setInterval

setInterval(函数,毫秒值);
clearInterval(定时器的名称)

            var timer = setInterval(function(){alert("nihao");},2000);var closer = function(){clearInterval(timer);};

需求：注册后5秒钟跳转首页

        <script type="text/javascript">var time = 5;var timer;timer = setInterval(function(){var second = document.getElementById("second");if(time>=1){second.innerHTML = time;time--;}else{clearInterval(timer);location.href="../jsCore/demo10.html";}},1000);</script>
恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页
如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>

2、location

    location.href="url地址";

3、history

back();
forward();
go();

        <a href="demo7.html">后一页</a><input type="button" value="上一页" onclick="history.back()"><input type="button" value="下一页" onclick="history.forward()"><input type="button" value="上一页" onclick="history.go(-1)"><input type="button" value="下一页" onclick="history.go(1)">

七、js的dom

1、文档对象模型

html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
在dom树当中 一切皆为节点对象

节点的类型：
  • 元素节点
  • 属性节点
  • 文本节点

2、dom方法和属性

属性

(1)nodeName

String 节点的名字；根据节点的类型而定义

NodeName

如果是元素节点，nodeName返回这个元素的名称(标签名)。
如果是属性节点，nodeName返回这个属性的名称(属性名)。
如果是文本节点，nodeName返回一个内容为#text 的字符串。

(2)nodeType

Number 节点的类型，常量值之一

nodeType

Node.ELEMENT_NODE —1 – 元素节点
Node.ATTRIBUTE_NODE —2 – 属性节点
Node.TEXT_NODE —3 – 文本节点

(3)nodeValue

String 节点的值；根据节点的类型而定义

nodeValue

如果给定节点是一个属性节点，返回值是这个属性的值
如果给定节点是一个文本节点，返回值是这个文本节点内容
如果给定节点是一个元素节点，返回值是 null

(4)父节点： parentNode

parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。

(5)子节点

childNodes：获取指定节点的所有子节点集合。
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。

(6)同辈节点

nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

1.创建

（1）createElement()

按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

var reference = document.createElement(element);

方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.

（2）createTextNode()

创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。

var textNode = document.createTextNode(text);

方法只有一个参数：新建文本节点所包含的文本字符串
方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性

2.移除

removeChild()

从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
如果想删除某个节点，但不知道它的父节点是哪一个，parentNode 属性可以帮忙。

3.替换

replaceChild()

把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

4.查找

（1）getElementById()

寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

var oElement = document.getElementById ( sID )

该方法只能用于 document 对象

（2）getElementsByName()

寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

（3）getElementsByTagName()

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

（4）hasChildNodes()

该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

（5）getAttribute()

返回一个给定元素的一个给定属性节点的值

var attributeValue = element.getAttribute(attributeName);

给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.
通过属性获取属性节点
getAttributeNode(属性的名称)–Node

（6）setAttribute()

将给定元素节点添加一个新的属性值或改变它的现有属性的值。

element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在，它的值将被刷新；
如果不存在，setAttribute()方法将先创建它再为其赋值。

5.插入

（1）appendChild()

为给定元素增加一个子节点： 

 var newreference = element.appendChild(newChild).

给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素

（2）insertBefore()

把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference =  element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用

这篇关于重拾Java EE——JavaScript的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1042383。

相关文章

在Ubuntu上部署SpringBoot应用的操作步骤

在Ubuntu上部署SpringBoot应用的操作步骤

《在Ubuntu上部署SpringBoot应用的操作步骤》随着云计算和容器化技术的普及,Linux服务器已成为部署Web应用程序的主流平台之一,Java作为一种跨平台的编程语言,具有广泛的应用场景,本... 目录一、部署准备二、安装 Java 环境1. 安装 JDK2. 验证 Java 安装三、安装 mys
阅读更多...
Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单

Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单

《Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单》：本文主要介绍Springboot的ThreadPoolTaskScheduler线... 目录ThreadPoolTaskScheduler线程池实现15分钟不操作自动取消订单概要1，创建订单后
阅读更多...
JAVA中整型数组、字符串数组、整型数和字符串 的创建与转换的方法

JAVA中整型数组、字符串数组、整型数和字符串 的创建与转换的方法

《JAVA中整型数组、字符串数组、整型数和字符串的创建与转换的方法》本文介绍了Java中字符串、字符数组和整型数组的创建方法,以及它们之间的转换方法,还详细讲解了字符串中的一些常用方法,如index... 目录一、字符串、字符数组和整型数组的创建1、字符串的创建方法1.1 通过引用字符数组来创建字符串1.2
阅读更多...
SpringCloud集成AlloyDB的示例代码

SpringCloud集成AlloyDB的示例代码

《SpringCloud集成AlloyDB的示例代码》AlloyDB是GoogleCloud提供的一种高度可扩展、强性能的关系型数据库服务,它兼容PostgreSQL,并提供了更快的查询性能... 目录1.AlloyDBjavascript是什么？AlloyDB 的工作原理2.搭建测试环境3.代码工程1.
阅读更多...
Java调用Python代码的几种方法小结

Java调用Python代码的几种方法小结

《Java调用Python代码的几种方法小结》Python语言有丰富的系统管理、数据处理、统计类软件包,因此从java应用中调用Python代码的需求很常见、实用,本文介绍几种方法从java调用Pyt... 目录引言Java core使用ProcessBuilder使用Java脚本引擎总结引言python
阅读更多...
SpringBoot操作spark处理hdfs文件的操作方法

SpringBoot操作spark处理hdfs文件的操作方法

《SpringBoot操作spark处理hdfs文件的操作方法》本文介绍了如何使用SpringBoot操作Spark处理HDFS文件,包括导入依赖、配置Spark信息、编写Controller和Ser... 目录SpringBoot操作spark处理hdfs文件1、导入依赖2、配置spark信息3、cont
阅读更多...
springboot整合 xxl-job及使用步骤

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面，确认是否启动成功
阅读更多...
Java中的密码加密方式

Java中的密码加密方式

《Java中的密码加密方式》文章介绍了Java中使用MD5算法对密码进行加密的方法,以及如何通过加盐和多重加密来提高密码的安全性,MD5是一种不可逆的哈希算法,适合用于存储密码,因为其输出的摘要长度固... 目录Java的密码加密方式密码加密一般的应用方式是总结Java的密码加密方式密码加密【这里采用的
阅读更多...
Java中ArrayList的8种浅拷贝方式示例代码

Java中ArrayList的8种浅拷贝方式示例代码

《Java中ArrayList的8种浅拷贝方式示例代码》：本文主要介绍Java中ArrayList的8种浅拷贝方式的相关资料,讲解了Java中ArrayList的浅拷贝概念,并详细分享了八种实现浅... 目录引言什么是浅拷贝？ArrayList 浅拷贝的重要性方法一：使用构造函数方法二：使用 addAll(
阅读更多...
解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题

解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题

《解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题》本文主要讲述了在使用MyBatis和MyBatis-Plus时遇到的绑定异常... 目录myBATis-plus-boot-starpythonter与mybatis-spring-b
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2