学习日记-JS+DOM-day54-9.12

1.javascript基本说明

知识点

核心内容

重点

JavaScript基础

控制HTML内容与属性,实现动态行为(如开灯/关灯效果)

src属性路径修正(./与../的区别)

前端三要素

HTML(内容)、CSS(样式)、JavaScript(行为)的定位与分工

JavaScript的核心作用(数据验证、交互逻辑)

官方文档使用

W3C离线手册与在线文档的查找方法(JavaScript章节)

快捷键操作(Ctrl+滚轮缩放页面)

开发环境配置

IDEA工程创建与目录结构规范(路径斜杠问题)

工程路径未正确指定的常见错误

2.javascript弱类型特点

知识点

核心内容

重点

解释型语言特性

JavaScript是逐条解释执行的脚本语言,无需编译生成中间文件(如Java的.class文件)

与编译型语言(Java/C++)的执行机制差异

弱类型系统

变量数据类型可动态变化(如var name从字符串变为数值),无需显式声明类型

强类型语言(Java)开发者需适应类型灵活性

运行环境依赖

依赖浏览器解释执行(如Chrome/IE),跨平台但受环境差异影响

浏览器缓存可能导致调试结果不一致(需刷新验证)

代码书写规范

语句末尾分号可选(但建议统一添加),代码可写在<script>标签内

分号省略风险(如京东等企业规范强制使用)

类型检测方法

使用typeof动态获取变量类型(如typeof name输出"string"或"number")

类型隐式转换(如123 + "ABC"拼接为字符串)

输出调试方式

alert()弹窗显示 / console.log()控制台输出(支持log/info/error等多级别)

调试工具选择(弹窗会阻塞代码执行)

3.js使用方式(1) 在script中写

知识点

核心内容

重点

JavaScript使用方式

script标签嵌入JS代码:可在head或body中嵌入,执行顺序从上到下

执行顺序与位置关系

代码书写规范

console.log输出语句分号可选,建议放在head部分

分号使用规范

script标签位置

标准建议放在head中,但实际开发中body内也可使用

最佳实践与标准差异

代码执行特点

JavaScript按书写顺序执行,与Vue等框架有相似特点

执行机制理解

4.js使用方式(2)  在script引入js

知识点

核心内容

重点

JS代码引入方式

通过<script>标签的src属性引入外部JS文件(如<script src="./js/my.js">)

路径格式(相对路径./js/my.js vs 绝对路径)

JS代码内嵌方式

直接在HTML文件中用<script>标签编写JS代码(如<script>alert("你好")</script>)

Type属性可选性(type="text/javascript"可省略)

混用规则

两种JS使用方式不可混用(仅生效先加载的代码)

执行顺序优先级(引入文件优先于内嵌代码)

代码复用技巧

通过引入外部JS文件实现代码复用(类似CSS的<link>引入)

文件命名规范(如.js后缀必须明确)

弱类型语言特性

JS不报错但仅执行一种方式(体现弱类型语言的松散性)

调试建议(避免混用以防逻辑混淆)

5.如何在浏览器查看错误信息

知识点

核心内容

重点

JavaScript调试方法

通过浏览器控制台(Ctrl+Shift+I)查看错误信息,定位错误行号及类型(如Uncaught ReferenceError)

错误类型区分(语法错误 vs 运行时错误);

浏览器差异(火狐与谷歌控制台界面差异)

错误定位技巧

点击控制台报错信息直接跳转到源码错误行; 关键快捷键:Ctrl+Shift+I(打开调试器)

快速定位依赖调试器熟练度; 新手易忽略控制台报错行号提示

开发实战建议

工作中需熟练掌握调试技能,避免低效排查(如逐行检查); 

调试效率对比

直接定位(高效) vs 人工排查(低效)

浏览器兼容性

火狐与谷歌浏览器控制台功能对比(错误提示格式、定位方式一致)

操作路径差异: 部分浏览器需通过菜单进入调试模式

6.js变量定义的方式

知识点

核心内容

重点

变量基本概念

变量是存储数据的容器,通过变量名访问数据空间

内存位置差异(浏览器内核 vs JVM)

JavaScript变量特性

弱类型语言:

- 声明松散(var可省略);

- 动态类型转换;

- 无char类型

与JAVA核心差异:

1. 类型系统松散;

