8.28JS基础

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

js是一种脚本语言，必须执行在js引擎上。浏览器为网页提供了js引擎

在一个网页中：
HTML 负责显示网页内容
CSS 负责美化网页，负责页面长什么样子
JS 负责页面交互功能，负责网页能干什么

JS可以控制HTML和CSS

二、在网页中执行js代码
1.直接将js代码写在script标签内
2.将js代码单独在写.js文件中，使用scrip（src）引入外部js文件

三、变量和基本数据类型

1. 编程语言(JS、JAVA、C、C++、C#、Python、PHP)的**变量,**用于记录一个可以改变的数据
   2.使用var xxx声明变量,变量命名使用小驼峰命名法(第一个单词首字母小写，之后每隔单词首字母大写),不能以数字开头,不能包含特殊符号(运算符符号),不能是js的保留字(var,class)
   3.变量的命名要和它记录的数据内容相关(见名知意),不要使用abc/aa/a1等意思模糊的变量名
   4.=：赋值运算符 作用：把=右边数据赋值给=左边的变量
   5 在js中,有3种常用的基本数据类型:数字类型/字符串类型/布尔类型

四、基本运算符
1.变量也可以参与运算
字符串相加：当+用于字符串变量相加时,可以进行字符串拼接
2. 字符串和数字相加：会把数字转换字符串,做一个字符串拼接的操作,相加的结果还是字符串
3. -运算符：两个数字相减会执行减法运算
两个字符串/有一个是数字,代码会将其中的字符串转换为数字,然后进行减法运算(前提是字符串能转换为数字,否则相减会得到一个NaN值)
4.*运算：字符串参与乘法运算,遵循-运算相同的规则
不同的运算符有不同的优先级
字符串参与除运算,和-运算规则一致
4. ++自增1 --自减1： ++ 放变量前,表示先自增,后参与计算
5. += 表示自增运算 -= *= /=

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

六、程序流程控制
1.顺序结构，代码从上往下逐句执行
2.分支结构，根据不同的条件，选择性的执行代码
3.循环结构，重复执行某段代码若干次

七、分支语句
1.if-else语句（适用于有两种情况,而且必须二选一）
if (条件){条件成立执行的代码}else{条件不成立执行的代码}
if 中的else不是必须要写的,如果只是想条件成立执行某段代码,不成立就跳过else可以省略
2.比较运算符不能连用,可以使用&& 连接多个条件
例如：正确写法：if (num2>20 && num2<40)
错误写法：if(20<num2<40)

八、JS查找标签、获取修改标签内容
例子1：银行账号登陆

<input id="cid" type="text" placeholder="请输入您的银行卡号">
	<br>
	<input id="password" type="password" placeholder="请输入取款密码">
	<br>
	<!-- onclick 点击按钮时触发的一个执行函数事件 -->
	<button onclick="getMoney()">登录</button>
	
	<p id="result"></p>
	<script>
		// 定义getMoney函数
		// function 函数名(){}
		function getMoney(){
			// 获取银行卡卡号
			// js代码中怎么找到input输入框标签
			// document.getElementById 从当前文档中通过id找到对应的标签元素
			var cInput = document.getElementById("cid")
			// value属性表示输入框中的内容,获取到的值是一个字符串
			var cardId = cInput.value
					
			console.log(cardId)
			// 获取银行卡密码
			var pswInput = document.getElementById("password")
			var password = pswInput.value
			console.log(password)
				
			// 将结果显示到页面上
			// 找到展示结果的标签
			var rsP = document.getElementById("result")
			// 修改p标签展示的文本内容
			// 账号或密码错误, 62220217160008888888-123456
			rsP.innerText = "账号或密码错误，" + cardId + "-" + password
		}
	</script>

例子2：图形计算器

<div>
		<section></section>
		<input id="width" type="text" placeholder="请输入宽度(cm)"><br>
		<input id="height" type="text" placeholder="请输入高度(cm)"><br>
		<button onclick="calc()">计算</button>	
		<p id="result"></p>		
	</div>
	<script>
		function calc(){
			// 获取宽度和高度
			var width = document.getElementById("width").value
			var height = document.getElementById("height").value
			
			// 计算周长和面积
			var side = width*2 + height*2
			var area = width * height
			
			// 显示计算结果
			var rsP = document.getElementById("result")
			// toFixed(n) 保留小数点后n位
			rsP.innerText = "周长：" + side.toFixed(2) + "，面积：" + area.toFixed(2)
		}
	</script>

例子3 ：出租车计价器

<!-- 1.输入行驶公里数 -->
	<!-- 
	 起步价：8元，包含2公里
	 2公里至12公里，每公里1.2元
	 超出12公里，每公里1.5元
	 例如：5公里 8 + (5 - 2) *1.2
	 例如：15公里 8 + 12 + (15 - 12) * 1.5
	 -->
	
	<input id="gl" type="text" placeholder="请输入行驶公里数"><br>
	<button onclick="calc()">计算</button>
	<p id="result"></p>
	<script>	
		function calc(){
			// 1.获取公里数
			var gl = document.getElementById("gl").value;
			// 声明变量用于记录最后的价格
			var money;
			
			// 2.判断公里数,按照阶梯进行计算
			if (gl <= 2){
				// 起步价
				money = 8
			}else if(gl <= 12){
				// 起步价 + (公里数 - 起步价包含公里) * 1.2
				money = 8 + (gl - 2) * 1.2
			}else{
				// 8起步价 + 10公里1.2元 + (公里 - 12) *1.5
				money = 20 + (gl - 12) * 1.5
			}
			
			// 3.渲染结果到页面上
			var rsP = document.getElementById("result")
			rsP.innerText = "应付金额：" + money + "元。"
		}
	</script>

九、for循环

1. for循环结构:
   for(控制循环变量赋值;执行循环条件;循环执行后变量的变化){循环体}

2. for循环循环规则:
   （1）执行初始循环控制变量赋值
   （2）判断循环条件是否满足,如果不满足循环直接退出,如果满足执行循环体
   （3）当循环体执行完毕时,控制循环的变量产生修改,然后回到第2步
   例1：
   for (var i = 0; i < 10; i++){
   // 在循环体中,i是一个变量,记录控制循环变量的变化
   循环体中的代码是重复执行
   if (i == 5){
   console.log(“i等于5了”)
   }
   }

   例2：输出100(不包含)内的所有的偶数
   for (var i = 0; i < 100; i++){
   // 判断是否为偶数
   if (i % 2 == 0){
   console.log(i + “是偶数！”)
   }
   }
   3.for循环可以嵌套使用
   for (var i = 0; i < 10; i++){
   // 循环中再一个循环
   for (var x = 0; x < 10; x++){
   }
   }

3. 循环代码的时候一定要注意: 循环必须是可退出的,否则就是死循环
   例：死循环
   for (var i=0;i<10;i–){
   console.log(i)
   }

十、while循环
1.while循环格式： while (布尔条件){循环体}
2.while循环规则:
(1)判断循环条件,如果为假直接退出循环,如果为真则执行循环体
(2)在循环执行完毕后,回到第1步
3.手动修改i的值,让其在指定条件下结束循环
例：var i = 0;

	while( i < 10 ){
		
		console.log("......."+i)
		// 手动修改i的值,让其在指定条件下结束循环
		i++
	}

4.while死循环例子
while(true){
console.log(’…’)
}