JavaWeb复习-02JavaScript

已于 2025-03-11 22:24:48 修改
阅读量1k 收藏 24
点赞数 14
分类专栏： javaweb 文章标签： 前端 javascript 开发语言
于 2025-03-11 22:23:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_74143480/article/details/146190757
版权

Day02-1JS

image-20250309114328904

一、JS引入方式

image-20250309194035225

二、JS基础语法

（一）书写语法

image-20250309194715298

image-20250309194915566

image-20250309195002222

（二）变量

image-20250309195441677

image-20250309195648839

JavaScript 作用域 | 菜鸟教程

（三）数据类型、运算符、流程控制语句

1.数据类型

image-20250309200447696

2.运算符

image-20250309200759591

image-20250309201055522

alert（parserInt("12"));//12
alert（parserInt("12A45"));//12
alert（parserInt("A45"));//NAN(not a number)

空格字符串也是true

3.流程控制语句

image-20250309201342050

官方网站：https://www.w3school.com.cn/js/index.asp

三、JS函数

image-20250310113821512

image-20250310114449012

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    //定义函数-1
    /* function add(a, b){
        return a + b;
    } */
    //定义函数-2
    var add = function(a, b){
        return a + b;
    }
    //调用函数
    var result = add(10, 20);
    alert(result);
</script>
</html>

四、JS对象

（一）JS基础对象

1.Array

image-20250310115057018

image-20250310120152332

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //定义数组
    //var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点：长度可变、类型可变
    var arr = [1,2,3,4];
    arr[10] = 50;

    console.log(arr[10]);

    console.log(arr[10]);//50
    console.log(arr[9]);//undefined
    console.log(arr[8]);//undefined

    arr[9] = "A";
    arr[8] = true;
    console.log(arr);//Array(11) [ 1, 2, 3, 4, <4 empty slots>, true, "A", 50]
</script>
</html>

image-20250310122333752

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr = [1,2,3,4];
    arr[10] = 50;

    // for (let i = 0; i < arr.length; i++) {
    //    console.log(arr[i]);  //[1,2,3,4,6*undefined,50]共10个
        
    // }
    // //Foreach:遍历数组中有值的元素
    // arr.forEach(function(e){
    //     console.log(e);  //[1,2,3,4,50]共5个
    // })
    //ES6箭头函数：（……） => (……) 简化函数定义
    // arr.forEach((e)=>{
    //     console.log(e);  //[1,2,3,4,50]共5个
    // })

    //push:添加元素到数组末尾
    // arr.push(7,8,9);
    // console.log(arr);//Array(14) [ 1, 2, 3, 4, <6 empty slots>, 50, 7, 8, 9 ]

    //splice:删除元素
    // 1.测试，只删除2开始的2个数即3，4
    // arr.splice(2,2);//splic(start,deleteCount?)
    // console.log(arr);//Array(9) [ 1, 2, <6 empty slots>, 50 ]
    //2.测试，将后面的都删除了
    arr.splice(2);
    console.log(arr);//Array [ 1, 2 ]
</script>
</html>

2.String

image-20250310220301427

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建字符串对象
        //var str = new String("Hello String");
        var str = "Hello String";

        console.log(str);//Hello String
        
        //length
        console.log(str.length);//12

        //charAT
        console.log(str.charAt(4));//o

        //indexOf
        console.log(str.indexOf("lo"));//3

        //trim
        var s1 = "  Hello   ";
        console.log(s1);//"  Hello   "
        var s2 = s1.trim();
        console.log(s2);//"Hello"

        //substring(start,end)---开始索引，结束索引（含头不含尾）
        console.log(str.substring(0,4));//Hell
        console.log(str.substring(0,5));//Hello
    </script>
</body>
</html>

3.JOSN

（1）自定义对象

image-20250310222240014

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //自定义对象
        var user = {
            name: "Tom",
            age: 10,
            gender: "male",
            /* eat : function(){
                alert("用膳~");
            } */
           eat(){
            alert("用膳~");
           }
        }
        //调用
        alert(user.name);
        user.eat();
    </script>
    
</body>
</html>
（2）JOSN对象

image-20250310222511543

image-20250310222710159

（二）浏览器对象模型BOM

image-20250311174628213

1.window对象