2. 变量声明非强制;

3. 字符统一作字符串处理

变量定义格式

var name = value 或直接 name = value

未声明直接赋值的隐式全局变量问题

类型检测演示

typeof 'a' 返回 string(非char)

单一字符也视为字符串类型

语言范式强调

需跳出JAVA思维定式:

- 无严格类型约束;

- 语法规则弹性化

典型认知冲突点:

1. 类型系统差异;

2. 语法严谨度差异

7.js的数据类型

知识点

核心内容

重点

JavaScript数据类型

松散类型语言,主要包含:number(统一数值类型)、string、object、boolean、function

整数/小数均归为number(与传统强类型语言如Java的int/float区分)

特殊值处理

undefined、null等需注意的默认值

初学者易混淆类型判定(如typeof null返回object)

强类型与弱类型对比

Java需严格声明类型(如float/double),JavaScript仅需number

类型隐式转换规则是常见陷阱

8.js特殊值

知识点

核心内容

重点

JavaScript特殊值

undefined(未赋值变量使用时的默认值)

与Java语言的区别(Java会直接报错)

null(空值)

与undefined的语义区别

NaN(Not a Number)

类型转换失败时的特殊返回值(如数字运算包含非数字字符)

教学特色

通过实时代码演示讲解概念

对比Java语言的严格性突出JS的松散特性

强调概念清晰度和实际应用场景

typeof NaN返回值问题

建议

需要区分三种特殊值的产生场景

易混淆点:null == undefined为true但null === undefined为false

9.String的注意事项

知识点

核心内容

重点

字符串数据类型

字符串可以用双引号或单引号括起来(如 "a book" 或 'ABC'),语法较松散

单/双引号混用合法性('ABC' 和 "ABC" 均有效)

空串与字符表示

空串和单字符均可使用双引号或单引号(如 "" 或 '')

字符与字符串的界限模糊(如 'a' 既可表示字符也可表示单字符字符串)

运算符(未展开)

直播中提及但未详细讲解,可能涉及基础运算或语言特性

运算符优先级或特殊语法(需后续补充)

10.js运算符(1)

知识点

核心内容

重点

算术运算符

加减乘除、求余、自增/自减(与JAVA语法一致)

无需特别强调,基础操作

赋值运算符

=、+=、-=、*=、/=、%=(与JAVA一致)

x += y 等价于 x = x + y

关系运算符

==、!=、>、<、>=、<=(常规比较)

特殊: ===(全等,要求值和类型一致)

== vs ===:

- "100" == 100 → true(值相等)

- "100" === 100 → false(类型不同)

逻辑运算符

未展开讲解,需后续补充(文中提到“要稍微强调”)

待明确(如 &&、||、! 的短路特性)

11.js运算符(2)

知识点

核心内容

重点

逻辑运算符基础

介绍逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)三种基本运算符

运算符符号表示(&&/||/!)与英文单词对应关系

逻辑运算规则

真值表判断:全真为真、有假则假(AND);有真则真(OR);取反(NOT)

短路运算机制与完整运算的区别

JS特殊类型转换

所有变量都可作为布尔值使用,零/空/null/undefined/NaN/空串自动转为false

非严格类型检查与其他语言差异

短路与特性

全真返回末值,遇假返回首个假值

表达式返回值是运算值而非布尔值

短路或特性

全假返回末值,遇真返回首个真值

与JAVA的布尔值返回机制对比

实战案例

演示if("老韩")、if(0)、if(NaN)等非布尔值判断

类型自动转换的实际应用场景

综合练习

10>1 && 6<0返回false,11 || n++返回11

表达式执行顺序与返回值关系

12.js运算符(3)

知识点

核心内容

重点

条件运算符(三元运算符)

语法结构:条件表达式 ? 真返回值 : 假返回值,功能类似JAVA三元运算符

优先级需加括号(如(10>1)),返回值可为表达式(如字符串拼接或变量运算)

条件表达式真假逻辑

“一真大师”口诀:条件为真返回第一个值,为假返回第二个值

非布尔值的隐式转换(如n2=1视为true,0/""视为false)

JS语言特性

类型松散灵活,允许动态表达式(如800+n1)和变量直接参与运算

与JAVA强类型对比

JS无严格类型约束,需注意隐式类型转换

运算符扩展说明

