Java 阶段四 Day03 JavaScript、语言基础、BOM和DOM及前端设计模式

已于 2023-09-26 14:11:18 修改
阅读量303 收藏
点赞数
分类专栏： Java 学习 前端开发 文章标签： 前端 java javascript
于 2023-09-26 11:54:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44693429/article/details/133295354
版权

Java 阶段四 Day03 JavaScript、语言基础、BOM和DOM及前端设计模式

JavaScript概述

什么是JavaScript

JavaScript（通常简称为JS）是一种高级的、多范式的编程语言，用于在Web开发中添加交互性和动态功能。它是一种脚本语言，可以在网页上直接嵌入，由浏览器解释执行。JavaScript是Web技术的三大基石之一，另外两个是HTML（标记语言）和CSS（样式表）。

以下是关于JavaScript的一些关键特点和用途：

  1. 客户端脚本语言：JavaScript主要用于在Web浏览器中运行，它可以直接嵌入到HTML文档中，并由浏览器解释执行。这使得它成为网页前端开发的核心技术之一，用于增加网站的交互性和动态性。

  2. 多范式：JavaScript是一种多范式编程语言，支持面向对象编程、函数式编程和基于原型的编程。这使得它非常灵活，适用于各种编程场景。

  3. 事件驱动：JavaScript通常与HTML事件模型结合使用，可以通过事件处理程序来响应用户交互，例如点击、输入、鼠标移动等事件。

  4. 跨平台：JavaScript可以在各种操作系统上的不同浏览器中运行，因此具有跨平台性。

  5. 库和框架：JavaScript生态系统中存在大量的库和框架，如React、Angular、Vue.js等，它们使得开发者能够更轻松地构建复杂的Web应用程序。

  6. 服务器端编程：除了在客户端浏览器中运行，JavaScript也可以用于服务器端编程。Node.js是一个流行的服务器端JavaScript运行时环境，允许开发者构建高性能的服务器应用程序。

  7. 数据交互：JavaScript可以通过Ajax（Asynchronous JavaScript and XML）等技术与服务器进行数据交互，动态地加载内容，而不需要重新加载整个网页。

  8. 开发工具：JavaScript开发者可以使用各种集成开发环境（IDE）、文本编辑器和浏览器开发工具来编写、调试和测试JavaScript代码。

语言特点

JavaScript 是一种多用途、高级、动态的编程语言，它在Web开发中扮演了重要的角色。以下是 JavaScript 的一些主要特点：

  1. 动态类型：JavaScript 是一种动态类型语言，这意味着变量的数据类型是根据赋给它们的值自动确定的。这使得 JavaScript 灵活，但也可能导致类型相关的错误。

  2. 弱类型：JavaScript 是一种弱类型语言，这意味着它不会强制执行严格的类型检查，使得变量可以在不同的数据类型之间自由转换。这可以提供灵活性，但也需要谨慎处理类型相关的问题。

  3. 闭包：JavaScript 支持闭包，这是一种允许函数访问其外部作用域中变量的机制。这对于数据封装和函数式编程非常有用。

  4. 异步编程：JavaScript 内置了处理异步操作的能力，例如通过回调函数、Promise 对象和 async/await 关键字。这使得 JavaScript 适用于处理网络请求、文件读写等需要等待时间较长的任务。

  5. 丰富的生态系统：JavaScript 生态系统包括大量的库和框架，如 React、Angular、Vue.js 等，用于构建高性能、复杂的前端和后端应用程序。

  6. 扩展性：通过使用 JavaScript 的扩展库或自定义代码，您可以为语言添加新功能和功能。

一门编程语言包括哪些内容

  • 变量
  • 数据类型
  • 运算符
  • 各种语句
  • 方法
  • 面向对象

语言基础

变量

  • JavaScript语言属于弱类型语言，声明变量不需要指定类型
  • JavaScript语言中通过let或var声明变量
    • let声明的变量，作用域和Java语言类似，块级作用域（推荐使用）
    • var声明的变量，全局作用域

JavaScript常用数据类型

  • 基本数据类型
    • 字符串（String）、数字（Number）、布尔（Boolean）、未定义（Undefined）
  • 引用类型
    • 对象（Object）、数组（Array）、函数（Function）

获取变量类型的方式： typeof 变量名;

