当前位置： 首页 > news >正文

JavaWeb 课堂笔记 —— 02 JavaScript

news 2025/7/8 23:04:49

本系列为笔者学习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.dtcms.com/a/112726.html

相关文章：

  • 机器视觉开发工程师常用C#运算符与使用方法大总结
  • 网络安全防御核心原则与实践指南
  • php7.4.3连接MSsql server方法
  • 方差分析_单因素、多因素、析因方差分析
  • 【首款ARMv9开源芯片“星睿“O6测评】在“周易”NPU上部署Yolov8l模型并实现实时目标检测
  • 场馆预定系统小程序PHP+uniapp
  • 讲述我的PLC自学之路 第六章
  • Harmony OS“一多” 详解：基于窗口变化的断点自适应实现
  • 类的基本概念
  • 深入剖析丝杆升降机工作原理，解锁工业传动奥秘
  • 【C++】C++11＜包装器没写＞
  • 动态规划1——斐波那契数列模型——第 N 个泰波那契数
  • 算法题（117）：字符串的展开
  • 16.2Linux自带的LED灯驱动实验(详细编写)_csdn
  • OJ系统C端UI自动化测试
  • Kubernetes 集群搭建（一）：从环境准备到 Calico 网络插件部署
  • 自定义填充 cad
  • SpringCloudGateWay
  • spring security 过滤器链相关初始化过程
  • 使用 Elastic 实现端到端的大语言模型（LLM）可观测性：洞察生成式 AI 应用这个不透明的世界
  • C/C++测试框架googletest使用示例
  • 用HTML.CSS.JavaScript实现一个贪吃蛇小游戏
  • 基于Go语言实现一个网络聊天室（连接Redis版）
  • Kubernetes集群管理详解：从入门到精通
  • Eliet Chat开发日志：信令服务器注册与通信过程
  • JAVA单例模式
  • 2023-2024总结记录
  • leetcode二叉树刷题调试不方便的解决办法
  • 【Redis】服务端高并发分布式结构
  • 使用Scrapy官方开发的爬虫部署、运行、管理工具：Scrapyd