JavaWeb学习总结（六）JavaScript

已于 2024-01-30 16:06:30 修改
阅读量851 收藏 15
点赞数 25
分类专栏： JavaWeb 文章标签： 学习
于 2024-01-30 15:58:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67076764/article/details/135933896
版权

JavaScript基础语法

1.书写语法
    1.1区分大小写：和Java一样
    1.2分号可有可无
    1.3注释和java一样
    1.4大括号表示代码块
2.输出语句
    Windows.alter() 警告框输出
    document.write() html文件输出
    console.log() 控制台输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS输出语句</title>
</head>
<body>
    <script>
        window.alert("hello JavaScript1~");
        document.write("hello JavaScript2~");
        console.log("hello JavaScript3~");
    </script>
</body>
</html>

3.变量
      var
    *   1.作用域大全局变量
    *   2.可以重复相同的变量名
    * let
    *   1.当前作用域
    *   2.不可以重复相同的变量名
    * 变量可以赋值不同的数据类型
    * 常量const

4.数据类型
原始数据类型 引用数据类型
number：数字（整数、小数、NaN）
string：字符、字符串、单双引号都可以
boolean：布尔、ture、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
typeof 变量名称返回对应的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量数据类型</title>
</head>
<body>
<script>
    var test2=666;
    var test1=666;
    var test1=888
/*    var
    *   1.作用域大全局变量
    *   2.可以重复相同的变量名
    * let
    *   1.当前作用域
    *   2.不可以重复相同的变量名
    * 变量可以赋值不同的数据类型
    * 常量const*/
    {
        let test=777;
        alert(test2)
    }
    alert(test1)
    const number='sdasdasd';
    alert(number)

</script>
</body>
</html>

5.运算符
类型转换
    其他类型转为number
    1.string：按照字符串的字面值，转为数字，如果字面值不是数字，则转为false，其他的数字转化为true。
    2.boolean：ture转为1，false转为0
    其他类型转为boolean
    1.number：0和NaN转为false
    2.string：空字符串转为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
    <script>
        /*类型转换
	        其他类型转为number
	                1.string：按照字符串的字面值，转为数字，如果字面值不是数字，
                则转为false，其他的数字转化为true。
	                2.boolean：ture转为1，false转为0
	            其他类型转为boolean
	                1.number：0和NaN转为false
	                // 健壮性判断
	                2.string：空字符串转为false，*/
        var test=500;
        var test_="500";
        // string会转为数字比较
        // ==比较的是俩个数的值
        // ===比较两个数值和数据类型
        if (test == test_){
            alert("输出为ture")
        }else {
            alert("输出为false")
        }
        if (0){
            alert("输出为ture")
        }else {
            alert("输出为false")
        }
        if (1){
            alert("输出为ture")
        }else {
            alert("输出为false")
        }
        if (NaN){
            alert("输出为ture")
        }else {
            alert("输出为false")
        }
        if (""){
            alert("输出为ture")
        }else {
            alert("输出为false")
        }
    </script>
</body>
</html>

6.流程控制语句
    会javaSE就够了
7.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>


    <script>
        /*
        * 被设计为执行特定任务的代码块
        	定义：JavaScript函数通过function关键字进行定义，语法为：
                fanctio functionName(参数1，参数2，......){
                }
        	注意：
        		1.形式参数不需要类型。因为JavaScript是弱类型语言
        		2.返回值也不需要定义类型，可以在函数内部直接使用return·1
        		返回即可。
        */
        //法一
        function add(a,b) {
            return a+b;
        }
        alert(add(12,30,50,5,15,1))     //多参数不报错
        alert(add(12));     //少参数返回Nan
        //法二
        var a=function (a,b) {
            return a*b
        }
        let a1 = a(10,2);
        alert(a1)


    </script>
</body>
</html>

JavaScript对象

Array定义对象
  数组是变长的，变类型，类似于java的集合
    定义
    var 变量名 = new Array（元素列表）;
    var 变量名 = [元素列表];
    例子
    var arr = new  Array(1,2,3);
    var arr = [1,2,3];
    访问
    变量名[索引值]
  属性：length：数组中元素的个数
  方法：
    1.push：添加方法
    2.splice：删除数组
        splice（删除开始值，结束值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
    <script>
        /*
        * Array定义对象
            // 数组是变长的，变类型，类似于java的集合
            	定义
            	var 变量名 = new Array（元素列表）;
            	var 变量名 = [元素列表];
            	例子
            	var arr = new  Array(1,2,3);
            	var arr = [1,2,3];
            	访问
            	变量名[索引值]
            //属性：length：数组中元素的个数
            // 方法：
            	1.push：添加方法
            	2.splice：删除数组
            		splice（删除开始值，结束值）*/
        var a=new Array(1,2,3,4,5,6,7);
        alert("数组法一："+a);
        var b=[1,2,3,4,5,6];
        alert("数组法二："+b);
        //属性length
        let length = b.length;
        alert("数组length属性："+length);
        //方法splice
        let numbers = a.splice(1,3);
        alert("数组splice方法：".charAt(1)+numbers)
        var c=[1,2,3,4,"6",'7','结束'];
        alert(c)
        for (i=0;i<c.length;i++){
            alert(c[i]);
        }
        c.push("嗨嗨嗨开始了！");
        alert(c);
        alert(c[20]);
    </script>
