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无严格类型约束,需注意隐式类型转换 |
运算符扩展说明 |
仅讲解核心运算符(如条件运算符),其他运算符结合实际需求学习 |
前端开发重点:掌握基础后能看懂/修改/维护代码即可 |