黑马JavaWeb开发笔记05——JavaScript介绍、基本语法、函数、对象（Array, String, json, BOM, DOM）、事件监听

已于 2024-08-27 16:36:58 修改
阅读量1.3k 收藏 14
点赞数 31
分类专栏： 黑马JavaWeb企业级开发全流程（笔记梳理） 文章标签： javascript json 开发语言 前端 html vscode
于 2024-08-25 23:40:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_68589597/article/details/141035091
版权

文章目录

前言

本篇文章是2023年最新黑马JavaWeb开发笔记05：JavaScript介绍、基本语法、函数、对象、事件的总结，帮助需要学习Web开发的朋友温故而知新。

  1. JS介绍
  2. JS基本语法
  3. JS函数
  4. JS对象（Array, String, json, BOM, DOM）
  5. JS事件监听

一、JavaScript介绍和引入方式

1. 介绍

  • 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，使网页可以交互
    • 脚本语言：这样的代码编写出来不需要经过编译，直接经过浏览器解释就可以运行
  • JavaScript和java是完全不同的语言，无论是概念还是设计，但是基础语法类似

2. 引入方式

  • 第一种方式：内部脚本（将JS代码定义在HTML页面中）
    • JavaScript代码必须位于< script >< /script >标签之间
    • 在HTML文档中，可以在任意地方，放置任意数量的< script >
    • 一般会把脚本置于< body >元素的底部，可改善显示速度
  • 第二种方式：外部脚本（将JS代码定义在外部 JS文件中，然后引入到 HTML页面中）
    • 外部JS文件中，只包含JS代码，不包含< script >标签
    • 引入外部js的< script >标签，必须是双标签

3. VScode引入演示

第一种：内部脚本
用最简单的alert进行演示，会出现弹窗：
在这里插入图片描述

第二种：外部脚本

  • 新建文件夹专门存放js文件，写入语句
    在这里插入图片描述
  • 输入scr就可以自动引入js外部文件（选择script: src）
    • 注意：demo.js中只有js代码，没有< script >标签
    • 注意：不能自闭合，否则无效

      在这里插入图片描述

二、JavaScript基础语法

1. 书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无（建议写上，更加严谨）
  • 大括号表示代码块
  • 注释：
    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */
  • 输出语句（三种方式）
    在这里插入图片描述
  • 警告框输出
    在这里插入图片描述
  • 在HTML输出内容
    在这里插入图片描述
  • 写入浏览器控制台
    （本人用的是Google，F12点击Console就可以看到了）
    在这里插入图片描述

2. 变量

  • js声明变量主要通过以下三种关键字
    在这里插入图片描述
    • 不需要指定特定的数据类型，直接用var就可以
  • js中声明变量还需要注意如下几点：

    • JavaScript 是一门弱类型语言，变量（var）可以存放不同类型的值。
      在这里插入图片描述

    • 变量名需要遵循如下规则：

      • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
      • 数字不能开头
      • 建议使用驼峰命名

2.1 var

  • 作用域比较大，是全局变量
    （在代码块里定义的x仍能被代码块外面的alert接收到）
    在这里插入图片描述
  • 可以重复定义（新的定义会取代旧的定义）

2.2 let

  • 在ECMAScript 6 新增了 let关键字来定义变量
  • 它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效
  • 不允许重复声明

2.3 const

  • 新增了const关键字用来声明常量
  • 常量的值无法更改

3. 数据类型、运算符、流程控制语句

3.1 数据类型

  • 原始类型 和 引用类型
    在这里插入图片描述
  • 使用typeof函数可以返回变量的数据类型
    在这里插入图片描述

3.2 运算符

在这里插入图片描述

  • ==
    • 只比较值是否相等，不区分数据类型
    • 会自动转换类型进行值得比较
  • ===
    • 不光比较值，还要比较类型
    • 如果类型不一致，直接返回false
  • js中可以通过parseInt()函数来进行将其他类型转换成数值类型
    在这里插入图片描述
  • 在js中，还有非常重要的一点是：0, null, undefined, “”, NaN 理解成false,反之理解成true
    • " "里面虽然是空格，但是还是视为非空字符串，仍然是true
    • ""里面什么都没有，视为空字符串，所以是false
    • 浏览器刷新页面，发现没有任何弹框，因为0理解成false，所以条件不成立
      在这里插入图片描述
    • 浏览器刷新，因为1理解成true，条件成立
      在这里插入图片描述
      在这里插入图片描述