</body>
</html>

String定义对象
    方式
    1.var str1 = new srting（“abc”）;
    方式
    2.var str2 =‘abc’；
    2.var str2 = “abc”
  // 属性：length：返回字符串长度
  // trim（）：去除字符串前后端的空白字符
    例子
        var stat = “   abc   ”
        alter（stat.ttim） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String对象</title>
</head>
<body>
    <script>
        let str1 = String("abc");
        alert(str1);
        let str2 ='abc';
        alert(str2);
        let str3 ="abc";
        alert(str3)
        //length属性
        alert(str1+str2+str3);
        //方法大多数的方法都类似于Java，trim()去除空格
        let str4 = "   123   ";
        alert(1+str4.trim()+1)
        alert(str4)
    </script>
</body>
</html>

自定义对象   

var person = {
        属性1：值
        属性1：值
        函数名称：function （）{}
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>
  <script>
      var User={
          age:18,
          name:"张三",
          address:"北京",
          eat:function (a,b) {
              return a+b;
          }
      }
      alert(User.age);
      alert(User.name);
      alert(User.address);
      alert(User.eat(12,10));
  </script>
</body>
</html>

BOM对象
window对象可以省略
    window：浏览器窗口对象
        alter：警告框
        confirm：对话框    返回值类型为boolean
        setTimeout：一段时间执行一个function，只执行一次
        setInterval：一段时间执行一个function，循环执行
    Naviger：浏览器对象
    Screen：用户屏幕对象
    History：历史记录对象
        window.history.方法（）
        back（）返回上一个URL
        forward（）返回下一个URL
    Location：地址栏对象
        window.location.方法（）；
        href（）    设置或返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM对象</title>
</head>
<body>
    <script>
            /*
	            window：浏览器窗口对象
	            	alter：警告框
	            	confirm：对话框	返回值类型为boolean
	            	setTimeout：一段时间执行一个function，只执行一次
	            	setInterval：一段时间执行一个function，循环执行
	            Naviger：浏览器对象
	            Screen：用户屏幕对象
	         window对象可以省略
	            History：历史记录对象
	            	window.history.方法（）
	            	back（）返回上一个URL
	            	forward（）返回下一个URL
	            Location：地址栏对象
	            	window.location.方法（）；
	            	href（）	设置或返回完整的URL
             */
            window.confirm("我是一个对话框！");
            window.setTimeout(function () {
                window.location.href="https://www.baidu.com"
            },3000)
    </script>
</body>
</html>

DOM对象
    获取Element
        获取Element对象
            1.getElementsByTagName    标签名称获取返回Element数组
            2.getElementsByName        根据name属性值获取，返回Element数组
            3.getElementsByClassName    根据class属性值获取，返回Element数组
            4.getElementsById        根据id属性值获取返回一个Element对象
        Element对象属性的使用
            style：设置Css样式
            innerHTML：设置元素内存
            checkbox：ture false选中框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象</title>
</head>
<body>

    <font id="NewTitle" >标题</font>
    <input type="button" name="button" class="ClassTitle" value="button">
    <div>
        <p>
        <h2>
            我是文字1.
        </h2>
        </p>
    </div>

    <div>
        <p>
        <h2>
            我是文字1.
        </h2>
        </p>
    </div>
    <div>
        <p>
        <h2>
            我是文字1.
        </h2>
        </p>
    </div>
    <script>
        //获取Element对象
        let elementsByClassName = document.getElementsByClassName("ClassTitle");
        let elementsByName = document.getElementsByName("button");
        let elementById = document.getElementById("NewTitle");
        let elementsByTagName = document.getElementsByTagName("div");
        for (let i=0;i<elementsByTagName.length;i++){
            elementsByTagName[i].style.color='red';
        }
        elementsByClassName[0].style.color='blue';
        elementById.style.color='yellow';
        elementsByName[0].style.color='brown';
        elementsByTagName[0].innerHTML="我是文字0";
    </script>
</body>
</html>

JavaScript事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
</head>
<body>
    <input type="button" name="按钮1" id="NewButton" onclick="add(12,13)" value="按钮1"> <br>
    <input type="button" name="按钮2" id="NewButton1" value="按钮2">
    <script>
        var add=function (a,b){
            return alert(a+b);
        };
        document.getElementById("NewButton1").onclick=function () {
            alert("无耦合方法输出")
        };
    </script>
</body>
</html>

JavaScript表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        #error{
            color: red;
        }
        #error_password{
            color: red;
        }
    </style>