仅讲解核心运算符(如条件运算符),其他运算符结合实际需求学习

前端开发重点:掌握基础后能看懂/修改/维护代码即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/96425.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/96425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用tree命令导出文件夹/文件的目录树( Windows 和 macOS)

你可以在终端&#xff08;命令提示符&#xff09;中使用 tree 命令来清晰直观地查看和导出文件夹的目录结构。下面我会详细告诉你如何在 Windows 和 macOS 上使用它。 &#x1f5a5;️ tree 命令基本用法 tree 命令的核心作用是以树状图的形式展示指定路径下的目录和文件结构。…

GrapeCity Documents V8.0 Update2 重磅发布:性能飞跃、AI 赋能与文档处理全流程升级

作为葡萄城旗下服务端文档组件库&#xff0c;GrapeCity Documents&#xff08;简称"GcDocs"&#xff09;凭借跨平台、高兼容的优势&#xff0c;已成为 众多开发者构建文档生成、编辑、转换与管理系统的首选。 近日&#xff0c;GcDocs 迎来 V8.0 Update2 版本更新&am…

水质在线监测系统御控物联网解决方案

一、行业背景与需求痛点水质安全是饮用水供应、工业生产、生态保护的核心要素。随着《水污染防治行动计划》的深入实施&#xff0c;传统水质监测方式面临三大挑战&#xff1a;时效性不足&#xff1a;人工采样-实验室分析周期长达24-72小时&#xff0c;难以实时捕捉污染事件&…

【完整源码+数据集+部署教程】仓库物品分类检测图像分割系统源码和数据集:改进yolo11-convnextv2

背景意义 研究背景与意义 随着现代物流和仓储管理的快速发展&#xff0c;物品分类与检测技术在提高仓库运营效率、降低人工成本方面发挥着越来越重要的作用。传统的物品管理方式往往依赖人工识别和分类&#xff0c;效率低下且容易出错。为了解决这一问题&#xff0c;基于计算机…

浏览器稳定性提升之路:线上崩溃率优化中的 Return 与 CHECK 之争

一、前言在大型 C 工程&#xff08;例如 Chrome 浏览器内核&#xff09;中&#xff0c;开发者经常会遇到这样的选择&#xff1a; 到底应该在关键点使用 CHECK 直接崩溃&#xff0c;还是使用 return、LOG 记录错误然后继续执行&#xff1f;这看似只是一个代码风格问题&#xff0…

【数据结构与算法Trip第3站】双指针

我们来详细讲解一下算法中非常常用且重要的技巧——双指针法。 这是一个概念清晰但应用极其广泛的技术&#xff0c;掌握它能帮助你高效解决许多问题。 一、什么是双指针法&#xff1f; 核心思想&#xff1a;顾名思义&#xff0c;就是在遍历对象&#xff08;通常是数组或链表&am…

时序数据库选型指南:基于大数据视角的IoTDB应用优势分析详解!

目录 一、时序数据库选型的基本原则 1.1 数据特征与需求分析 1.1.1 数据规模与写入负载 1.1.2 查询需求 1.1.3 数据保留与归档策略 1.1.4 系统扩展性与高可用性 1.2 技术架构与系统性能评估 1.2.1 写入性能 1.2.2 查询性能 1.2.3 数据压缩能力 1.2.4 高可用性与灾备…

缓存三大劫攻防战:穿透、击穿、雪崩的Java实战防御体系(三)

第三部分&#xff1a;缓存雪崩——大量key失效引发的“系统性崩溃” 缓存雪崩的本质是“大量缓存key在同一时间失效&#xff0c;或缓存集群整体故障”&#xff0c;导致请求全量穿透至DB&#xff0c;引发“系统性崩溃”。 案例4&#xff1a;电商首页的“批量过期”灾难 故障现场…

解决docker配置了镜像源但还会拉取官方镜像源的问题

&#x1f3d3;我们有时候虽然配置了Docker国内镜像源&#xff0c;但是还是会绕过去请求官方镜像源&#xff08;docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": context deadline exceeded&#xff09;&#xff0c;现在我们就来解决一…

R语言水文、水环境模型优化:从最速上升法、岭分析到贝叶斯优化与异方差处理,涵盖采样设计、代理模型与快速率定等