3.3 流程控制语句

if，switch，for等和java保持一致，不再赘述

三、JavaScript函数

1. 第一种定义方式

在这里插入图片描述

  • 因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：
    • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
    • 返回值不需要声明类型，直接return即可
      在这里插入图片描述

2. 第二种定义方式

在这里插入图片描述
代码实现：
在这里插入图片描述

3. 注意事项

JS中，函数调用可以传递任意个数的参数。
在这里插入图片描述

四、JavaScript对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript，点击右侧的参考书。

  • 可以大体分为3大类：
    • 第一类：基本对象,我们主要学习Array和JSON和String
    • 第二类：BOM对象,主要是和浏览器相关的几个对象
    • 第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

1. 基本对象-Array

Array对象时用来定义数组的。

  • 定义：

    • 语法格式1：
      var 变量名 = new Array(元素列表);
    • 语法格式2：
      var 变量名 = [ 元素列表 ];
    • 数组访问:
      arr[索引] = 值;

  • 特点：

    • JavaScript中数组相当于java中的集合，数组的长度是可以变化的
      在这里插入图片描述
    • JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值
      在这里插入图片描述
      在这里插入图片描述

  • 属性

    • length属性可以用来获取数组的长度，可以用来遍历数组中的元素
      在这里插入图片描述
      在这里插入图片描述

  • 方法
    在这里插入图片描述

    • forEach()
      没有元素的内容是不会输出的，forEach只会遍历有值的元素
      - 用来遍历的所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值
    • push()函数
    • 用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素
      在这里插入图片描述
    • splice()函数
      • 删除数组中的元素，函数中填入2个参数
      • 参数1：表示从哪个索引位置删除
      • 参数2：表示删除元素的个数
        在这里插入图片描述

2. 基本对象-String

  • 定义：

    • 方式1
      var 变量名 = new String("…") ;
    • 方式2
      var 变量名 = "…" ;

  • 属性
    在这里插入图片描述

  • 方法
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3. 基本对象-JSON

3.1 JS自定义对象

  • 语法格式
    在这里插入图片描述
    • 调用属性
      对象名.属性名
    • 调用函数
      对象名.函数名()
    • 函数方法的写法可以简化
      在这里插入图片描述

3.2 JavaScript Object Notation 对象标记法

  • 通过JavaScript标记法书写的文本
  • json这种数据格式的文本经常用来作为前后台交互的数据载体
  • 可以搜索json在线解析，可以检查自己写的json语句是否正确
    在这里插入图片描述

3.3 JSON基本语法

  • 定义
    var 变量名 = '{"key1": value1, "key2": value2}';
  • 示例
    在这里插入图片描述
  • 如果这里用alert(jsonstr.name);的话，浏览器会输出undefined，因为此时的jsonstr是字符串，而json.属性名是json对象的获取方式，所以不能这么获取。
  • 有两种方法进行json字符串和JS对象的转换方式：
      1. JSON字符串转换为JS对象
        var jsObject = JSON.parse(userStr);
      1. JS对象转换为JSON字符串
        var jsonStr = JSON.stringify(jsObject);

4. BOM对象

  • BOM的全称是Browser Object Model 浏览器对象模型，是JavaScript将浏览器的各个组成部分封装成了对象
  • 我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成
  • 例如：我们想要将浏览器的地址改为 http://www.baidu.com ,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：
    location.href='http://www.baidu.com'
  • BOM主要提供五个对象
    在这里插入图片描述
    上述5个对象与浏览器各组成对应的关系如下图所示：
    在这里插入图片描述