</head>
<body>
    <form id="login" action="#" >
        <table width="300" >
            <tr>
                <td><h3>用户名：</h3></td>
                <td><input type="text" id="username" name="用户名"><br>
                    <span id="error" style="display:none">用户名输入有误！</span>
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td><h3>密 码：</h3></td>
                <td><input type="password" id="password" name="密码">
                    <br>
                    <span id="error_password" style="display:none">密码输入有误！</span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td> <input type="submit" value="登录"></td>
            </tr>
        </table>
    </form>

    <script>
        var usernameInput = document.getElementById("username");
        usernameInput.onblur=checkUsername;
        function checkUsername () {
            var reg = /^\w{1}\d{8}$/;
            var value = usernameInput.value;
            var flag = reg.test(value);
            //var flag=usernameInput.value.length>=6 && usernameInput.value.length<=12;

            if (flag){
                document.getElementById("error").style.display='none';
            }else {
                document.getElementById("error").style.display='';
            }
            return flag;
        }

        var password = document.getElementById("password");
        password.onblur=checkPassword;
        function checkPassword () {
            var reg = /^\d{6}$/;
            var value = password.value;
            var flag = reg.test(value);
            //var flag=password.value.length>=6 && password.value.length<=12;
            if (flag){
                document.getElementById("error_password").style.display='none';
            }else {
                document.getElementById("error_password").style.display='';
            }
            return flag;
        }

        var elementById = document.getElementById("login");
        elementById.onsubmit=function () {
            var flag=checkPassword()&&checkUsername ();
            return flag;
        }
    </script>
</body>
</html>

 JavaScript正则表达式