在水利工程、环境治理、生态保护、机械设计与航天航空等现代工业与科学领域&#xff0c;数学模型已成为不可或缺的核心分析、预测与决策工具。然而&#xff0c;随着系统复杂性的日益增长&#xff0c;模型构建的精确性、参数率定的效率以及不确定性量化的重要性被提到了前所未有…

关于数据采集与处理心得(一)

目前所实践的经验告知我&#xff01;1. 别企图妄想一个脚本解决所有问题要学会对问题分解&#xff0c;编写多个脚本一步步将问题解决&#xff0c;如果每一个步骤都为了下一个阶段的成果打地基&#xff0c;也是非常OK的。同时要尽可能将每一个编写的脚本都尽到最大的利用率2. 编…

IvorySQL 适配 LoongArch® 龙架构

IvorySQL 社区很高兴向您宣布&#xff0c;IvorySQL 已成功适配LoongArch 龙架构&#xff0c;为国产数据库与国产芯片的深度融合迈出了坚实一步。这一里程碑标志着 IvorySQL 在推动国产化生态建设、赋能信创产业方面取得了重大突破&#xff0c;为用户提供更高效、稳定、安全的数…

数据库分库分表是考虑ShardingSphere 还是Mycat?

http://www.mycat.org.cn/ https://shardingsphere.apache.org/ 这是一个非常核心且优秀的问题。在选择 ShardingSphere 和 Mycat 之间&#xff0c;对于游戏这种高性能、高复杂度的场景&#xff0c;目前行业内的主流选择和发展趋势毫无疑问是 ShardingSphere。 我会为你详细对…

mysql分库分表数据量核查问题

场景&#xff1a; 使用分库分表的业务有时分库数量几百甚至上千&#xff0c;当主管需要查询每个库中的数据&#xff0c;掌握数据分布情况。要你查看哪些库中的表数量大于某个量级的给找出来 &#xff0c;你会怎么做。 例子 &#xff1a; mysql库数量&#xff1a;db_xx_devicein…

python之socket网络编程

引言 在互联网时代&#xff0c;网络编程已经成为开发人员必备的技能之一。无论是Web开发、实时通信还是分布式计算&#xff0c;都离不开网络编程的支持。Python提供的socket模块为我们提供了简洁而强大的接口&#xff0c;可以轻松实现客户端和服务器之间的通信。 Socket编程是网…

WPF Telerik.Windows.Controls.Data.PropertyGrid 自定义属性编辑器

1.AI帮忙定义新用户控件 2.在属性上添加TelerikEditorAttribute特性 private ObservableCollection<string> _axisOrder;[Display(Description "点位", GroupName "通用", Name "轴&顺序", Order 1)][DataMember][TelerikEditorAt…

【超详细】别再看零散的教程了!一篇搞定Gitee从注册、配置到代码上传与管理(内含避坑指南最佳实践)

&#x1f525;个人主页&#xff1a;艾莉丝努力练剑 ❄专栏传送门&#xff1a;《C语言》、《数据结构与算法》、C语言刷题12天IO强训、LeetCode代码强化刷题、洛谷刷题、C/C基础知识知识强化补充、C/C干货分享&学习过程记录 &#x1f349;学习方向&#xff1a;C/C方向学习者…

43.shell脚本循环与函数

shell脚本循环与函数 for 循环 for 循环用于一次性读取多个信息&#xff0c;逐一对信息进行操作处理&#xff0c;特别适合处理有范围的数据 语法 for 变量名 in 取值列表 do命令序列 done批量创建用户 #!/bin/bashtouch /root/users.txt echo aka blues cloe dio foks > /ro…

模型部署:(四)安卓端部署Yolov8-v8.2.99实例分割项目全流程记录

模型部署&#xff1a;&#xff08;四&#xff09;安卓端部署Yolov8-v8.2.99实例分割项目全流程记录1、下载ncnn2、下载opencv-mobile3、文件拷贝4、andorid_studio相关配置5、文件内参数设置5、重构项目&#xff1a;6、打包apk7、部署自己训练的实例分割模型1、下载ncnn 地址&…

高并发、低延迟全球直播系统架构

一、 核心架构图 整个系统的数据流和工作流程如下图所示&#xff0c;它清晰地展示了从主播推流到观众观看的完整过程&#xff1a; #mermaid-svg-QzNpj0DWxd5FERPC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QzN…