4.1 window对象

  • window对象指的是浏览器窗口对象，是JavaScript的全部对象

  • 对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window

  • 例如：我们之前学习的alert()函数其实是属于window对象的
    在这里插入图片描述

  • window对象提供了获取其他BOM对象的属性：
    在这里插入图片描述

    • location
      • 地址栏对象
      • 获取：使用window.location获取
      • 属性：href：设置或返回完整的URL
        在这里插入图片描述
        在这里插入图片描述

  • window也提供了一些常用的函数，如下表格所示：
    在这里插入图片描述

    • confirm()
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    • setInterval()
      在这里插入图片描述
      在这里插入图片描述
    • setTimeout()
      在这里插入图片描述
      浏览器会在延时3秒后弹出弹框，点击确定后不会再出现。

5. DOM对象

5.1 DOM介绍

  • DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象
  • 将标记语言的各个组成部分封装为对应的对象
    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
  • 左边是 HTML 文档内容，右边是 DOM 树
    在这里插入图片描述
  • DOM作用
    • 改变 HTML 元素的内容
    • 改变 HTML 元素的样式（CSS）
    • 对 HTML DOM 事件作出反应
    • 添加和删除 HTML 元素

5.2 获取DOM对象

要操作DOM对象的前提是先获取元素对象，然后才能操作。所以学习DOM,主要的核心是：

  • 如何获取DOM中的元素对象（Element对象 ，也就是标签）
  • 如何操作Element对象的属性,也就是标签的属性。

获取DOM中的元素对象

  • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

  • document对象提供的用于获取Element元素对象的api如下表所示：
    在这里插入图片描述
    body里面写入如下内容，用于方法的测试：
    在这里插入图片描述

  • document.getElementById()
    根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象
    在这里插入图片描述

  • document.getElementsByTagName()
    根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组
    在这里插入图片描述

  • document.getElementsByName()
    根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组
    在这里插入图片描述

  • document.getElementsByClassName()
    根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组
    在这里插入图片描述

操作Element对象的属性

  • 查询文档资料
    在这里插入图片描述
  • 可以看到我们可以通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育666
    在这里插入图片描述

五、JavaScript事件监听

1. 介绍

  • 事件
    HTML事件是发生在HTML元素上的 “事情”，例如：按钮被点击；鼠标移到元素上；输入框失去焦点等等…
  • 事件监听
    给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。

2. 事件绑定

在这里插入图片描述

JavaScript对于事件的绑定提供了2种方式

  • 方式1：通过html标签中的事件属性进行绑定
    例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数
    在这里插入图片描述

  • 方式2：通过DOM中Element元素的事件属性进行绑定
    依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性
    在这里插入图片描述

3. 常用事件

在这里插入图片描述

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）05：JavaScript介绍、基本语法、函数、对象、事件内容的总结，帮助需要学习Web开发的朋友温故而知新。