运算符

  • 算术运算符：+ 、 - 、 * 、/ 、 %
    • 除法运算会自动根据结果转换整数或小数
      • java：int x = 5; int y=2; int z = x/y; z=2
      • js：let x = 5; let y=2; let z = x/y; z=2.5 x=6 z=3
  • 关系运算符：> 、< 、>= 、<= 、!= 、== 、===
    • ==：先统一等号两边变量的类型，再比较值 “666”==666 true
    • ===：先比较类型，类型相同后再比较值 “666”===666 false
  • 逻辑运算符：&& 、|| 、! 只支持短路与 和 短路或
  • 赋值运算符：= 、+= 、-= 、*= 、/= 、%=
  • 三目运算符：条件?值1:值2

各种语句

  • 分支语句：if 和 else
  • for 新循环：for(Person p : persons) JS： for(let p of persons)
  • while
  • switch case

如何在HTML页面中引入JavaScript代码

在 HTML 页面中引入 JavaScript 代码通常有几种方式，取决于需求和偏好。以下是最常见的几种方式：

  1. 内联方式（Inline）：您可以在 HTML 页面的 <script> 标签中直接编写 JavaScript 代码。这种方式适用于短小的脚本或者需要在特定位置执行的代码。

    <!DOCTYPE html>
<html>
<head>
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // 在这里编写您的 JavaScript 代码
        alert("Hello from inline JavaScript!");
    </script>
</body>
</html>

  2. 外部文件方式（External）：将 JavaScript 代码保存到外部的 .js 文件中，然后通过 <script> 标签的 src 属性引入这个外部文件。这是更好的做法，特别是当您有多个页面需要共享相同的 JavaScript 代码时。

    <!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="myscript.js"></script>
</body>
</html>

    在上述示例中，myscript.js 是包含 JavaScript 代码的外部文件，它应该位于与HTML文件相同的目录中，或者您可以使用绝对或相对路径来指定文件的位置。

    • 延迟（Deferred）和异步（Async）加载：在外部文件方式下，您可以使用 defer 或 async 属性来控制脚本的加载和执行方式。

      • defer：脚本会在 HTML 文档解析完成后，但在 DOMContentLoaded 事件触发前执行。多个 defer 脚本会按照它们在页面中的顺序执行。
      • async：脚本会在下载完成后立即执行，而不会阻塞页面的解析。多个 async 脚本的执行顺序不确定。
      <script src="myscript.js" defer></script>
<script src="myscript.js" async></script>

    • 模块化方式（Module）：如果您的 JavaScript 代码使用了 ES6 模块化，可以将脚本标记为模块并使用 type="module" 属性。

      <script type="module" src="main.js"></script>

      这样的脚本将按照模块化的方式加载和执行，允许使用 import 和 export 关键字来导入和导出模块。

方法

JS：function 方法名(参数列表){方法体}

  • 三种定义方法的方式:

    • function 方法名(参数列表){方法体}
    • let 方法名 = function(参数列表){方法体}
    • let 方法名 = new Function(“参数1”，“参数2”，“方法体”);

和页面相关的方法

  • 通过选择器获取页面中的元素对象

    • let 元素对象 = document.querySelector(“选择器”);

  • 获取和修改控件的值

    • input.value 获取
    • input.value=“xxx” 修改

  • 获取和修改元素的文本内容

    • 变量.innerText 获取
    • 变量.innerText = “xxx ” 修改

BOM和DOM

BOM（Browser Object Model）和 DOM（Document Object Model）都是与网页和浏览器相关的重要概念，它们分别表示浏览器对象模型和文档对象模型。

什么是BOM（Browser Object Model 浏览器对象模型）

  1. 概念：BOM 是一种表示浏览器窗口和其它浏览器功能的编程接口。它提供了访问和控制浏览器窗口属性（如大小和位置）、导航历史、浏览器标签、计时器、对话框、Cookie 等功能。BOM 不是 W3C 标准，因此它的具体实现在不同的浏览器中可能会有所不同。

  2. 用途：BOM 可用于控制浏览器窗口的行为，例如打开新窗口、关闭窗口、获取浏览器的窗口尺寸、操作浏览器历史记录等。它还可以与客户端存储、地理位置、屏幕亮度等进行交互。

  3. 例子：以下是一个使用 JavaScript 操作 BOM 的示例：

    // 打开一个新窗口
var newWindow = window.open("https://www.example.com", "myWindow", "width=500,height=300");

// 获取当前窗口的尺寸
var width = window.innerWidth;
var height = window.innerHeight;

// 跳转到新的 URL
window.location.href = "https://www.example.com";

