一篇解决JavaScript
华子目录
- JavaScript介绍
- JavaScript的组成
- JavaScript书写位置
-
- 内部
- 外部
- js注释
- js输入（prompt）
- js输出
- js变量
- js基本数据类型
-
- number（数值类型）
- string（字符串）
- Boolean（布尔类型）
- undefined（未定义）
- null（空）
- js转义字符
- js类型转换
- 运算符类型
JavaScript介绍
JavaScript简称js，是一种浏览器解释型语言，是可以嵌入在html文件中交给浏览器解释执行的。主要用来实现网页的动态效果，用户交互以及前后端的数据传输等。
JavaScript能做什么？
1.网页的动态效果
2.前后端的交互（数据提交，人机交互）
3.进阶（前端的高级框架：vue.js React.js Node.js）(VR/AR开发：Three.js)
注：html/css不是编程语言，JavaScript是一门正儿八经的编程语言
JavaScript的组成
1.ECMA Script简称ES，是js的语法规则，目前最新版本ES13
2.ECMA是一个欧洲计算机制造商协会，主要做一些评估，开发和计算机标准
3.BOM（Browser object model）：浏览器对象模型，主要是对浏览器进行操作（交互，弹窗，输入框）
4.DOM（Document object model）：文档对象模型，负责对网页里的内容进行操作（网页里的所有内容都称为文档）
JavaScript书写位置
内部
内部JavaScript直接写在html里面，用script标签包裹住
语法：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
style>
head>
<body>
<script>
document.write('麦当')
script>
body>
html>
外部
外部JavaScript代码写在以.js结尾的文件里面，通过script标签引入到html页面中
语法：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
style>
head>
<body>
body>
<script src="./demo.js">script>
html>
注：1.如果用外部写法，再在script标签内写js的话是无效的
2.src不止能引入本地的文件，也可以通过cdn加速的方式，获取实时js代码（相当于引入网络文件）
3.引入js最好放在网页最后/body的最后
js注释
作用：主要写一些代码思路逻辑
单行注释：//
多行注释：/*内容*/
快捷方式：ctrl+/
js输入（prompt）
prompt：在进入网页时，弹出输入框，让用户输入内容，输入框里可以放提示文本
语法格式：
prompt()
prompt(‘提示内容’)
案例：prompt('请输入你的名字')
prompt输入用来赋值：
prompt得到的数据字符串类型（输入方法给变量赋值）
let name = prompt('请输入你的名字')//在弹出框中显示
alert('欢迎你'+name)
js输出
document.wtite(内容)：在网页里写内容，能够识别标签，字符串(字符串，标签都要用引号包裹)需要用引号包裹，数字不用。
语法格式：
document.write(内容)
案例代码：
document.write(888)
document.write('多喝岩浆')
document.write('内容')
console.log(内容)：控制台输出日志，在控制台输出一个信息（主要是用来调试js数据的）（不需要加标签，因为不是给网页看的）
语法格式：
console.log(内容)
案例代码：
console.log(888)
console.log('多喝岩浆')
alert：弹窗，在网页里显示一个弹窗
语法格式：
alert(内容)
案例代码：
alert('麦当')
alert(888)
js变量
1.什么是变量？
一个用来存储东西的容器，取个有意义的名字，方便后续使用
2.命名规范：
变量名可以由数字,字母,下划线,$组成,禁止以数字开头(中文不推荐)
变量名严格区分大小写
不要用关键字命名
见名知意
3.声明符：
let：es6新出的语法，作用和var类似，但是在作用域上let更严谨
4.变量的使用：
（1）声明变量
let 变量名 //声明一个空的变量，没有赋值
let 变量名=值 //声明一个变量并赋值
let name
let age=18
（2）声明多个变量
let 变量名=值,变量名=值
let sex='女',name='小川'
（3）输出变量
document.write(变量名)
console.log(变量名)
alert(变量名)
（4）输出多个变量
document.write(变量名,变量名)
console.log(变量名,变量名)
alert(变量名,变量名)
注：1.直接写 变量名=值，不写let，写法上是允许的，但是非常不推荐
2.变量使用let关键字声明，但是未赋值，变量初始值为undefined，不会报错
3.使用let关键字重复声明一个变量会报错
js基本数据类型
js中查看数据类型：typeof 变量名
console.log(typeof 变量名)
console.log(typeof teacher)
number（数值类型）
JavaScript不区分整数 浮点数等 统一都叫number --> 年龄/金钱/身高
let 变量名 = 数值
let age = 18
let height = 188
console.log(age,height)
console.log(typeof age)
string（字符串）
通过单引号(''),(""),或者反引号(``)包裹的数据都叫字符串-->文字信息/地址/名字
let 变量名 = '字符'
let 变量名 = "字符"
let name='杨洋'
let food="螺蛳粉"
let hobby=`睡觉`
console.log(typeof name,name)
反引号主要是作为模板字符串使用 帮助我们更好的输出一些带有变量的数据
格式：`字符${变量名}字符`
let name = `墨离`,age = 18
console.log(`我叫${name}我今年${age}岁`)//这一行里面必须是用反引号包裹
Boolean（布尔类型）
布尔类型主要用于逻辑判断 只有两个值 true/false
let 变量名 = true/false
let on_line = true
let not_online = True //会报错 没有被定义
console.log(on_line,typeof on_line)
console.log(not_online,typeof not_online)
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'
1 - '1'
隐式类型转换:
程序运行过程中自动执行 自动发生一种转换机制 主要体现在字符串和数值进行运算时
+号会优先识别为拼接 其他的就是为正常数值运算
强制类型转换:
手动把数据转换为指定的数据类型
Number(数据)--把数据转换为number类型
1.如果转换失败 结果为NaN
2.NaN也是number类型 表示的非数字 not a number
String(数据)--把数据转换为string类型
Boolean(数据)--把数据转换为Boolean类型 在转换时 有值为真无值为假 (0,-0,undefined,null)
运算符类型
运算符 == 带有特定的功能的符号
算术运算符:+ - * / ** // %
**取幂:3**3 = 27-->原理 3*3*3 3**4 3*3*3*3
% 取余:11%3 = 2-->原理 11-3 直到减不下去为止 还剩多少就是取余
逻辑运算符:
&&: 逻辑与and 当有多个条件时 都满足才为真
||: 逻辑与or 当有多个条件时 满足一个就为真
!: 逻辑与非not 反骨仔 什么都和你反着来
赋值运算符:
= += -= *= /=
a+=b --> a=a+b
关系运算符:
== < > >= <=
单目运算符:
++ -- 自增/减1
++在前,先自增再赋值;先+1 再运行
++在后,先赋值再自增;先运行 再+1
let i = 10
i++
++i
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<script>
// let name=prompt('请输入你的姓名')
// alert('你好'+name)
// console.log('你好麦当')
// console.log(888)
// document.write(888)
// let name='麦当',age=20
// document.write(name,age)
// let num=10,count=3
// console.log(num%count)
// console.log(num+count)
// console.log(`${num/count}`)
script>
body>
html>