Cosmos复调
关注
专栏目录
JavaScript 学习笔记（五）
12-10
本地对象 ①Array类 ②Date类 对象的类型 内置对象 ①Global对象 ②Math对象 宿主对象 今天继续学习JS中的对象，昨天内置对象Global对象和Math对象，今天继续。宿主对象 所有非本地对象都是宿主对象host object，即由ECMAScript实现的宿主环境提供的对象。所有BOM和DOM对象都是宿主对象，书上说将在后面的章节讨论。-_-||| 作用域 JS中只存在一种作用域—-公用作用域，所有对象的所有属性和方法是公用的。许多开发者都在网上提出了有效的属性作用域模式，解决了ECMAScript的这种问题。由于缺少私有作用域，开发者们制定了一个规约，规定在属性名前后加
黑马【JavaScript】知识点及笔记
m0_53365899的博客
05-04 2160
这里写自定义目录标题一，JavaScript概念二，JS与html的结合方式1，内部JS2，外部JS三，JavaScript中的注释和数据类型1，注释：2，数据类型四，JavaScript运算符1，一元运算符2，算术运算符3，比较运算符4，逻辑运算符5，三元运算符6，流程控制语句7，JS特殊语法：8，练习99乘法口诀表五，JavaScript对象1，Function对象2，Array对象日期对象Date 一，JavaScript概念 二，JS与html的结合方式 1，内部JS 当script标
03 day1--javascript笔记pink老师-基础知识 看这一篇就够了！
小女不才
08-30 3439
内容 链接 day1 基础知识大总结 链接 day2 基础知识之函数与作用域 链接 day3 基础知识之对象与内置对象 链接 day4 进阶之DOM技术 链接 day5 进阶之BOM技术 链接 day6 提高之面向对象 链接 day7 提高之ES6 链接 1 初识JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来...
JavaWeb企业开发全流程-黑马程序员
Kim-Hyunyeon的博客
09-25 4573
黑马程序员2023新版JavaWeb企业开发全流程学习笔记（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
JavaWeb？一篇足够！JavaScript笔记整理
PsychoPass的博客
04-18 524
Array对象用来定义数组注意JavaScript的数组是可变的，可以“越界存储”。调用对象和函数直接对象名.属性名和函数名即可。
黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
qq_69325307的博客
03-30 3864
感谢黑马，感谢努力的自己，终将成为黑马。
javaweb开发02|JavaScript
cmgdxrz的博客
07-05 176
脚本语言：不需要编译，直接经过浏览器的解释就可以运行了。java：需要编译，源代码编译成.class文件，再给虚拟机运行。
JavaWeb——002JS & Vue快速入门
pangyaqi的博客
02-21 1079
Vue-快速入门//定义Vue对象new Vue({el: "#app", //vue接管区域data:{})
JavaWeb-JS
2301_79602614的博客
05-26 1018
JS是用来控制网页行为的,那到底是如何控制的呢?Html被浏览器加载并解析之后机就会就会封装成这五种对象,同时在浏览器的内存当中也会形成DOM结构,也叫DOM树。脚本语言指的是:将来JavaScript编写出来的代码,不需要经过编译,直接经过浏览器解释就可以运行。是完全不同的语言，不论是概念还是设计。是用来控制网页行为的，它能使网页可交互。：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。遍历数组中的每个有值的元素，并调用一次传入的函数。：当声明的变量未初始化时，该变量的默认值是。
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
黑马程序员JAVA WEB全笔记pdf
03-26
【Java Web 全面解析】 ...本笔记深入浅出地介绍了Java Web开发的核心技术，通过学习这些知识点，开发者可以构建功能丰富的动态网站，并为进一步学习Spring、Hibernate、MyBatis等高级框架打下坚实基础。
javaweb项目实（含笔记与详细实现步骤）
07-20
JavaWeb项目实（含笔记与详细实现步骤） JavaWeb是一种基于Java技术的Web应用程序开发框架，它涵盖了服务器端编程、数据库交互、用户界面设计等多个方面。对于初学者来说，掌握JavaWeb开发是步入Web开发领域的关键...
黑马程序员_超全面的JavaWeb教程-视频+源码笔记
08-29
### 黑马程序员_超全面的JavaWeb教程-视频+源码笔记 #### JavaWeb基础知识概览 在深入了解本教程之前，我们先来简要回顾一下JavaWeb的基础知识。JavaWeb是利用Java语言开发Web应用的技术集合。它主要包括Servlet、...
Web前端-JavaScript
weixin_43866613的博客
04-15 1017
JavaScript 中 Array 对象用于定义数组定义方式一方式二访问定义格式调用格式概念：JavaScript Object Notation，JavaScript对象标记法JSON是通过JavaScript对象标记法书写的文本由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输正确的JSON格式：key必须使用双引号"age":20,
JavaWeb——JavaScript
qq_45821255的博客
06-25 5113
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
如何搭建Vue脚手架
w6437286的博客
09-26 494
本文主要讲解如何搭建vue脚手架。
JavaScript ArrayBuffer的读写与类型转换
最新发布
白瑕 的博客
10-01 262
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
JavaWeb入门学习笔记：HTML基本语法与元素解析
"这篇资源是作者作为从Delphi转向JavaWeb的学习笔记，主要根据传智播客的视频和网络上的资料编撰而成，用于记录学习过程中的关键知识点，便于回顾和复习。" 在JavaWeb的学习中，HTML是基础，它是构建网页结构的语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值