JavaWeb 课堂笔记 —— 02 JavaScript

news2025/4/6 5:29:01

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 JavaScript ?

JavaScript 是一门跨平台、面向对象的脚本语言，其使得网页可交互。

02 JavaScript 引入方式

标签：<script>

<!-- 内部脚本 -->
<script>
	alert("Hello JavaScript");
</script>

<!-- 外部脚本 -->
<script src="demo.js"></script>

03 JavaScript 基础语法

① 输出语句

<script>
	window.alert("Hello JavaScript"); //弹出警告框
    document.write("Hello JavaScript"); //写入HTML页面
    console.log("Hello JavaScript"); //浏览器控制台输出（F12）
</script>

注：console / kənˈsoʊl / 控制台。

② 变量

var a = 20;
a = "张蓝天";

注：var 为全局变量，可重复定义。

③ 数据类型

在这里插入图片描述

var a = 20;
alert(typeof a); //获取数据类型

④ 运算符

在这里插入图片描述

在这里插入图片描述

⑤ 流程控制语句

在这里插入图片描述

04 JavaScript 函数

//定义
function add(a, b){
    return a + b;
}

var add = function(a, b){
   	return a + b;
}

//调用
var result = add(1, 2);
alert(result);

05 JavaScript 对象

① Array

var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];

arr[10] = "hello";
arr[9] = 'a';
arr[8] = true;

注：JavaScript数组相当于Java集合，其长度可变，类型可变。

在这里插入图片描述

<script>
    var arr = [1, 2, 3, 4];
    for(int i=0; i<arr.length; ++i){
        console.log(arr[i]);
    }
    
    arr.forEach(function(e){
        console.log(e); //仅遍历有值的元素
    }) 
    arr.forEach( (e) => {console.log(e);} ) //ES6 箭头函数 (...) => {...}
    
    arr.push(7, 8, 9);
    console.log(arr);
    
    arr.splice(2, 2); //start number
    console.log(arr);
</script>

② String

var str = new String("Hello JavaScript");
var str = "Hello JavaScript";

在这里插入图片描述

<script>
    var str = "  Hello JavaScript  ";
    
    console.log(str.length);
    console.log(str.charAt(4)); //o
    console.log(str.indexOf(o)); //4
    
    var str2 = str.trim();
    console.log(str2);
    
    console.log(str2.substring(0, 5)) //[start, end)
</script>

③ 对象

var user{
    //属性名：属性值
    name: "Tom";
    age: 10;
    gender: "male";
    //方法
    eat: function(){
        alert("干饭！");
    }
    drink(){
        alert("喝酒！");
    }
}

alert(user.name);
user.eat();

④ JSON

JavaScript Object Notation为通过JavaScript对像标记法书写的文本，由于其语法简单，层次结构鲜明，多用于作为数据载体，在网络中进行数据传输。

在这里插入图片描述

var 变量名 = '{"key1": value1, "key2": value2}'; //JSON字符串

var jsonStr = '{"name": "Tom", "age": 18, "address": {"北京", "上海", "西安"}}';

//JSON字符串 -> JavaScript对象
var obj = JSON.parse(jsonStr);
alert(obj.name);

//JavaScript对象 -> JSON字符串
var str = JSON.string(obj);
alert(atr);

⑤ BOM

Browser Object Model为浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Ⅰ 浏览器窗口对象Window

window.alert("Hello Window");
alert("Hello Window");

在这里插入图片描述

<script>
	//confirm - 对话框 - 确认：true，取消：false
    var flag = confirm("确定删除吗？");
    alert(flag);
    
    //setInterval - 定时器 - 无限循环
    var i = 0;
    setInterval(function(){
        i++;
        console.log("第"i"次振翅")；
    }, 2000)
    
    //setTimeout() - 延迟器 - 延期执行
    setInterval(function(){
        alert("Hello JavaScript");
    }, 3000) //毫秒
</script>

Ⅱ 地址栏对象Location

window.location.href;
location.href;

⑤ DOM

Document Object Model为文档对象模型，将标记语言的各部分封装为对象。

  • Document：整个文档对象
  • Element：元素（标签）对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

在这里插入图片描述

