JavaScript 基础
JavaScript 介绍
JavaScript 是什么
JavaScript 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
作用:
- 网页特效:监听用户行为让网页作出反馈
- 表单验证:针对表单数据的合法性进行判断
- 数据交互:获取后台数据并渲染到前端
- 服务端编程:Node.js
组成:
JavaScript 前端基础,涵盖变量声明、数据类型、运算符、流程控制、函数定义、作用域、对象操作、DOM/BOM 编程、正则表达式以及进阶概念如原型链、深浅拷贝和性能优化。内容包含基础语法规范、常见错误分析及实用代码示例,旨在帮助开发者系统掌握 JavaScript 核心技能,适用于前端入门学习。
JavaScript 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
作用:
组成:
参考资源: MDN Web Docs (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
内部 JavaScript:直接写在 HTML 文件里,用 script 标签包住。规范是将 script 标签写在 </body> 上面。
<script>
alert('你好,JS');
</script>
注意事项:将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略,因为浏览器按顺序加载 HTML,避免脚本期望修改尚未加载的 HTML。
外部 JavaScript:代码写在以 .js 结尾的文件里,通过 script 标签引入。
<body>
<script src="my.js"></script>
</body>
注意事项:script 标签中间无需写代码,否则会被忽略。外部 JavaScript 使代码更有序,易于复用。
内联 JavaScript:代码写在标签内部(如 onclick)。作为了解即可,Vue 框架中常用类似模式。
<button onclick="alert('点击我')">点击我</button>
//,快捷键 Ctrl+/
// 这种是单行注释的语法
/* */,快捷键 Shift+Alt+A
/* 这种的是多行注释的语法 */
; 代表语句结束。执行顺序:按 HTML 文档流顺序执行。alert() 和 prompt() 会跳过页面渲染先被执行。
字面量是在计算机中描述事物的值。
1000'黑马程序员'[]{}变量是计算机中用来存储数据的'容器',可以让计算机变得有记忆。变量不是数据本身,而是用于存储数值的容器。
let。
let age;
let age = 18;
alert(age);
let age = 18;
age = 19;
document.write(age);
let age = 18, uname = 'user';
内存是计算机中存储数据的地方。变量本质是程序在内存中申请的一块用来存放数据的小空间。
规则:
let, var, if, for 等)$ 组成,且数字不能开头规范:
userName)var:较旧写法,存在变量提升、全局变量等问题,现在开发中一般不再使用。let:解决 var 的问题,推荐使用。const:声明常量,不允许重新赋值。一种将一组数据存储在单个变量名下的优雅方式。
let arr = [];
数组名 [下标]使用 const 声明的变量称为'常量'。当某个变量永远不会改变时使用。
const G = 9.8;
console.log(G);
注意:常量不允许重新赋值,声明时必须赋值。
JS 数据类型分为两大类:基本数据类型和引用数据类型。
number:整数、小数、正数、负数。
let age = 18;
let price = 88.99;
NaN:代表计算错误或不正确的数学操作结果。string:单引号、双引号或反引号包裹的数据。
let uname = '小明';
let goods = `小米`;
+ 运算符。`${变量}`。boolean:true 或 false。
undefined:只声明不赋值时默认为此值。
null:代表'无'、'空'或'值未知'。
使用 typeof 关键字。
typeof x; // 返回类型字符串
系统内部自动转换。例如 + 号两边只要有一个是字符串,都会把另一个转成字符串。
自己写代码告诉系统该转成什么类型。
Number(数据):转成数字类型。parseInt(数据):只保留整数。parseFloat(数据):可以保留小数。let 或 const 不允许多次声明同一变量。prompt 获取的是字符串,需转换为数字型。简化代码,如 +=, -=, *=, /=, %=。
自增 ++,自减 --。常用于计数。
++num(先加后用)num++(先用后加)>, <, >=, <=, ==, ===, !==。
===。NaN 不等于任何值,包括它本身。&& (与), || (或), ! (非)。
解决多重条件判断。
遵循标准优先级表,括号 () 可提升优先级。
条件 ? 真值 : 假值。break 防止穿透。数组 [下标]数组 [下标] = 新值arr.push(), arr.unshift()arr.pop(), arr.shift(), arr.splice()使用 for 循环遍历。
实现代码复用,提高开发效率。
function 函数名 () {}函数名 ()function fn(x = 0) {}使用 return 关键字返回结果。没有 return 默认返回 undefined。
{} 内。let fn = function() {}(function(){})(),防止变量污染。无序的数据集合,用来详细描述某个事物。
let obj = { uname: '老师', age: 18 };
使用 for...in 循环。
Document Object Model,用来呈现以及与 HTML 文档交互的 API。
document.querySelector('css 选择器'):获取第一个匹配元素。document.querySelectorAll('css 选择器'):获取所有匹配元素(伪数组)。innerText:纯文本。innerHTML:解析标签。src, href, title 等。element.style.property。className, classList.add/remove/toggle。addEventListener。e.target, e.clientX)。e.stopPropagation()。setTimeout, setInterval。JSON.stringify 和 JSON.parse。用于匹配字符串中字符组合的模式。
^, $*, +, ?, {n,m}[abc], [a-z]i:忽略大小写。g:全局匹配。嵌套关系的作用域串联起来形成查找机制。
JS 内存分配和回收自动完成。标记清除法是主流算法。
内层函数访问外层函数的变量。用于封闭数据和创建私有变量。
new 关键字实例化。本文涵盖了 JavaScript 从基础语法到 DOM/BOM 编程及进阶概念的完整知识体系,适合初学者系统学习。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online