常见的 BOM 对象：
BOM（浏览器对象模型）提供了一组对象，用于访问和控制浏览器窗口及其功能。以下是常见的 BOM 对象：

  1. window 对象：window 对象是 BOM 中的顶级对象，表示整个浏览器窗口。它包含许多属性和方法，用于操作浏览器窗口和访问浏览器的功能。例如，您可以使用 window.open() 打开新窗口，使用 window.location 获取当前页面的 URL，使用 window.alert() 显示警告框，window.confirm(“xxx”)弹出确认框，
    window.prompt(“xxx”) 弹出文本框等。

  2. document 对象：document 对象代表当前加载的网页文档，它提供了访问和操作文档内容的方法。通过 document 对象，您可以访问和修改页面的元素、属性、样式以及文档结构。例如，使用 document.getElementById() 可以获取页面上的元素。

  3. navigator 对象：navigator 对象包含有关浏览器的信息，例如浏览器的名称、版本、操作系统等。这可以用于检测用户的浏览器和环境。

  4. screen 对象：screen 对象提供有关用户屏幕的信息，如屏幕的宽度、高度、颜色深度等。这些信息可以用于调整网页的布局和样式以适应不同的屏幕大小。

  5. location 对象：location 对象表示当前页面的 URL，并提供了许多方法来操作浏览器的历史记录、导航和重定向。例如，您可以使用 location.href 来获取当前页面的 URL，或者使用 location.reload() 刷新页面。

  6. history 对象：history 对象允许您访问浏览器的历史记录，并在不刷新页面的情况下进行导航。您可以使用history.length()返回历史页面的数量， history.back() 和 history.forward() 来导航到前一个或后一个页面，以及使用 history.go() 跳转到特定的历史记录项。

  7. console 对象：console 对象用于在浏览器的控制台中输出日志信息，方便调试和错误追踪。常见的方法包括 console.log()、console.error()、console.warn() 等。

  8. localStorage 和 sessionStorage 对象：这两个对象用于客户端存储数据，可以在浏览器中存储数据并在会话之间保持持久性。localStorage 存储的数据在浏览器关闭后仍然可用，而 sessionStorage 存储的数据在会话结束后被清除。

  9. Cookies 对象：document.cookie 属性用于读取和设置浏览器的 Cookies。Cookies 是一种用于在客户端存储小段数据的机制，通常用于跟踪用户会话和存储用户首选项。

什么是DOM（Document Object Model 文档对象模型）

  1. 概念：DOM 是一种树状结构的编程接口，表示网页文档的结构，允许开发者使用编程语言（如 JavaScript）来访问、操作和修改网页的内容、结构和样式。DOM 将 HTML 或 XML 文档解析为一个由节点组成的树状结构，其中每个节点代表文档中的一个元素、属性或文本内容。

  2. 用途：DOM 可以让开发者使用脚本语言来动态地更新网页内容、响应用户操作、获取和修改网页元素的属性和值。通过 DOM，开发者可以实现交互性、动态性和实时性的网页应用程序。

  3. 例子：以下是一个使用 JavaScript 操作 DOM 的简单示例：

    // 获取一个元素
var element = document.getElementById("myElement");

// 修改元素的文本内容
element.innerHTML = "Hello, DOM!";

// 创建元素对象	

let d = document.createElement(“div”);

// 添加元素到某个元素里面
 d.append("hello");

总结

  • DOM 是用于操作网页内容和结构的编程接口，而 BOM 是用于操作浏览器窗口和浏览器功能的编程接口。
  • DOM 允许开发者访问和操作网页的元素和内容，从而实现网页的交互性和动态性。
  • BOM 允许开发者控制浏览器窗口的行为以及与浏览器的其它功能进行交互。
  • DOM 是 W3C 的标准，而 BOM 不是，因此 BOM 的实现在不同浏览器中可能会有所不同。

前端MVC设计模式

MVC设计模式就是将实现前端业务的所有代码划分为三部分

  • M：model 模型 ， 对应数据相关代码
  • V：View 视图， 对应的是页面标签相关
  • C：Controller 控制器， 对应的是将数据显示到页面中的过程代码

前端MVC设计模式存在弊端：在Controller控制器部分，需要频繁的进行DOM相关操作(遍历查找元素)，比较浪费资源 ， MVVM设计模式可以解决此问题

前端MVVM设计模式

MVVM设计模式也是将实现前端业务的所有代码划分为三部分

  • M：model 模型 ， 对应数据相关代码
  • V：View 视图， 对应的是页面标签相关
  • VM：视图模型， 视图模型负责将页面中可能发生改变的元素和某个变量在内存中进行绑定， 并对变量进行监听，当变量发生改变时，会从内存中找到和变量所对应的元素， 让元素进行改动，这样就不用像MVC设计模式中通过遍历查找的方式查找元素了，从而提高执行的效率。
