JavaScript学习（1）书写位置，变量、数据类型、运算符

keyipatience:个人主页作者简介C/C后端开发学习者专栏传送门《c》《linux》《c高阶数据结构》《c数据结构与算法》《前端学习》⭐️patience is key in life初识JavaScript简称 JS属于脚本语言解释器直接运行不用提前编译。原本浏览器客户端运行有了 Node.js 之后可以在服务器端跑。诞生初衷网页表单校验简单验证输入是否合法现在是全栈通用语言。JS 能干啥网页动画、交互特效网页小游戏后端服务Node.js桌面软件ElectronVSCode 就是 Electron 写的手机 App 开发易混JavaScript 和 Java 完全是两门语言名字长得像而已没有从属关系。JavaScript 和 HTML 和 CSS 之间的关系HTML: 网页的结构(骨)CSS: 网页的表现(皮)JavaScript: 网页的行为(魂)JS 运行流程、代码文件存在硬盘打开 html浏览器把文件读到内存硬盘 → 内存JS 引擎解释器把 JS 翻译成二进制指令CPU 执行二进制指令内存 → CPU浏览器两大引擎渲染引擎解析 HTML CSS画页面JS 引擎解析执行 JS 代码Chrome 是 V8 引擎JavaScript 三大组成ECMAScriptESJS语法本身变量、循环、函数… 纯逻辑不能操作页面DOM 文档对象模型操作页面元素增删改标签、文字样式BOM 浏览器对象模型操作浏览器窗口弹窗、页面跳转、获取窗口大小ECMAScript是一套标准规范所有 JS 引擎都要遵守这个标准实现 JavaScript。JS 三种书写位置① 内嵌式内部 JSJS 写在script标签里面直接写在 html 文件!DOCTYPE html html langzh-CN body script // 内嵌JS代码 alert(我是内嵌式JS); console.log(控制台输出内嵌代码); /script /body /html② 外部式项目推荐分两个文件 文件 1demo.js单独 js 文件注意这里不要写 script 标签alert(外部JS文件执行了); console.log(外部js的打印);文件 2index.html!DOCTYPE html html langzh-CN body !-- src引入外部js文件 -- script srcdemo.js/script /body /html注意script srcdemo.js 这里面写代码无效/script带 src 的 script 标签中间不能写 JS。!-- 错误示范里面alert不会跑 -- script srcdemo.js alert(这里代码不执行); /script③ 行内式不推荐了解即可JS 直接写在标签的事件属性里点击触发!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body !-- onclick 里面就是行内JS -- button onclickalert(行内JS点击才弹出)点我/button /body /htmlJS 输入输出3 个alert、prompt、console.log1. alert () 弹窗输出给用户看弹出提示框只有文字 确定按钮!DOCTYPE html html langzh-CN body script alert(这是alert弹窗); /script /body /html2. prompt () 输入框接收用户输入弹出输入框可以让用户打字返回字符串点取消返回null!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body script // 接收用户输入存到name变量 let name prompt(请输入你的名字); alert(name); // 把输入的内容弹出来 /script /body /html3. console.log () 控制台打印给程序员调试用用户看不见按 F12 打开浏览器控制台查看!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body script console.log(控制台输出内容用户看不到F12控制台查看); let num 100; console.log(num); /script /body /htmlJS 变量3 个关键字var/let/const1. var老写法现在不推荐var age 18;特点1.普通大括号{}关不住 var只有函数可以if (true) { var a 10; // 在if的{}里面定义var } console.log(a); //✅ 输出10外面能拿到{}关不住var // 只有函数的{}可以限制var function fn() { var b 20; } fn(); console.log(b); //❌ 报错函数外面访问不到2.同一个范围可以多次var 同名变量不会报错var name 张三; var name 李四; // ✅ 合法不会报错直接覆盖 console.log(name); // 李四3.变量声明会提前没赋值前去读取得到undefined变量提升JS 执行时会把var / let / const的声明提前到当前作用域最顶部但赋值不会提前。console.log(x); // undefined不是报错 var x 100; JS 实际是这样理解执行 var x; // 声明被提升到顶部此时x默认是undefined console.log(x); x 100; // 赋值还在原来位置 对比 let也会提升但是有暂时性死区提前访问直接报错不会返回 undefined。 console.log(y); // ❌ 报错 let y 200;2. let现代可变变量推荐let name 小明;特点对比var理解块级作用域只在{}里面生效if、for、大括号同一个作用域不能重复声明会报错有变量提升但存在暂时性死区声明前直接使用会报错3. constconst PI 3.14; PI 99; // ❌ 报错不能重新赋值特点块级作用域和 let 一样声明时必须赋值后面不能重新赋值注意如果 const 存的是对象 / 数组里面内容可以改只是变量不能换指向存数组 const arr [10, 20]; // ✅ 修改数组内部内容允许地址没变 arr[0] 99; arr.push(30); console.log(arr); // [99,20,30] // ❌ 报错这是让arr指向一个全新数组更换了指向 arr [1,2,3]; 存对象 const user { name: 张三 }; // ✅ 修改对象里面的属性允许地址不变 user.name 李四; user.age 18; console.log(user); // {name:李四,age:18} // ❌ 报错指向全新对象换地址 user { name: 王五 };选择口诀优先const只有后续需要修改这个变量值的时候才用let尽量不用 varJS 动态类型JS 变量本身没有固定类型是「值」有类型变量可以随时装不同类型的数据。两条要点1.变量的类型运行代码的时候才确定let a 10; // 运行到这一行a里面存数字number let b hehe;// 运行到这一行b里面存字符串stringJS 声明变量var/let不用提前写类型。不像 Java/C写变量就要指定是整数还是字符串。2.同一个变量可以随时换成别的类型的值let a 10; // 现在a是数字 a hehe; // 直接改成字符串合法不报错简单理解a只是一个盒子这次放数字下次直接放文字盒子本身不用改。对比静态类型C / Java / C静态语言变量创建时就固定类型一辈子只能存同一种类型数据// Java例子 int a 10; // 声明就规定a只能存整数 a hehe; // ❌ 直接编译报错不能把字符串放进int变量JS 5 种基本数据类型1. number 数字类型JS不区分整数、小数浮点数全部统一叫 numberlet a 10; // 整数也是number let b 3.14; // 小数也是number额外特殊值都属于 numberInfinity无穷大-Infinity负无穷NaNNot a Number不是一个数字但类型依旧是 numberconsole.log(zzz-1); // NaN console.log(10/0);//Infinity console.log(-10/0);//-Infinity;2. string 字符串类型必须用英文单引号 / 双引号 / 反引号包裹let str1 hello; let str2 JS学习;JS的(单引号和双引号共同点基础功能完全一样都用来包裹字符串差别引号嵌套外层用双引号里面可以直接写单引号let msg 他说好好学习JS; console.log(msg); // 他说好好学习JS外层用单引号里面也可以直接写双引号let msg 他说好好学习JS; console.log(msg); // 他说好好学习JS不能同号嵌套// 错误双引号里面直接写双引号会提前结束字符串 let msg 他说好好学习JS; // 报错 let msg 他说\好好学习JS\; // \ 代表字符串里的 let msg2 他说\好好学习JS\; // \ 代表字符串里的 //转义字符\开头\n换行\单引号\双引号\\反斜杠和基础用法完全相同只是为了方便嵌套另一种引号项目里选一种保持统一。求字符串长度.length语法字符串.length返回字符个数中文、英文都算 1 个字符length是属性不加括号不是 length ()let a hehe; console.log(a.length); // 44个英文字母 let b 哈哈; console.log(b.length); // 22个汉字字符串拼接有两种身份两边都是数字是加法运算只要任意一边是字符串变成字符串拼接把内容拼成一段文字let a my name is ; let b zhangsan; console.log(a b); // my name is zhangsan // 数字 字符串 → 拼接 let c my score is ; let d 100; console.log(c d); // my score is 100 //经典对比 console.log(100 100); // 200两边都是数字 → 数学加法 console.log(100 100); // 100100有字符串 → 拼接3. boolean 布尔类型只有 2 个值true真 /false假用来做判断let flag1 true; let flag2 false;4. undefined只有唯一一个值undefined含义变量只声明、没有赋值默认就是 undefinedlet x; console.log(x); // undefined console.log(typeof x); // undefined5. null只有唯一一个值null含义空值人为手动赋值表示 “什么都没有”let y null; console.log(y); // nullundefined 和 null 的简单区分考试常考undefined自动产生声明变量没赋值系统默认给的。代表「未定义」null手动写出来赋值人为设置为空。代表「空、无对象」let a; // a undefined系统自动 let b null; // 自己手动赋值为空typeof 检测类型typeof 10 // number typeof hehe // string typeof true // boolean typeof undefined // undefined typeof null // object 历史bug记住这个坑总结类型含义例子number数字整数 / 小数不分103.14NaNstring字符串文本abc123boolean布尔真假true/falseundefined未定义声明未赋值let x; xnull手动设置空值let x nullJS 运算符JavaScript 中的运算符和C语言用法基本相同. 此处不做详细介绍了.重点说一些不一样的/除JS 除法会得到小数不是整数除法运算符名称是否类型转换特点示例结果相等隐式转换只比较值不管类型1010true!不相等隐式转换值不同则 true10!10false全等不转换值和类型都必须一样才 true开发推荐1010false!不全等不转换值不一样或类型不一样就 true10!10trueJS语句if / else if三元表达式switchwhiledo whilefor和C语言几乎一样这里也不过多介绍了