JavaScript (是什么?)


是一种通常运行在浏览器中(运行环境)的编程语言;
可以用来实现人机交互效果,提供逻辑思维能力。

作用(做什么?)


监听用户的行为,并让网页作出对应的反馈
网页特效(动画效果)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
image.png

js书写位置

  1. 内联:了解<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/28495940/1652528903441-9c3d266d-52dd-4623-b398-9ef95dc2127b.png#clientId=uff6a903f-8d4f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=94&id=ub136b166&margin=%5Bobject%20Object%5D&name=image.png&originHeight=117&originWidth=768&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28322&status=done&style=none&taskId=ub4ff8111-c88c-4918-ba4e-20819d8b087&title=&width=614.4)<br /> 内部js:在</body>前面添加script标签,在script结构中写代码<br /> 只有在当前页面中可以使用<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/28495940/1652528868061-93aebf85-0335-48a7-8332-2a743a8d0916.png#clientId=uff6a903f-8d4f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=128&id=ue20f3f7d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=160&originWidth=542&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32238&status=done&style=none&taskId=u735c21d7-b02e-40ad-a353-391f6b22840&title=&width=433.6)<br /> 外部js:将js写入到单独文件中,在需要的页面中通过script引入来使用<br /> 常用方式<br /> 可以复用<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/28495940/1652528887001-7cdc6fec-5cb1-4901-bdaa-664a460bfdce.png#clientId=uff6a903f-8d4f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=141&id=ub02cee92&margin=%5Bobject%20Object%5D&name=image.png&originHeight=176&originWidth=482&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31457&status=done&style=none&taskId=u6d3eaf20-762d-40c8-90c6-2dad1e926e0&title=&width=385.6)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/28495940/1652528812885-0608c39c-0bef-4b59-b222-4cbf32f1e00a.png#clientId=uff6a903f-8d4f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=313&id=u31d516e2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=391&originWidth=1042&originalType=binary&ratio=1&rotation=0&showTitle=false&size=53598&status=done&style=none&taskId=u9112de48-726e-404a-94a5-d539e865971&title=&width=833.6)

JavaScript 注释

注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。注释只是为了提高可读性,不会被计算机编译

1.单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl + /
image.png

块注释
符号:/ /
作用:在// 之间的所有内容都会被忽略
快捷键:shift+alt+a

image.png

了解JavaScript结束符

1.结束符
代表语句结束
英文分号 ;
分号 ; 可写可不写
换行符(回车)会被识别成结束符 ,所以一个完整的语句,不要手动换行
但为了风格统一,要写结束符就每句都写,要么每句都不写(按照团队要求.)
image.png

JavaScript 输入输出语法

输入:prompt
可以接收用户的输入,输入的内容是字符串
输出
console.log():在浏览器控制台中输出
不会影响页面效果
不会阻止浏览器执行
document.write():在页面中输出
会影响页面效果
alert():在页面上弹出框
会阻止浏览器执行,一般慎用
03e8d26f5aa9b0462fa5373749750da.png

变量

1.白话:变量就是一个装东西的盒子。
2.通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。
语法
let +变量名 age( 自定义取名) let age =18;
image.png
更新变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它。
image.png
声明多个变量: 变量名用逗号隔开
image.png
注意:let不允许多次声明一个变量
image.png
image.png

命名规则和规范

  1. 规范<br /> 命名要语义化:通过变量名称可以猜测出变量的作用<br /> 驼峰命名:除了第一个单词之外的其它单词的首字母大写<br /> 规则<br /> 不要使用关键字做为变量名称<br /> 不要以数字开头<br /> 变量名称中不要包含特殊符号<br /> 除了 _ 数字 字母 $ 之外的都是特殊字符<br /> 严格区分大小写<br />字符串<br /> 带引号的都是字符串<br /> +:在字符串场景中是字符串连接符<br /> 模板字符串<br /> 简化拼接字符串<br /> 可以创建多行文本<br /> 标记: ``<br /> 变量替换: ${变量}<br /> 模板字符串可以创建多行文本,而单引号和双引号只能创建单行文本<br />![0587efc93d5cbd1fe45bca66e2466bc.png](https://cdn.nlark.com/yuque/0/2022/png/28495940/1652530295476-a35b86ae-413b-498d-8c09-bd2afdd09aba.png#clientId=uff6a903f-8d4f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=238&id=u2ce7993a&margin=%5Bobject%20Object%5D&name=0587efc93d5cbd1fe45bca66e2466bc.png&originHeight=298&originWidth=708&originalType=binary&ratio=1&rotation=0&showTitle=false&size=176800&status=done&style=none&taskId=ubf9a2e21-de71-40c5-a1d7-bd5a6d17dfe&title=&width=566.4)

数据类型

JS 数据类型整体分为两大类:
基本数据类型
引用数据类型

image.png

数字类型(number)

JavaScript 中的正数、负数、小数等 统称为 数字类型。
image.png

字符串类型(string)

image.png

布尔类型(boolean)

image.png

未定义类型(undefined)

image.png

数据类型 – null(空类型)

image.png
总结:
7f3406538c5247a8e6c6cf2f65cdbfd.png

检测数据类型:

控制台输出语句
image.png
通过 typeof关键字检测数据类型
image.png
坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算

隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
号两边只要有一个是字符串,都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
缺点:
转换类型不明确,靠经验才能总结
优点:
代码简洁
小技巧:
+号作为正号解析可以转换成Number
image.png

显式转换

转换为数字型

Number(数据)
转成数字类型
如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
NaN也是number类型的数据,代表非数字
parseInt(数据)
只保留整数
parseFloat(数据)
可以保留小数
f44861b9954f4dc27b5f1ac20f55bf0.png

显式转换为字符型:

String(数据)
变量.toString(进制)