学习JAVASCRIPT(js)的第一天

一、 js的简介

1、javascript 简称js，是一种函数式、弱类型的脚本语言 面向对象的语言

2、js是一种脚本语言，必须执行在js引擎上。浏览器为网页提供了js引擎
3、在一个网页中：
HTML 负责显示网页内容
CSS 负责美化网页，负责页面长什么样子
JS 负责页面交互功能，负责网页能干什么
4、JS可以控制HTML和CSS

二、执行JS代码

1、 script 标记网页中的javascript代码，标签内包裹的js代码不会被渲染到页面上显示
2、直接将js代码写在script标签内
3、将js代码单独在写.js文件中，使用script引入外部js文件

三、变量和基本数据类型

1、 编程语言(JS、JAVA、C、C++、C#、Python、PHP)的变量,用于记录一个可以改变的数据
2、 使用var xxx声明变量,变量命名使用小驼峰命名法(第一个单词首字母小写，之后每隔单词首字母大写),不能以数字开头,不能包含特殊符号(运算符符号),不能是js的保留字(var,class)
3、变量的命名要和它记录的数据内容相关(见名知意),不要使用abc/aa/a1等意思模糊的变量名
4、=表示赋值运算符 作用是把=右边数据赋值给=左边的变量，变量可以在声明时直接赋值
5、在js中,有3种常用的基本数据类型:数字类型/字符串类型/布尔类型
6、数字类型number,用于记录一个数字
7、字符串类型 string,用于记录一段文本,使用双引号包裹，字符串也可以使用单引号定义，字符串中,可以使用ascll转译字符， " \将后面的字符当做一个转译字符进行显示
8、boolean,用于记录一个真假值(是否\对错),true为真,false为假

四、基本运算符

1、 变量也可以参与运算
2、字符串相加，当+用于字符串变量相加时,可以进行字符串拼接

var s1 = "a";
		var s2 = "b";
		var s3 = s1 + s2
		console.log(s3)

3、字符串和数字相加，会把数字转换字符串,做一个字符串拼接的操作,相加的结果还是字符串

var s4 = 3 + "5";
		console.log(s4)

4、两个字符串/有一个是数字,代码会将其中的字符串转换为数字,然后进行减法运算(前提是字符串能转换为数字,否则相减会得到一个NaN值

var num4 = "5" - 2;
		console.log(num4);

5、字符串参与乘法运算,遵循-运算相同的规则

var num5 = "3" * 5
		console.log(num5)

6、% 取余运算

var num9 = 5 % 3
		console.log(num9)

7、++自增1 --自减1， ++ 放变量前,表示先自增,后参与计算
8、+= 表示自增运算 -= *= /=

num11 += 10等同于num11 = num11 + 10
		num11 += 10
		
		console.log(num11)

五、布尔运算符

1、&&表示 与运算, 表示并且, and 当运算符两侧的布尔值都为真时,结果才是真,否则为假
2、|| 表示 或运算 , 表示或者 , or 当运算符两侧的只要有一个为真,则结果为真
3、 ! 表示 非运算 , 表示否 , not 是一个单目运算符,对布尔值进行取反,值为真,结果为假,值为假,结果为真

六、比较运算符

1、 > 大于判断 判断左侧值是否大于右侧值,结果是一个布尔值,不等式成立,结果为true,不成立为false
2、>= 大于等于 <= 小于等于
3、!= 表示不相等
4、 = 一个等号表示赋值
5、== 表示判断等号两侧的值是否相同
6、=== 表示判断等号两侧的类型以及值是否相同

七、分支语句if-else

1、例子： 如果 age 大于等于18,执行成年代码,否则执行未成年代码if (条件){条件成立执行的代码}else{条件不成立执行的代码}

if (age >= 18){
			
			console.log("成年了！")
		}else{
			
			console.log("未成年！")
		}

2、if 中的else不是必须要写的,如果只是想条件成立执行某段代码,不成立就跳过else可以省略，if - else 的写法适用于有两种情况,而且必须二选一
3、多种情况可以使用if - else if - else
例子：

if (age < 1){
			console.log("婴儿")
			// 如果age<1不成立,再判断第二个条件,这个时候age肯定大于等于1的
		}else if(age < 7){
			console.log("儿童")
		}else if(age < 12){
			console.log("少年")
		}else if(age < 18){
			console.log("青少年")
		}else if(age < 30){
			console.log("青年")
		}else{
			// 最后一种情况条件可以省略不写
			console.log("中老年")
		}
		
		// if - else 可以嵌套使用
		if (age < 18){
			
			if (age < 1){
				console.log("婴儿")
				
			}else{
				
				if (age<7){
					console.log("儿童")
				}else{
					// .......
				}
			}

		}else{
			
		}

	var num2 = 20
		// 比较运算符不能连用,可以使用&& 连接多个条件
		if (num2>20 && num2<40){
			
			console.log("num2大于20小于40了")
		}
		

八、js查找标签，获取修改标签内容

1、css选择器 通过id找到对应的标签
2、onclick 点击按钮时触发的一个执行函数事件
3、function 函数名(){}
4、document.getElementById 从当前文档中通过id找到对应的标签元素
5、value属性表示输入框中的内容,获取到的值是一个字符串
6、innerText 修改标签展示的文本内容

九、for循环

1、 for循环结构:
for(控制循环变量赋值;执行循环条件;循环执行后变量的变化){循环体}
2、 for循环循环规则:
执行初始循环控制变量赋值；
判断循环条件是否满足,如果不满足循环直接退出,如果满足执行循环体；
当循环体执行完毕时,控制循环的变量产生修改,然后回到第2步；