JavaScript 的组成与书写方式

一、什么是 JavaScript1. JavaScript 简介JavaScript 是一种解释型、动态类型、面向对象的脚本语言。最初 JavaScript 被设计出来是为了让网页能够实现简单的交互例如点击按钮弹出提示表单数据验证图片轮播动态修改网页内容随着发展现在 JavaScript 已经不仅仅用于浏览器前端开发网页交互后端开发Node.js移动端开发桌面应用开发游戏开发小程序开发例如alert(Hello JavaScript);运行后浏览器会弹出Hello JavaScript二、JavaScript 在网页中的作用一个完整网页通常由三个部分组成技术作用类比HTML页面结构人的骨架CSS页面样式人的衣服JavaScript页面行为人的动作例如HTMLbutton点击我/buttonCSSbutton { color:red; }JavaScriptalert(你点击了按钮);三者结合HTML 创建按钮CSS 美化按钮JavaScript 控制点击后的行为三、JavaScript 的组成JavaScript 主要由三个部分组成JavaScript ECMAScript DOM BOM1. ECMAScriptJavaScript 核心什么是 ECMAScriptECMAScript 是 JavaScript 的标准规范。简单理解ECMAScript 规定了 JavaScript 的语法和基本功能。例如变量let name 张三;函数function sayHello(){ console.log(Hello); }数组let arr [1,2,3];这些都是 ECMAScript 规定的内容。ECMAScript 包含内容1变量保存数据let age 20;2数据类型JavaScript 常见数据类型基本数据类型number string boolean undefined null symbol bigint例如let num 10; let str JavaScript; let flag true;3运算符例如let a 10; let b 20; console.log(ab);输出304流程控制判断if(age18){ console.log(成年人); }循环for(let i0;i5;i){ console.log(i); }5函数函数可以封装重复代码function add(a,b){ return ab; } console.log(add(10,20));输出302. DOM文档对象模型什么是 DOMDOMDocument Object Model中文文档对象模型浏览器会把 HTML 页面转换成一个对象结构。例如HTMLh1 idtitle 学习JavaScript /h1JavaScriptlet title document.getElementById(title); title.innerHTMLHello JS;页面内容会改变。DOM 可以做什么修改 HTML 内容document.body.innerHTMLHello;修改 CSS 样式box.style.colorred;添加事件例如点击按钮button.onclickfunction(){ alert(点击成功); }3. BOM浏览器对象模型什么是 BOMBOMBrowser Object Model浏览器对象模型。主要用于操作浏览器。例如弹窗alert(提示信息);浏览器地址跳转location.hrefhttps://www.baidu.com;获取浏览器窗口大小window.innerWidth;四、JavaScript 的书写方式JavaScript 有三种书写方式行内式内部式外部式1. 行内 JavaScript直接写在 HTML 标签内部。例如button onclickalert(你好) 点击 /button点击按钮你好优点简单方便。缺点代码混乱不方便维护。实际开发中很少使用。2. 内部 JavaScript把 JavaScript 写在 HTML 的script标签里面。例如!DOCTYPE html html head title JS学习 /title /head body h1 JavaScript /h1 script alert(Hello JS); /script /body /htmlscript 标签位置通常放在body ... script /script /body原因浏览器解析 HTML 时先加载页面内容最后执行 JS这样可以提高页面加载速度。3. 外部 JavaScript推荐把 JS 单独写到.js文件中。例如目录项目 │ ├── index.html │ └── main.jsmain.jsalert(Hello JavaScript);index.htmlscript srcmain.js/script外部 JS 优点1. 结构清晰HTML负责结构CSS负责样式JS负责逻辑符合结构、表现、行为分离2. 方便维护多个网页可以共享一个 JS 文件。例如common.js多个页面script srccommon.js/script3. 浏览器缓存外部 JS 文件会被浏览器缓存提高加载速度。五、JavaScript 注释注释不会被执行。作用解释代码方便阅读方便维护1. 单行注释语法// 这是一个注释 let age18;2. 多行注释语法/* 这是多行注释 可以写很多内容 */ let nameTom;六、JavaScript 的代码规范1. 区分大小写JavaScript 严格区分大小写。正确let name张三;错误let Name张三;二者不是同一个变量。2. 每条语句建议加分号推荐let age20; console.log(age);虽然 JS 可以省略let age20但是规范建议添加。3. 使用小驼峰命名变量let userNameTom;函数function getUserInfo(){ }七、JavaScript 执行环境JavaScript 可以运行在1. 浏览器环境例如ChromeEdgeFirefox浏览器提供JavaScript DOM BOM2. Node.js 环境Node.js 让 JavaScript 可以脱离浏览器运行。例如console.log(Hello Node);可以直接在电脑运行。八、JavaScript 学习路线推荐学习顺序JavaScript基础 ↓ 变量和数据类型 ↓ 运算符 ↓ 流程控制 ↓ 函数 ↓ 数组 ↓ 对象 ↓ DOM操作 ↓ BOM操作 ↓ 事件 ↓ ES6 ↓ 异步编程 ↓ Promise ↓ Ajax ↓ Vue/React九、总结JavaScript 是前端开发的核心语言。它主要由ECMAScript ↓ JavaScript核心语法 DOM ↓ 操作网页内容 BOM ↓ 操作浏览器组成。JavaScript 的三种书写方式方式特点推荐行内式直接写标签中⭐⭐内部式script标签中⭐⭐⭐外部式独立.js文件⭐⭐⭐⭐⭐实际开发中推荐HTML负责结构CSS负责样式JavaScript负责行为三者分离开发。这篇作为 JS 入门第一篇博客后续可以继续写《JavaScript变量与数据类型详解》《JavaScript运算符大全》《JavaScript流程控制语句》《JavaScript函数详解》《JavaScript对象与数组》《JavaScript DOM操作详解》这样可以形成完整的 JS 学习笔记体系。