JavaScript通过DOM 就能够对HTML文档进行操作:

  • 改变HTML元素的内容
  • 改变HTML元素的样式(CSS)
  • 对HTML DOM事件作出反应
  • 添加和制除HTML元素

Ⅰ 获取Element元素（标签）对象

在这里插入图片描述

Ⅱ 修改Element元素（标签）内容

<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>
    //点亮灯泡
    var img = document.getElementById("h1");
    img.src = "img/on.gif";
    
    //very good
    var divs = document.getElementByClassName('cls');
    var div1 = divs[0];
    var div2 = divs[1];

    div1.innerHTML += "<font color="red">very good</font>"; 
    div2.innerHTML += "<font color="red">very good</font>";
    
    //勾选方框
    var ins = document.getElementByName("hobby");
    for(let i=0; i<ins.length; ++i){
        const check = ins[i];
      	check.checked = "true"; //问AI呗~
    }
</script>

在这里插入图片描述

06 JavaScript 事件监听

HTML事件是发生在HTML元素上的事情，比如按钮被点击、鼠标移动到元素上或者按下键盘按键，JavaScript可以在事件被侦测到时执行代码。

在这里插入图片描述

① 事件绑定

方式一：通过HTML标签中的属性进行绑定

<body>
<input type="button" onclick="on()" value="按钮1">
</body>
<script>
    function on(){
        alert('我被点击啦！');
    }
</script>

方式二：通过DOM元素属性绑定

<body>
<input type="button" id="btn" balue="按钮2">
</body>
    
<script>
    document.getElementById("btn").onclick=function(){
        alert('我被点击啦！');
    }
</script>

在这里插入图片描述

② 常见事件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

③ 案例

在这里插入图片描述