JAVA救救我
关注
专栏目录
谷粒学院——Day03【项目前端相关基础知识一】
Java技术一点通
11-08 519
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 J
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4055
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
Java阶段三Day03
今天你学Java了吗
05-24 1194
今天是学习Java阶段三的第三天，学习JS的一些知识，回顾了基础的如关系符、循环语句、条件语句等知识，了解了BOM和DOM，学习了前端设计模式
Java学习Day35：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 1131
JS语句;
【coderwhy前端笔记 - 阶段二 JavaScript基础】
hippyoo的博客
11-23 1107
js章节没有像前面四章（html+css）事无巨细的记录（文章暂未美化）
JavaScript ECMAScrip DOM BOM
weixin_43999652的博客
09-03 231
JavaScript基础语法 什么是javascript 是一种描述语言，基于对象和时间驱动的脚本语言 JavaScript特点 ◼ 脚本语言（一种轻量级的编程语言） ◼一种解释性语言（无需预编译） ◼被设计为向HTML页面添加交互行为 ◼运行于客户端 JavaScript的简史 ◼95年LiveScript（Netscape公司） ◼ Netscape将其更名为JavaScript ◼微...
JavaScript入门BOM操作，2024年最新毕业一年萌新的Web前端大厂面经
imtokenmax众筹
04-21 544
另外，你也可以使用 setTimeout() 函数来创建一个定时器，在指定的时间后执行一次特定的代码。在这个示例中，setInterval() 函数会每隔1秒执行一次指定的代码块，直到执行了5次后通过 clearInterval() 停止间歇调用。// 输出：Banana, Orange, Apple, Mango。// 输出：[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
04 JavaScript-BOM
2202_75315729的博客
08-10 793
1. trim() 1/只能去除字符串前后的空自2. replace()//替换b. g全局替换C.i保证大小写一致，一起被识别替换3. split(“l”)//字符串变数组4. tolowerCase()、toUpperCase()，转换大小offset这个单词本身是-偏移，补偿，位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族；
JavaScript-BOM
yhwl66的博客
03-16 80
BOM全称 (browser object model) 浏览器对象模型，主要用操作浏览器相关的内容（调用浏览器相关的功能及获取浏览器携带的内容），BOM是JavaScript的重要组成，但是他缺少规范，所以他是通过共有对象来解决没有规范的问题。（前面BOM相关的内容没有融入w3c 导致他有兼容问题）。ie的bom对象里面的相关参数及方法是最多的，由于是共有对象所以这些参数都被其他浏览器采用了。window窗口对象，他是浏览器的global对象，他包含所有的全局变量。
JavaScript基础
weixin_59742742的博客
12-23 553
认识jS JS的组成 ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象 JS是ES的语言层面的实现 因为除了语言规范之外，JS还需要对页面和浏览器进行各种操作 除了基本实现之外，还包括DOM操作和BOM操作 JS的三个组成 ESMAScript：定于语言规范 DOM：操作文档的API BOM：操作浏览器的API JS由谁来运行 html与css是由浏览器进行解析 而JS是由浏览器中的JS引擎来运行的 JS引擎帮助我们将JS代码翻译成CPU指令来执行 比较
day-day-up:系统的把前端零碎的知识点整理，更全面，更细节的学习前端知识，持续更新中。。
05-01
我们一起day day up 目录 ECMAscript 变量类型 原型和原型链 作用域，闭包和内存 事件循环 框架 vue 基本使用 组件 高级特性 周边工具（vuex，vue-router） ...vue和react对比 ...BOM ...DOM ...设计模式 正在整理中
做一个能适配「手机」的网站需要注意什么
最新发布
illidri的博客
11-01 131
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 473
使用filterable。
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1390
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 643
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
前端 常见开发工具使用
weixin_45534301的博客
10-31 389
【代码】前端 常见开发工具使用。
CSS3新增盒子属性（三）
。
10-28 1036
介绍CSS3新增盒子属性。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 249
Google Recaptcha V2 简单使用
vue父子通讯
Jsjendndn的博客
10-28 303
下面是子组件子组件使用Props发送。
掌握JavaScript高级BOM与DOM对象及实战案例
在Day10的JavaScript高级课程中，主要关注两个核心知识点：Browser Object Model (BOM) 和 Document Object Model (DOM)。这两个模型是Web开发中的关键组成部分，对于理解和操纵网页内容以及用户交互至关重要。 BOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值