山谷清流
关注
  • 25
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaWeb学习心得总结
weixin_46340844的博客
09-23 7566
JavaWeb（JSP+Servlet）新手学习心得总结 说明： 由于篇幅的原因，本文只是对于JavaWeb项目的大致数据流程做一个介绍，同时引出一些JavaWeb开发中很基础的知识点，且不会精确到具体代码实现。 所以本文的适合读者为刚刚接触JavaWeb开发的人，或者是想了解一下网页服务的大致流程的新手。 当然如果你关心具体实现，可以跟学https://www.bilibili.com/video/BV1BJ411L7NR，该教程从针对JavaWeb入门者的角度进行教学，非常适合新手。 同时如果你关心整体
JavaWeb——JavaScript
qq_45821255的博客
06-25 4426
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
JavaWeb学习总结（期末总结）
Etui۹(･༥･´)و的博客
12-20 7525
本学期的JavaWeb课程课时较多，分为理论课和实验课两部分，学习过程比较坎坷，主要原因是相关技术的原理晦涩难懂。在此之前，我对Web相关的技术也有一定的了解。我大一时开始学习Web开发技术，在大二下学期之前一直都在学习Web前端，在大二下学期开始学习Web后端技术，而JavaWeb是我学习后端开发的起点。
JavaWeb学习总结之JavaScript
weixin_44077225的博客
05-14 229
1、JavaScript 介绍 Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。 JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScript。 JS是弱类型，Java是强类型。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性 (不允许直接访问本地硬盘) 3. 跨平台性(只要是可以解释JS的浏览器都可以执行，和平台无关)、 2、JavaScript 和h
JavaWeb学习总结：JavaScript
怪咖的博客
08-19 155
JavaScript
JavaWeb学习总结：JavaScript基本对象
怪咖的博客
08-20 139
基本对象 Function：函数对象（方法） 1，创建 1, var fun = new Function(形式参数列表，方法体); 不常用 2，function创建方式，注意方法定义，形参的类型不用写 function 方法名称(形式参数列表){ 方法体 } //调用 方法名称(实参列表) 3，第三种方式。 var 方法名 = function(形式参数列表){ 方法体 } //调...
JavaWeb学习总结
weixin_45488056的博客
09-30 1451
文章目录前言知识点梳理【day01】Reflect反射Annotation注解数据库连接池与springJdbc【day10_HTML】javaScriptJQuery【day12_Bootstrap】【day14_XML相关】【day15_Tomcat】Servlet体系request&response&context消息格式request对象Response对象cookie客户端会话技术session服务器端会话技术filter过滤器listenter监听器代理模式【day18_Ajxa
JavaWeb知识总结-JavaScript语言
shark_pupper的博客
01-09 298
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。 JS是弱类型语言。 特点： 1.交互性（它可以做的就是信息的动态交互） 2.安全性（不允许直接访问本地磁盘） 3.跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关） JavaScript和html的结合方式 第一种方式 只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码 <script type="t
javaWeb学习总结
weixin_45911886的博客
03-07 259
学习javaWeb之前要有javaEE基础,html,css,mysql,jdbc基础 我这里直接上在有上面基础之上进行的知识点总结，学完之后自己建立一个书城项目–有想要学习的小伙伴可以私信我，定会尽自己的微薄之力，我们一起努力吧！！！！！ **一：jQuery 执行操作 $(执行部分)----客户端 二：xml配置文件 1：用来保存数据，进行自我描述， 2：可以为项目或者模块进行配置文件， 3：网络传输数据的格式(现在JSON为主) 4：把写的代码和服务器连接起来 里面配置你的Tomcat访问的路径信息
JavaWeb学习总结共9页.pdf.zip
10-30
这份"JavaWeb学习总结共9页.pdf.zip"压缩包文件显然是一个关于JavaWeb学习的详细笔记或教程，可能是某个开发者的经验分享。尽管没有提供具体的文件内容，我们可以基于JavaWeb的一般知识框架来进行深入的讨论。 首先...
JavaWeb学习总结.docx
12-27
在学习JavaWeb的过程中，首先要理解Web开发的基本概念。 1. **Web开发的相关知识**：Web是指网页，是Internet主机上可供外界访问的资源。这些资源分为静态和动态两种。静态Web资源，如HTML页面，其内容固定不变；...
JavaWeb学习总结.doc
11-22
在JavaWeb开发中，我们主要关注的是如何创建和管理动态Web资源，即那些可以根据用户需求或时间变化生成内容...通过学习和掌握这些知识，开发者能够创建出能够处理用户交互、动态生成内容并有效管理数据的高效Web应用。
javaweb学习心得.doc
11-24
Java Web 学习心得是指学习 Java Web 开发相关技术的经验总结，涵盖了 HTML、CSS、JavaScript、XML、DTD/Schema、Java EE 中的 JSP、Servlet、Filter、Listener、JSTL、EL、JQuery、Ajax 等技术。 一、HTML * ...
javaweb笔记+狂神+知识总结
04-01
"狂神"可能是指一位知名的JavaWeb讲师或教程作者，他的笔记为学习者提供了深入理解和实践该技术的宝贵资源。下面将详细阐述JavaWeb的主要知识点。 1. **Servlet**：Servlet是Java Web应用程序的核心组件，它是一个...
css样式学习样例之边框
最新发布
abments的博客
07-07 827
css样式学习样例之边框
学习小记-Netty
weixin_42029860的博客
07-06 216
Netty是由JBOSS个java开源框架，Netty提供异步的、事件驱动的网络应用程序框架，用以快速开发高性能、高可靠性的网络服务器和客户端程序。
JMH320【亲测】【御剑九歌】唯美仙侠手游御剑九歌+WIN学习手工端+视频教程+开服清档+运营后台+授权GM物品充值后台
m0_71430218的博客
07-05 387
JMH320【亲测】【御剑九歌】唯美仙侠手游御剑九歌+WIN学习手工端+视频教程+开服清档+运营后台+授权GM物品充值后台
短链接学习day2
weixin_63374588的博客
07-05 882
需要注意的是，转换过程中，BeanUtil.toBean()方法通过反射机制创建了目标类型的实例，并将数据源对象的属性值复制到目标对象中。但是为了防止redis的主节点挂掉后，从节点变成主节点时，有些数据还没复制，就会导致脏数据，就会可能导致用户名重复，所以为了防止这个情况，我们需要将username设置为唯一索引，让数据库兜底。因为用户名不是特别重要的数据，如果说我设置用户名为 aaa，系统返回我不可用，那我大可以在 aaa 的基础上再加一个a，也就是 aaaa。一定要记得写枚举的时候是用逗号分割。
JavaScript、jQery、javaweb学习顺序
07-25
总结起来，建议的学习顺序是：JavaScript基础 -> 进阶JavaScript概念 -> jQuery -> JavaWeb。这样的学习路径将帮助你逐步掌握和应用这些技术，从前端的JavaScript和jQuery到后端的JavaWeb开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值