image-20250311175149426

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //获取
        // window.alert("Hello BOM");
        // alert("Hello BOM Window");

        //方法
        //confirm -对话框 -- 确认：true，取消：false
        // var flag = confirm("您确认删除记录吗？");
        // alert(flag);

        //定时器 - setInterval --周期性地执行某一个函数
        // var i = 0;
        // setInterval(function(){
        //     i++;
        //     console.log("定时器执行了" + i + "次");
        // },2000);

        //定时器 - setTimeout  --延迟指定时间执行一次
        setTimeout(function(){
            alert("JS");
        },3000);
    </script>

</body>
</html>

2.location对象

image-20250311180153730

 //location
        alert(location.href);//弹出当前地址栏的url

        location.href = "https://itcast.cn";//跳转到对应的url

（三）文档对象模型DOM

image-20250311184459178

image-20250311184758166

image-20250311184902001

*简单的获取元素和修改练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
<script>
    //1.获取Element元素
    //1.1获取元素--根据id获取
    // var img = document.getElementById('h1');
    // alert(img);//[object HTMLImageElement]

    //1.2获取元素--根据标签获取
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }

    //1.3获取元素--根据name属性获取
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //     alert(ins[i]);
    // }

    //1.4获取元素--根据clas属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

     //2.查询参考手册，查找属性和方法
    //例如修改“传智教育”为“黑马教育111”
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = "黑马教育111";
</script>
</html>
*案例

image-20250311191436469

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
<script>
    //1.点亮灯泡：src属性
    var img = document.getElementById('h1');
    img.src = "img/on.gif";

    //2.将所有的div属性内容后加上very good（红色）--<font color = 'red'>very good</font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color = 'red'>very good</font>";
        
    }

    //3.使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
        
    }

</script>
</html>

JavaScript let 和 const | 菜鸟教程

五、JS事件监听

image-20250311193952340

（一）事件绑定

image-20250311194131321

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id = "btn1" value = "事件绑定1" onclick = "on()">
    <input type="button" id = "btn2" value = "事件绑定2">
</body>
<script>
    //1.通过html中的事件属性进行绑定
    function on(){
        alert("按钮1被点击了。");
    }

    //2.通过DOM元素属性绑定
    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了。");
    }


</script>
</html>

（二）常见事件

image-20250311195036408

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

（三）案例

