JavaScript编程基础(一) 原创 阁主 2023-08-01 13:10:46 阅读 623 次 评论 0 条 摘要:简单记录学习PHP中文网23期JavaScript基础知识,内容包括:JS 引入方式、控制台使用、变量、函数、数据类型。 ## 简介 - JavaScript 是前端通用脚本语言,以下简称 JS - JS 是*解释型*,*动态*语言(不用编译,类型可自动转换) ## 构成 1. ECMA: 语法(ECMAScript) 2. DOM: 文档对象模型(Document Object Model) 3. BOM: 浏览器对象模型(Browser Object Model) ## ES6 - ES6: ECMA2015,是 JS 最重要的一个全新版本 - 以后的 JS 版本,都是基于 ES6 上的做的扩展 - ES6+ 是泛指现代 JS 语言版本,并不限于 ECMA2015 ## JS 与 HTML,CSS - HTML: 结构(骨架) - CSS: 表现(血肉) - JS: 行为(灵魂) ## JS 推荐插件 - JavaScript(ES6)code snippets: ES6 代码片断 - JavaScript Comment Snippet: JS 注释片断 ## JS 引入方式 - 事件属性: `onclick='...'` - 文档脚本: `` - 外部脚本: `` 三张js引入方式代码: ```JavaScript js引入方式 删除 删除 ``` funcs.js代码: ```JavaScript function del(ele) { if (confirm('是否删除?')) ele.remove() } ``` ## 控制台指令 console是浏览器提供的控制台对象,用于查看 JS 执行结果: ![console控制台命令属性](https://www.mainblog.cn/zb_users/upload/2023/08/202308011527287576522.png "console控制台命令属性") 下面是常用的几个console方式: - `console.log(data)`: 查看数据(支持模板和 CSS) - `console.dir(obj)`: 树形可折叠查看对象结构 - `console.table(obj)`: 表格方式查看对象 - `console.error(msg)`: 输出错误警告 - `console.clear()`: 清空输出 ## 标识符 - 用途: 变量,常量,函数,属性,方法,类,... - 分类: 关键字(保留字),自定义 - 规则: 仅限字母,数字,下划线,$,且禁止数字开头 - 命名: 驼峰(大驼,小驼),蛇形(小蛇,大蛇) ```JavaScript 标识符 ``` ## 语句 - 分号: 可选 - `[],(),{},+,-,/`: 前分号不能省 ## 代码成员 代码成员简单的可以分为三个部分:`数据->函数->函数的返回值`,就好比下面图中举例的面包制作过程。 ![代码成员](https://www.mainblog.cn/zb_users/upload/2023/08/202308011632405076695.png "代码成员") 代码学习示例: ```JavaScript 代码成员 ``` ## 变量 - 变量: `let` - 常量: `const` 示例代码: ```JavaScript 数据:变量/常量 ``` ## 函数 - 命名函数: `function` - 匿名函数: `fn = function (){}` - 箭头函数: `fn = ()=>{}` - 立即执行函数: `(function(){})()` ```JavaScript 操作: 函数 ``` ## 数据类型 - 原始类型: `string`,`number`,`boolean`,`null`,`undefined` ```JavaScript 原始类型 ``` - 引用类型: `array`,`object`,`function` ```JavaScript 引用类型(对象) ``` 本文地址:https://www.mainblog.cn/326.html 版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处! 免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。 PREVIOUS:移动端布局方案学习,并简易仿写今日头条移动端布局 NEXT:JavaScript编程基础(二)流程控制,函数与解构 文章导航