开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情
JavaScript的组成
ECMA Script --> ES --> 简称ES.可以理解为是js的语法版本.目前最新版本的ES13.不过我们不用那么新.教学内容基于ES6(不少学校教学还是基于ES3-ES5)
Bom -- Browser object model --> 浏览器对象模型,主要对浏览器进行操作(交互,弹窗,输入框)
Dom -- Document object model --> 文档对象模型.负责对网页里的内容进行操作(网页里的所有内容都称为文档)
js的书写方式和css类似.也有内部和外部写法
内部写法在html中,写一对script标签.再把内容写到其中
<script>js代码</script>
外部写法就是创建一个专门的js文件.通过script里的src属性引入. 在这个标签里写的js代码是无效的
<script src='js文件路径'></script>
引入js最好放在网页内容的最后/body的最后 --> 网页的加载顺序是由上往下.如果位置不对.有可能就出现先用js操作,再出现网页内容的情况
src不止能引入本地文件.也可以通过cdn加速的方式.获取实时的js代码
js的脚本测试内容是在控制台里显示.而不是在网页中
怎么进入控制台:
1.按下f12 --> 选择console/控制台
2.快捷键 ctrl + shift + j
js基本输入输出
单行注释: // 注释内容
多行注释: /* 注释内容 */
输出语句:
document.write: 在网页里写一行内容.写的如果是标签能被识别.字符串需要用引号包裹.数字不用.
语法格式:
document.write(内容)
案例代码:
document.write(666)
document.write('多喝热水')
document.write('<b>多喝热水</b>')
console.log: 控制台输出日志.在控制台里输出一个信息(主要是用来调试测试js数据的)
语法格式:
console.log(内容)
案例代码:
console.log(666)
console.log('#096')
alert: 弹窗,在网页里显示一个弹窗
语法格式:
alert(内容)
案例代码:
alert('11-24班大家牛逼')
输入语句:
prompt: 在进入网页时.弹出输入框,让用户输入内容.输入框里面可以放提示文本
语法格式:
prompt()
prompt('提示内容')
案例代码:
prompt('请输入你的姓名')
用输入来赋值. prompt得到的数据也是字符串类型
let name = prompt('请输入你的姓名')
alert('欢迎你'+name)
js变量基本概念
编程语言之间是有很多的共通性的.掌握好一门语言.再学习其他语言都是事半功倍 --> 求同存异
何为变量:
一个用来存储数据的容器.里面的数据可以改变. 把一段数据保存起来,取个名字.方便后续使用
变量名规范:
1.由数字,字母,下划线_,美元符号$组成(中文不推荐)
2.区分大小写 Name name
3.不要用关键字命名 if for break
4.见名知意
var/let = 声明符,标识符.在声明变量前需要加上
let --> es6新出的语法.作用和var类似.但是在作用域上let更严谨.这次教学里.统一使用let --> 后续会讲解区别
变量的使用:
1.声明变量
let 变量名 // 声明一个空变量,没有赋值
let 变量名 = 变量值 // 声明一个变量并赋值
let name
let age = 18
2.声明多个变量
let 变量名=变量值,变量名=变量值
let sex='男',hobby='看数码视频'
3.输出变量
console.log(变量名)
document.write(变量名)
alert(变量名)
4.输出多个变量
console.log(变量名,变量名)
document.write(变量名,变量名)
alert(变量名,变量名)
5.用输入语句给变量赋值
看上一part的最后
1.直接写 变量名 = 变量值. 不写let.写法上是允许的,但是非常不推荐.所以老老实实加上let标识符
2.变量如果声明了.在没赋值的情况下调用.它的值为 undefined,未定义 不是报错
js基本数据类型
为什么要区分数据类型: 为了更好的管理/区分/使用数据. 所以要进行数据类型
js中查看数据的类型 --> typeof
console.log(typeof 数据)
console.log(typeof name,typeof age)
number(数值类型)
主要用于数学计算.数字使用.它里面包含了整数,小数,负数(不区分int/float) --> 年龄/身高/金钱
let 变量名 = 数值
let age = 18
let height = 177.5
console.log(age,height)
console.log(typeof age)
string(字符串)
主要用来显示文字内容.表现形式为用一对单' 双" 反` 引号包裹起来的数据 --> 姓名,性别,地址
let 变量名 = '字符'
let 变量名 = "字符"
let name = '谢霆锋'
console.log(typeof name,name)
1.引号不能混用.必须单+单 双+双 不要一单一双
let name = '麒麟" // 报错
2.反引号主要是作为模板字符串使用(类似于f-str).帮助我们更好的输出一些带有变量的数据
`字符 ${变量名} 字符`
console.log(`我叫${name}我今年${age}岁`)
boolean(布尔类型)
布尔类型主要作用于逻辑判断.只有两个值. true/false
let 变量名 = true/false
let is_login = true
console.log(is_login,typeof is_login)
一定要注意.js和py代码不一样. js里的布尔值首字母不需要大写
undefined(未定义)
undefined既是类型也是值.指的就是未定义的意思.当你声明变量没有赋值时.它的值为undefined
let 变量名
let test
console.log(test,typeof test)
null(空)
null和python里的None类似.表示的就是值为空.输出类型为对象(空对象)
let bf = null
console.log(bf,typeof bf)
js转义字符
\n --> 换行
\t --> 制表符tab键
\ --> 正常输出一个斜杠
' --> 正常输出一个引号
js没有原始字符串.不能像python那样在字符串前面加r取消转义
js类型转换
在开发/学习过程中.经常会遇到需要把一个数据转为其他类型使用的情况.这个时候就需要类型转换
1 + '1' // 结果为 '11'
1 - '1' // 结果为 结果为0
隐式类型转换:
程序运行过程中自动执行,自动发生的一种转换机制.主要体现在字符串和数值进行运算时
+号会优先识别为拼接,其他的就是正常数值运算
强制类型转换
手动的把数据转为指定的数据类型
Number(数据) -- 把数据转为number类型
1.如果数据转换失败.结果为NaN
2.NaN也是number类型.表示的是非数字 Not a Number
parseInt(数据) -- 把数据转为数值,只保留整数
parseFloat(数据) -- 把数据转为数值,保留小数
String(数据) -- 把数据转为string类型
Boolean(数据) -- 把数据转为boolean类型.在转换时.有值为真,无值为假(0,-0,none,undefined)
运算符类型
运算符 = 带有特定功能的符号
算术运算符: + - * / ** // %
** 取幂: 3**3 --> 原理等价于 3*3*3 3**4 --> 3*3*3*3
// 整除: 10//3 = 3--> 原理相当于 让10-3.一直到减不下去为止.减了几次.整除值就为几 --> 10-3-3-3. 减了3次. 整除值为3
% 取余数: 11%3=2 --> 原理相当于 让11-3.一直到减不下去为止.还剩多少.余数就是多少 11-3-3-3 --> 最后剩下一个2.减不下去了.余数值为2
逻辑运算符:
&& : 逻辑与 and. 当有多个条件时.都满足才为真
|| : 逻辑或 or. 当有多个条件时.满足一个就为真
! : 逻辑非 not. 死杠精.什么都和你反着来
赋值运算符:
= += -= *= /=
a+=b --> a = a+b
关系运算符:
== > < >= <=
单目运算符:
++ -- 自增/减1
++在前,先自增再赋值; 先+1,再运行
++在后,先赋值再自增; 先运行.再+1
let i=10
i++
++i
单独写++i或者i++都不影响.都会加1. 但是如果放到输出语句里.就会出毛病
拓展:
短路机制:
生活例子 --> 如果一个人,你知道他是一个傻逼了.你还有必要去理他.在意他说的傻逼话么? 还是当他放屁
程序角度来说: 我已经知道结果了.我就没必要继续判断
伪代码 -->
or --> 语文,数学.有一科80分以上就行
语文 = 100,数学=90
if 语文 > 80 or 数学 > 80:
么么哒
and --> 语文,数学.两科90分以上才行
语文 = 80,数学=90
if 语文 > 80 and 数学 > 80:
加油吧