image-20250311214053433

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick = "on()"> 
    <input type="button"  value="熄灭" onclick = "off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus = "lower()" onblur=" upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on(){
        //a.获取img元素对象
        var img = document.getElementById('light');
        //b.设置src属性
        img.src = "img/on.gif";
    }
    function off(){
        //a.获取img元素对象
        var img = document.getElementById('light');
        //b.设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus,onblur
    function lower(){
        //获取元素内容
        var input = document.getElementById('name');
        //转为小写
        input.value = input.value.toLowerCase();
    }
    function upper(){
        //获取元素内容
        var input = document.getElementById('name');
        //转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //获取元素对象
        var hobbies = document.getElementsByName('hobby');
        //设置为选中
        for (let i = 0; i < hobbies.length; i++) {
            const element = hobbies[i];
            element.checked = true;
        }

    }
    function reverse(){
        //获取元素对象
        var hobbies = document.getElementsByName('hobby');
        //设置为无
        for (let i = 0; i < hobbies.length; i++) {
            const element = hobbies[i];
            element.checked = false;
        }

    }



</script>
</html>
JavaWeb学习--复习
wowo
11-04 505
JavaWeb学习 JavaWeb--Html 1、提交按钮 <button onclick="alert('你好')">提交</button>，onclick属性后面加的是点击按钮后的响应事件，使用alert属性后点击按钮就会出现一个提示框，弹出“你好”。 2、页面中显示 和 " (空格)"方法 <!-- 根据需要查看显示字符实体的标签符号-->这是&ltbr&gt标签 <br/>　　--> 使用&lt和.
javaweb复习11111111
06-03
在“javaweb复习11111111”这个主题中，我们可以深入探讨以下几个核心知识点： 1. **Servlet与JSP**： Servlet是JavaWeb开发中的基础，用于处理HTTP请求。它是一个Java类，遵循Servlet接口，可以动态生成响应内容...
JavaWeb复习-03Vue
weixin_74143480的博客
03-12 642
官网：https://v2.cn.vuejs.org/v2/guide/
JavaWeb复习4——JavaScript
海滨漫步的博客
12-30 677
JavaWeb复习第四弹——JavaScript
JavaWeb 考试复习-简答题
kk爱闹
11-24 3248
JavaWeb 考试复习-简答题
JavaWeb复习---html,css,js,jq
qq_42456998的博客
04-13 145
一、Html 普通：<p></p> <h1></h1> <br> 等常见标签 有些标签去哪里查？ W3school离线手册===》 html ===》 html标签列表 重要：<table></table> 表格 <tr>行 <td>列 <form></form> 表单 <form action="提交的位置" method="GTE/POST" e
JAVAWEB复习-JS
weixin_30509393的博客
05-17 83
1.概述 JavaScript是基于对象和事件的脚本语言，主要应用在客户端 特点：信息动态交互，不可直接访问本地磁盘，只要是可以解析js的浏览器都可以跨平台执行 2.JS和JAVA比较 a:JS是面向对象的，JAVA是面向对象 b:JS解析后执行，而JAVA需要先编译成字节码文件再执行 c:JS是一种弱类型语言 3.程序编写的两种方式： 4.变量是弱类型的： 5...
JavaWEB复习~JavaScript
keaimaomao1234的博客
03-24 1074
JavaWeb表单中--JavaScript和jQuery核心知识点汇总
如果回复的的不及时，请见谅。回复不及时请耐心等待。
05-01 1048
JavaScript学习过程中难理解点较多： 基本语法 常用事件 常用DOM操作 由于对一些概念不理解、对一些基本思想不够重视导致对知识的错误应用，因此本文主要解决这些问题，以及对一些重点知识的总结，基本语法不再赘述。 另外，对于初学者，JavaScript及jQuery所学知识点都易遗忘，不要因此恐慌，平常多回头敲敲案例，多复习一下，jQuery的API文档需要用的时候多翻翻看看就行了。
JavaWeb复习
卷心菜是俺的博客
11-05 1491
是运行在Web服务器端的java应用程序，可以生成动态的Web页面，属于客户与服务器响应的中间层。二者可以实现同样的页面效果，不过编写JSP和servlet相比，前者的成本低的多。我们可以为一个资源配置多个Filter，当配置多个Filter后会有一个执行顺序的问题，实际执行顺序是按照在web.xml文件中servlet-mapping的顺序决定的，如果顺序越靠前越先被调用。JSP声明中可以定义网页中的全局变量。那么每个JSP页面的内容有中文并且想获取这些内容，则都要写上上面的代码，这是一件很繁琐的事情。
JavaWeb-复习大纲.docx
12-25
以下是关于JavaWeb复习的一些核心知识点： 1. **Web应用客户端与服务器端**：客户端通常指的是用户使用的浏览器，它使用HTML、CSS、JavaScript等技术进行页面呈现和交互。服务器端则是运行Web应用的地方，如Tomcat...
javaWEB复习资料.docx
05-26
### Java Web基础知识复习 #### 1. 客户端/服务器架构与浏览器/服务器架构 - C/S架构（客户端/服务器）指的是用户通过客户端软件与服务器端进行数据交换的模式，例如桌面应用程序。 - B/S架构（浏览器/服务器）指的...
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
最新发布
成为你自己，做你想做的
06-03 164
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
国芯思辰| 国产四通道24位生理电采集模拟前端AFE全面替换ADS1294R，心电贴性能再飞跃
weixin_38427020的博客
05-29 820
国芯思辰，国产芯片替代
【Elasticsearch】search_after不支持随机到哪一页，只能用于上一页或下一页的场景
risc123456的博客
06-03 368
如果需要跳转到任意一页，`search_after` 无法直接实现，因为它无法像 `from` 和 `size` 那样通过偏移量直接定位到目标页。`search_after` 确实不支持随机访问（即直接跳到任意一页），因此在前端需要随机跳转到某一页的场景中，使用 `search_after` 是不合适的。根据你的描述，如果前端允许用户随意点击某一页，那么确实不适合使用 `search_after`，而应该使用 `from` 和 `size` 来实现分页功能。- 不支持随机访问，用户不能直接跳转到任意一页。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 774
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
网易 - 灵犀办公文档
葡萄城技术团队博客
05-30 544
网易 - 灵犀办公文档
前端面试题目-高频问题集合
huidoo888的博客
05-30 838
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。
day03-Vue-Element
tokisaki_33的博客
06-01 1106
前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
JavaWeb复习：HTML, CSS, DOM与JavaScript基础
"Java Web复习题，包括填空题、判断题和选择题，涉及HTML、CSS、DOM、JavaScript以及JavaWeb概述的相关知识点。" 详细内容: 1. HTML全称为HyperText Markup Language，是一种用于创建网页的标准标记语言，用于定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值