初识JavaScript

初识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的类型为__