初识JavaScript
什么是JavaScript
前端三剑客: html css JavaScript
html : 网页的组成,内容展示 -- 身体
css : 网页的样式/排版. 布局美化 -- 化妆品/衣服
JavaScript : 动态效果/网页交互 -- 技能/行为
java和JavaScript:
两者没有直接关系,当前本来想谈合作,没谈成. 当年/现在java是一门火爆的语言
js的作者为了蹭热度,就给自己语言取名为JavaScript
硬要来说,js的语法更像c语言
后端开发主要涉及到的前端知识点:
爬虫: 网页组成,标签,选择器
后端: JavaScript , 标签(表单)
script : 脚本
JavaScript具体功能:
1.网页的动态效果
2.前后端交互 -- 数据提交 (输入/弹窗)
3.进阶内容 -- 前端主流框架(Vue.js React.js Node.js)
html / css -- 不是编程语言
JavaScript -- 编程语言,语法概念和python,C都有一定共通
各位有py基础前提下,学js是事半功倍的,并且过程中也会复习py知识
写的时候不要写混了
JavaScript的组成
ECMA Script -- 简称ds,可以理解为是js的语法版本. 教学基于ES6
BOM -- Browser Object Model -- 浏览器对象模型. 用js操作浏览器(弹窗/输入框/调整)
DOM -- Document Object Model -- 文档对象模型. 用js操作网页内容(网页是一个文档)
js的写法和css类似,有内部/外部写法
内部写法在html中写一对script标签.把js内容写里面
<script>js代码</script>
外部写法就是创建一个专门的js文件,通过script里的src属性引入. 在该标签写js代码是无效的
<script src='js文件'></script>
js代码最后写在网页内容最后, 结尾body的上面
代码是从上往下执行,如果写的位置不对,可能会出现先执行js功能,再出现内容的情况
src除了本地文件外,也支持网络路径导入
https://www.bootcdn.cn/
输入输出
单行注释: // 注释内容
多行注释: /* 注释内容 */
输出语句:
document.write: 给网页写入内容.能识别标签,字符需要用引号包裹,纯数字不用
语法:
document.write(内容)
案例:
document.write(666)
document.write('我是麒麟')
document.write('<hr>')
document.write('<h1>我是用js生成的h1标签</h1>')
alert: 弹窗,让网页显示一个弹窗
语法:
alert(内容)
案例:
alert('多喝热水')
console.log : 在控制台输出日志 (主要是程序员用,内容不显示在网页,在控制台,主要调试内容)
语法:
console.log(内容)
案例:
console.log('提前祝各位新年快乐')
console.log(888)
console.log的内容不是给用户看的,主要是给开发者调试,测试数据用.
1.按下F12 / 右键检查 -- 控制台/console
2.快捷键 ctrl + shift + j
输入语句:
prompt: 在网页弹出输入框,输入相关内容. 输入框里可以放提示文本
语法:
prompt()
prompt('提示内容')
案例:
prompt('你的老师是?')
可以用输入来赋值.prompt得到的数据为字符串
let name = prompt('你的名字是?')
alert('欢迎您'+name)
变量
何为变量:
一个用来存储数据的容器. 里面的数据可以改变
把一个常用的数据保存起来,起个名字.方便后续使用
变量名规则/规范:
1.由数字,字母,下划线_,美元符号$ 组成 (不推荐中文)
2.不能用关键字命名 if break for
3.不能数字开头
4.区分大小写 Name name
5.见名知意
var / let = 声明符/标识符 在声明变量前要加上
let是es6新出的语法,作用和var类似.但更安全稳定
变量的使用:
1.声明变量
let 变量名 // 声明空变量,没有赋值
let 变量名 = 变量值 // 声明一个变量并赋值
let hobby
let job = '打杂'
2.声明多个变量
let 变量名 = 变量值, 变量名 = 变量值
let home='广东韶关',height= 148.5
3.使用变量/输出变量
输出语句(变量名)
document.write(变量)
alert(变量)
console.log(变量)
4.输出多个变量
输出语句(变量名,变量名)
console.log(job,home)
5.用输入给变量赋值
let 变量名 = prompt
let name = prompt('请输入你的姓名')
1.不写let,直接声明变量 变量名 = 变量值 不会报错,但不规范
2.变量未赋值时,值为undefined / 未定义
基本数据类型
为什么要区分数据类型 -- 更好的管理/区分/使用数据. 所以对数据进行分类
js查看数据类型 -- typeof
console.log(typeof 数据)
console.log(name,typeof name)
number(数值)
主要用于数学计算,数值数字使用.它包含整数,小数,正负数(不区分int/float) -- 年龄,身高,体重
let 变量名 = 数值
let age = 28
let money = 100.0
console.log(age,typeof age)
string(字符串)
主要用来显示文字内容. 用一对 单' 双" 反` 包裹起来的数据 -- 姓名,性别,地址
let 变量名 = '字符'
let 变量名 = "字符"
let name = '麒麟老师'
console.log(name,typeof name)
1.引号不能混用 必须 单单 / 双双
let name = '麒麟" // 报错
2.反引号(大键盘1的左边)是作为模板字符串使用, 更好输出带变量的数据
相当于python的格式化输出. 模板字符串只能用反引号
`xxx${变量}xxx` ${变量}
console.log(`你好.我是${name}我今年${age}岁.`)
boolean(布尔)
布尔主要用于逻辑判断. 判断真/假 只有两个值true / false
let 变量名 = true
let 变量名 = false
let is_vip = true
console.log(is_vip,typeof is_vip)
undefined(未定义)
undefined既是类型也是值. 为未定义, 当变量声明未赋值时,它的值和类型都为undefined
let 变量名
let test
console.log(test,typeof test)
null
null即为空,表示没有东西. 类型为对象,空对象
let wife = null
console.log(wife,typeof wife)
转义字符
有特别意义的字符,js遇到它会特别处理 -- 在控制台用
\n : 换行
\t : 制表符,缩进
\\ : 正常输出斜杠
\' : 正常输出引号
js没有原始字符串.不能像py一样在字符串前加r取消转义
类型转换
在开发过程中经常会遇到把一个数据转为其他类型使用的情况.此时需要类型转换
console.log(1+'1') // 11 js把+识别为了拼接 1拼接'1'
console.log(1-'1') // 0 js把- 识别为减 1-1为0
隐式类型转换:
有的数据类型在运行过程中会自行转换 -- 主要字符串和数值交互时
+号优先识别为拼接. 其他正常
强制类型转换:
手动把数据转为指定的数据类型
Number(数据) 把数据转为数值
数据转换失败,值为NaN 表示非数字 Not a Number
parseInt(数据) -- 转为数值,只要整数
parseFloat(数据) -- 转为数值,保留小数
String(数据) 把数据转为字符串
Boolean(数据) 把数据转为布尔. 转换后,有值为真,无值为假(0,-0,null,undefined)
运算符
运算符 = 带有特定功能的符号
算术运算符:
+ - * / %
赋值运算符
= += -= *= /=
a+=b : a = a+b
let i = 10
i += 6 : i = i + 6
关系运算符:
== > < >= <= !=
单目运算符:
++ / -- 让数值+1/-1
++在前,先自增,再赋值; 先+1,再执行
++在后,先赋值,再自增; 先执行,再+1
let i = 10
i++
++i
单独写i++ / ++i 没有区别,最后都会+1. 但是如果把这段语句放在输出里,结果就不一样了
逻辑运算符:
&& : 与运算 and 有多个条件时,都满足才为真
|| : 或运算 or 有多个条件时,满足其一就为真
! : 非运算 not 结果取反
语文 = 100 数学 = 60
if 语文 > 80 || 数学 > 80: # 或运算,满足其一就为真
么么哒
if 数学 > 80 && 语文 > 80: # 与运算,条件要都满足才为真
多喝热水
短路运算符:
程序角度: 一段代码,知道结果了,后面就不会再执行
生活角度: 知道一个人是sb. 就没必要和对方多浪费时间纠缠
练习
1.声明变量给自己建立个角色信息,并输出(姓名 年龄 性别 来自哪里 兴趣爱好 单身与否)
2.用prompt输入自己的名字,需要带提醒
3.用输出或输入, 打出自己在VIP班遇到过主讲/班主任老师名字
4.尝试不运行代码,计算该程序的输出结果,并说出原因
let i = 55
console.log(++i)
console.log(i++)
5.用一个console.log输出以下内容(转义字符)
爱你所爱 行你所行
听从你心 无问西东
6.填空题
let a = 520 a的类型为__
let b = 'True' b的类型为__
let c = '520' c的类型为__
let d d的类型为__
let e = 6.66 e的类型为__
let f = 0.0 f的类型为__
let g = true g的类型为__
let h = False h的类型为__