校园网站建设申请报告,公司企业如何做网站,35公司做的网站漏洞,石家庄二手房最新急出售「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度#xff0c;分享学习笔记#xff0c;希望能对大家有所帮助。 目录 1 课程介绍 2 课程软件准备工作 3 JavaScript 介绍 4 变量 5 常量 6 数据类型 7 类型转换 8 实战案… 「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度分享学习笔记希望能对大家有所帮助。 目录 1 课程介绍 2 课程软件准备工作 3 JavaScript 介绍 4 变量 5 常量 6 数据类型 7 类型转换 8 实战案例 1 课程介绍 P1https://www.bilibili.com/video/BV1Y84y1L7Nn?p1 下面就是本课程要学习的内容 课程内容 在学习之前先给自己打个鸡血 《纽约比加州时间早三个小时》 纽约时间比加州时间早三个小时 但加州时间并没有变慢。 有人22岁就毕业了 但等了五年才找到好的工作! 有人25岁就当上CEO, 却在50岁去世。 也有人迟到50岁才当上CEO, 然后活到90岁。 有人依然单身 同时也有人已婚。 奥巴马55岁就退休 川普70岁才开始当总统。 世上每个人本来就有自己的发展时区。 身边有些人看似走在你前面 也有人看似走在你后面。 但其实每个人在自己的时区有自己的步程。 不用嫉妒或嘲笑他们。 他们都在自己的时区里你也是! 生命就是等待正确的行动时机。 所以放轻松。 你没有落后。 你没有领先。 在命运为你安排的属于自己的时区里一切都准时。 2 课程软件准备工作 P2https://www.bilibili.com/video/BV1Y84y1L7Nn?p2 Snipaste ZoomIt Xmind Error Lens (VScode插件) One Dark Pro (VScode插件) 格式化设置 (VScode设置) 代码缩进 (VScode设置) Live Server (VScode插件) 3 JavaScript 介绍 3.1 JavaScript 是什么 P3https://www.bilibili.com/video/BV1Y84y1L7Nn?p3 1. JavaScript 是什么 是一种运行在客户端浏览器的编程语言实现人机交互效果。 2. 作用做什么 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3. JavaScript的组成有什么 ECMAScript: 规定了 js 基础语法核心知识。比如变量、分支语句、循环语句、对象等等。 Web APIs: DOM 操作文档比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器比如页面弹窗检测窗口宽度、存储数据到浏览器等等 JavaScript的组成 JavaScript 权威网站 MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript 3.2 JavaScript 书写位置 P4https://www.bilibili.com/video/BV1Y84y1L7Nn?p4 1. 内部 JavaScript 直接写在 html 文件里用 script 标签包住 规范script 标签写在/body上面 body !-- 内部js -- script // 页面弹出警示框 alert(你好js~) /script/body 2. 外部 JavaScript 代码写在以.js结尾的文件里 语法通过 script 标签引入到 html 页面中。 // 外部 ./js/my.js 文件内容如下alert(我是外部的 js文件) body script src./js/my.js // 中间不要写内容 /script/body 3. 内联 JavaScript 代码写在标签内部 body button onclickalert(逗你玩~~~)点击我月薪过万/button/body 3.3 JavaScript 的注释 P5https://www.bilibili.com/video/BV1Y84y1L7Nn?p5 1. 单行注释 符号// 快捷键 ctrl / 2. 多行注释 符号/* */ 快捷键alt shift a 3.4 JavaScript 结束符 在 JavaScript 中 ; 代表一段代码的结束多数情况下可以省略 ; 使用回车enter替代。 实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ; 3.5 输入和输出语法 P6https://www.bilibili.com/video/BV1Y84y1L7Nn?p6 输出和输入也可理解为人和计算机的交互用户通过键盘、鼠标等向计算机输入信息计算机处理后再展示结果给用户这便是一次输入和输出的过程。 1. 输出语法 // 1. 文档输出内容document.write(我是div标签)document.write(h1我是标题/h1)// 2. 页面弹出警告对话框alert(要输出的内容)// 3. 控制台打印输出给程序员console.log(看看对不对)console.log(日志) 2. 输入语法 // 输入语句prompt(请输入您的年龄) JavaScript 代码执行顺序 按 HTML 文档流顺序执行 JavaScript 代码 alert() 和 prompt() 它们会跳过页面渲染先被执行 3.5 字面量 在计算机科学中字面量literal是在计算机中描述 事/物 比如 1000 数字字面量 黑马程序员 字符串字面量 [] 数组字面量 {} 对象字面量 4 变量 4.1 变量是什么 P7https://www.bilibili.com/video/BV1Y84y1L7Nn?p7 变量是计算机中用来存储数据的“容器”它可以让计算机变得有记忆。 通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】数据 4.2 变量基本使用 1. 声明变量 声明(定义)变量有两部分构成声明关键字、变量名标识 let 和 var 都是 JavaScript 中的声明变量的关键字推荐使用 let 声明变量 2. 变量赋值 定义了一个变量后你就能够初始化它赋值。在变量名之后跟上一个“”然后是数值。 也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化。 // 1. 声明一个 age 变量let age// 2. age 变量赋值为 18age 18// 3. 输出 age 变量console.log(age)// 4. 声明的同时直接赋值变量的初始化let age 18 3. 更新变量 P8https://www.bilibili.com/video/BV1Y84y1L7Nn?p8 变量赋值后还可以通过简单地给它一个不同的值来更新它。 注意 let 不允许多次声明一个变量。 let age 18age 19console.log(age) 4. 声明多个变量 多个变量中间用逗号隔开但并不推荐这样。 // 不推荐let age 18, uname pink// 推荐let age 18let uname pink 变量案例- 交换变量的值 P9https://www.bilibili.com/video/BV1Y84y1L7Nn?p9 4.3 变量的本质 P10https://www.bilibili.com/video/BV1Y84y1L7Nn?p10 内存计算机中存储数据的地方相当于一个空间 变量本质是程序在内存中申请的一块用来存放数据的小空间 4.4 变量命名规则与规范 1. 规则(必须遵守不遵守报错) 不能用关键字例如let、var、if、for 等 只能用下划线、字母、数字、$组成且数字不能开头 字母严格区分大小写如 Age 和 age 是不同的变量 2. 规范(建议不遵守不会报错) 起名要有意义 遵守小驼峰命名法 第一个单词首字母小写后面每个单词首字母大写。例userName 4.5 let和var的区别 P11https://www.bilibili.com/video/BV1Y84y1L7Nn?p11 在较旧的 JavaScript使用关键字 var 来声明变量 而不是 let。 var 现在开发中一般不再使用它只是我们可能再老版程序中看到它。 let 为了解决 var 的一些问题。 var 声明: 可以先使用 在声明 (不合理) var 声明过的变量可以重复声明(不合理) 比如变量提升、全局变量、没有块级作用域等等 4.6 数组 P12https://www.bilibili.com/video/BV1Y84y1L7Nn?p12 数组 (Array)一种将一组数据存储在单个变量名下的优雅方式 元素数组中保存的每个数据都叫数组元素 下标数组中数据的编号 长度数组中数据的个数通过数组的length属性获得 // 1. 声明数组有序 let arr [刘德华, 张学友, 黎明, 郭富城, pink老师, 10]// 2. 使用数组数组名[索引号]从0开始console.log(arr[0]) // 刘德华// 3. 数组长度 索引号 1 console.log(arr.length) // 6 5 常量 P13https://www.bilibili.com/video/BV1Y84y1L7Nn?p13 使用 const 声明的变量称为“常量”。 当某个变量永远不会改变的时候就可以使用 const 来声明而不是let。 注意常量不允许重新赋值,声明的时候必须赋值初始化 // 1.常量不允许更改值const PI 3.14PI 3.15 // 报错// 2. 常量声明的时候必须赋值const PI // 报错 6 数据类型 P14https://www.bilibili.com/video/BV1Y84y1L7Nn?p14 JS 数据类型整体分为两大类 6.1 数字类型Number JS 中的正数、负数、小数等统一称为数字类型。 JS 是弱数据类型变量到底属于那种类型只有赋值之后我们才能确认 算术运算符 求和 -求差 *求积 /求商 %取模取余数 NaN NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果 NaN 是粘性的。任何对 NaN 的操作都会返回 NaN console.log(pink老师 - 2) // NaNconsole.log(NaN - 2) // NaN 6.2 字符串类型string P15https://www.bilibili.com/video/BV1Y84y1L7Nn?p15 通过单引号 、双引号或反引号包裹的数据都叫字符串单引号和双引号没有本质上的区别推荐使用单引号。 注意事项 无论单引号或是双引号必须成对使用 单引号/双引号可以互相嵌套但是不以自已嵌套自已 必要时可以使用转义符 \输出单引号或双引号 let uname 小明 // 使用单引号let gender 男 // 使用双引号let goods 小米 // 使用反引号let tel 13681113456 // 看上去是数字但是引号包裹了就是字符串let str // 这种情况叫空字符串 字符串拼接 运算符可以实现字符串的拼接。 let uname 刘德华let song 忘情水document.write(uname song) // 刘德华忘情水 模板字符串: P16https://www.bilibili.com/video/BV1Y84y1L7Nn?p16 外面用 (反引号)变量用 ${ } 包住 let age 25document.write(我今年${age}岁了) // 我今年25岁了 6.3 布尔类型boolean P17https://www.bilibili.com/video/BV1Y84y1L7Nn?p17 表示肯定或否定时在计算机中对应的是布尔类型数据它有两个固定的值 true 和 false表示肯定的数据用 true表示否定的数据用 false。 // true false 是布尔型字面量 let isCool falseconsole.log(isCool) 6.4 未定义类型undefined 未定义是比较特殊的类型只有一个值 undefined只声明变量不赋值的情况下变量的默认值为 undefined一般很少【直接】为某个变量赋值为 undefined。 let age // 声明变量但是未赋值document.write(age) // 输出 undefined 6.5 null空类型 JS 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值 null 和 undefined 区别 undefined 表示没有赋值 null 表示赋值了但是内容为空 console.log(undefined 1) // NaNconsole.log(null 1) // 1 6.6 检测数据类型 typeof 运算符可以返回被检测的数据类型。它支持两种语法形式 作为运算符 typeof x 常用的写法 函数形式 typeof(x) let num 10console.log(typeof num) // numberlet str pinkconsole.log(typeof str) // stringlet str1 10console.log(typeof str1) // stringlet flag falseconsole.log(typeof flag) // bopleanlet unconsole.log(typeof (un)) // undefinedlet obj nullconsole.log(typeof obj) // object 7 类型转换 P18https://www.bilibili.com/video/BV1Y84y1L7Nn?p18 7.1 为什么需要类型转换 JavaScript是弱数据类型 JavaScript也不知道变量到底属于那种数据类型只有赋值了才清楚。 坑使用表单、prompt 获取过来的数据默认是字符串类型的此时就不能直接简单的进行加法运算。 console.log(10000 2000) //输出结身果 100002000 7.2 隐式转换 某些运算符被执行时系统内部自动将数据类型进行转换这种转换称为隐式转换。 规则 号两边只要有一个是字符串都会把另外一个转成字符串 除了以外的算术运算符 比如 - * / 等都会把数据转成数字类型 缺点 转换类型不明确靠经验才能总结 小技巧 号作为正号解析可以转换成数字型 任何数据和字符串相加结果都是字符串 script console.log(11 11) \\ 22 console.log(11 11) \\ 1111 console.log(11 - 11) \\ 0 console.log(11 - 11) \\ 0 console.log(1 * 1) \\ 1 console.log(1 * 1) \\ 1 console.log(typeof 123) \\ string console.log(typeof 123) \\ number console.log(11 11) \\ 22/script 7.3 显式转换 编写程序时过度依靠系统内部的隐式转换是不严禁的因为隐式转换规律并不清晰大多是靠经验总结的规律。 为了避免因隐式转换带来的问题通常根逻辑需要对数据进行显示转换。 转换为数字型 Number(数据) 转成数字类型 如果字符串内容里有非数字转换失败时结果为 NaNNot a Number即不是一个数字 NaN也是number类型的数据代表非数字 parseInt(数据) 只保留整数 parseFloat(数据) 可以保留小数 转换为字符型: String(数据) 变量.toString(进制) script console.log(Number(123)) // 123 console.log(Number(pink)) // NaN console.log(parseInt(12px)) // 12 console.log(parseFloat(12.34px)) // 12.34/script 8 实战案例 P19https://www.bilibili.com/video/BV1Y84y1L7Nn?p19 「结束」 本文由 mdnice 多平台发布