<!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/on.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(){ //事件监听
        var img = document.getElementsById("light"); //DOM
        img.src="img/on.gif";
    }

    function off(){
        var img = document.getElementsById("light");
        img.src="img/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 
    // 输入框离焦后, 展示大写; 
    function lower(){
        var input = document.getElementById("name");
        input.value = input.toLowerCase();
    }

    function upper(){
        var input = document.getElementById("name");
        input.value = input.toUpperCase();
    }

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 
    // 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; 
    function checkAll(){
        var checks = document.getElementsByName("hobby");
        for(let i=0; i<checks.length; ++i){
            const check = checks[i];
            check.checked = true;
        }
    }

    function reverse(){
        var checks = document.getElementsByName("hobby");
        for(let i=0; i<checks.length; ++i){
            const check = checks[i];
            check.checked = false;
        }
    }

</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2328984.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多GPU训练

多GPU训练

写在前面 限于财力不足&#xff0c;本机上只有一个 GPU 可供使用&#xff0c;因此这部分的代码只能够稍作了解&#xff0c;能够使用的 GPU 也只有一个。 多 GPU 的数据并行&#xff1a;有几张卡&#xff0c;对一个小批量数据&#xff0c;有几张卡就分成几块&#xff0c;每个 …
阅读更多...
如何在 Linux 上安装 Python

如何在 Linux 上安装 Python

本指南介绍如何在Linux机器上安装 Python。Python 已成为开发人员、数据科学家和系统管理员必不可少的编程语言。它用于各种应用&#xff0c;包括 Web 开发、数据科学、自动化和机器学习。 本综合指南将引导您完成在 Linux 系统上安装Python的过程&#xff0c;涵盖从基本包管理…
阅读更多...
系统与网络安全------Windows系统安全（6）

系统与网络安全------Windows系统安全（6）

资料整理于网络资料、书本资料、AI&#xff0c;仅供个人学习参考。 共享文件夹 发布共享文件夹 Windows共享概述 微软公司推出的网络文件/打印机服务系统 可以将一台主机的资源发布给其他主机共有 共享访问的优点 方便、快捷相比光盘 U盘不易受文件大小限制 可以实现访问…
阅读更多...
复古千禧Y2风格霓虹发光酸性镀铬金属短片音乐视频文字标题动画AE/PR模板

复古千禧Y2风格霓虹发光酸性镀铬金属短片音乐视频文字标题动画AE/PR模板

踏入时光机&#xff0c;重温 21 世纪初大胆、未来主义和超光彩的美学&#xff01;这是一个动态的 After Effects 模板&#xff0c;旨在重现千禧年的标志性视觉效果——铬反射、霓虹灯发光、闪亮的金属和流畅的动态图形。无论您是在制作时尚宣传片、怀旧音乐视频还是时尚的社交媒…
阅读更多...
如何设计一个本地缓存

如何设计一个本地缓存

想获取更多高质量的Java技术文章&#xff1f;欢迎访问Java技术小馆官网&#xff0c;持续更新优质内容&#xff0c;助力技术成长 Java技术小馆官网https://www.yuque.com/jtostring 如何设计一个本地缓存 随着系统的复杂性和数据量的增加&#xff0c;如何快速响应用户请求、减…
阅读更多...
SpringBoot洗衣店订单管理系统设计与实现

SpringBoot洗衣店订单管理系统设计与实现

一个基于SpringBoot的洗衣店订单管理系统的设计与实现。 系统概述 支持管理员管理顾客与店家信息、店家管理店铺与洗衣信息&#xff0c;以及顾客预约、查看洗衣信息与交流等功能。 部分功能模块 1. 管理员模块 ​顾客信息管理 ​店家信息管理 2. 店家模块 ​店铺信息管 …
阅读更多...
模版的特性及其编译分离

模版的特性及其编译分离

1.模版的分类 模版参数分为 类型形参 和 非类型形参 类型形参&#xff1a;出现在模版参数列表中&#xff0c;跟在class和typename之后的参数类型名称 非类型形参&#xff1a;就是用一个常量作为类&#xff08;函数&#xff09;模版的一个参数&#xff0c;在类&#xff08;函…
阅读更多...
NO.66十六届蓝桥杯备战|基础算法-贪心-区间问题|凌乱的yyy|Rader Installation|Sunscreen|牛栏预定(C++)

NO.66十六届蓝桥杯备战|基础算法-贪心-区间问题|凌乱的yyy|Rader Installation|Sunscreen|牛栏预定(C++)

区间问题是另⼀种⽐较经典的贪⼼问题。题⽬⾯对的对象是⼀个⼀个的区间&#xff0c;让我们在每个区间上做出取舍。 这种题⽬的解决⽅式⼀般就是按照区间的左端点或者是右端点排序&#xff0c;然后在排序之后的区间上&#xff0c;根据题⽬要求&#xff0c;制定出相应的贪⼼策略&…
阅读更多...
搭建redis主从同步实现读写分离(原理剖析)

搭建redis主从同步实现读写分离(原理剖析)

搭建redis主从同步实现读写分离(原理剖析) 文章目录 搭建redis主从同步实现读写分离(原理剖析)前言一、搭建主从同步二、同步原理 前言 为什么要学习redis主从同步&#xff0c;实现读写分析。因为单机的redis虽然是基于内存&#xff0c;单机并发已经能支撑很高。但是随着业务量…
阅读更多...
Rust切片、结构体、枚举

Rust切片、结构体、枚举

文章目录 切片类型字符串切片其他结构的切片 结构体结构体实例元组结构体结构体所有权输出结构体结构体的方法结构体关联函数单元结构体 枚举match语法Option枚举类if let 语句 切片类型 切片&#xff08;Slice&#xff09;是对数据值的部分“引用” 我们可以从一个数据集合中…
阅读更多...
【学习笔记】深度学习环境部署相关

【学习笔记】深度学习环境部署相关

文章目录 [AI硬件科普] 内存/显存带宽&#xff0c;从 NVIDIA 到苹果 M4[工具使用] tmux 会话管理及会话持久性[A100 02] GPU 服务器压力测试&#xff0c;gpu burn&#xff0c;cpu burn&#xff0c;cuda samples[A100 01] A100 服务器开箱&#xff0c;超微平台&#xff0c;gpu、…
阅读更多...
股票日数据使用_未复权日数据生成前复权日周月季年数据

股票日数据使用_未复权日数据生成前复权日周月季年数据

目录 前置&#xff1a; 准备 代码&#xff1a;数据库交互部分 代码&#xff1a;生成前复权 日、周、月、季、年数据 前置&#xff1a; 1 未复权日数据获取&#xff0c;请查看 https://blog.csdn.net/m0_37967652/article/details/146435589 数据库使用PostgreSQL。更新日…
阅读更多...
【LeetCode Solutions】LeetCode 146 ~ 150 题解

【LeetCode Solutions】LeetCode 146 ~ 150 题解

CONTENTS LeetCode 146. LRU 缓存&#xff08;中等&#xff09;LeetCode 147. 对链表进行插入排序&#xff08;中等&#xff09;LeetCode 148. 排序链表&#xff08;中等&#xff09;LeetCode 149. 直线上最多的点数&#xff08;困难&#xff09;LeetCode 150. 逆波兰表达式求值…
阅读更多...
《 如何更高效地学习》

《 如何更高效地学习》

&#x1f680;个人主页&#xff1a;BabyZZの秘密日记 &#x1f4d6;收入专栏&#xff1a;个人谈心 &#x1f30d;文章目入 一、明确学习目标二、制定学习计划三、选择合适的学习方法&#xff08;一&#xff09;主动学习&#xff08;二&#xff09;分散学习&#xff08;三&#…
阅读更多...
分布式数据一致性场景与方案处理分析｜得物技术

分布式数据一致性场景与方案处理分析｜得物技术

一、引言 在经典的CAP理论中一致性是指分布式或多副本系统中数据在任一时刻均保持逻辑与物理状态的统一&#xff0c;这是确保业务逻辑正确性和系统可靠性的核心要素。在单体应用单一数据库中可以直接通过本地事务(ACID)保证数据的强一致性。 然而随着微服务架构的普及和业务场…
阅读更多...
JAVA：使用 Curator 进行 ZooKeeper 操作的技术指南

JAVA：使用 Curator 进行 ZooKeeper 操作的技术指南

1、简述 Apache Curator 是一个基于 ZooKeeper 的 Java 客户端库&#xff0c;它极大地简化了使用 ZooKeeper 的开发工作。Curator 提供了高层次的 API&#xff0c;封装了很多复杂的 ZooKeeper 操作&#xff0c;例如连接管理、分布式锁、Leader 选举等。 在分布式系统中&#…
阅读更多...
Linux中的调试器gdb与冯·诺伊曼体系

Linux中的调试器gdb与冯·诺伊曼体系

一、Linux中的调试器&#xff1a;gdb 1.1安装与版本查看 可以使用yum进行安装&#xff1a; yum install -y gdb 版本查看&#xff1a;使用指令 gdb --version 1.2调试的先决条件&#xff1a;release版本与debug版本的切换 debug版本&#xff1a;含有调试信息 release版本…
阅读更多...
STM32 + keil5 跑马灯

STM32 + keil5 跑马灯

硬件清单 1. STM32F407VET6 2. STLINK V2下载器(带线) 环境配置 1. 安装ST-LINK 2. 安装并配置 keil5 https://blog.csdn.net/qq_36535414/article/details/108947292 https://blog.csdn.net/weixin_43732386/article/details/117375266 3. 接线并下载 点击"LOAD“&a…
阅读更多...
盲盒小程序开发平台搭建：打造个性化、高互动性的娱乐消费新体验

盲盒小程序开发平台搭建：打造个性化、高互动性的娱乐消费新体验

在数字化浪潮席卷消费市场的今天&#xff0c;盲盒小程序以其独特的趣味性和互动性&#xff0c;迅速成为了年轻人追捧的娱乐消费新宠。盲盒小程序不仅为用户带来了拆盒的惊喜和刺激&#xff0c;更为商家提供了创新的营销手段。为了满足市场对盲盒小程序日益增长的需求&#xff0…
阅读更多...
DuckDB系列教程：如何分析Parquet文件

DuckDB系列教程：如何分析Parquet文件

Parquet 是一种强大的、基于列的存储格式&#xff0c;适用于实现更快捷和更高效的数据分析。您可以使用 DuckDB 这种内存型分析数据库来处理 Parquet 文件并运行查询以对其进行分析。 在这篇文章中&#xff0c;我们将逐步介绍如何使用 DuckDB 对存储在 Parquet 文件中的餐厅订单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023