学习日志 8.5

一：何为js

1. 一种脚本语言，基于对象和事件驱动的脚本语言，与html，css一起构成网页，起到和用户进行交互的作用

2. 本身可以创建对象，以及调用对象

3. 是一种弱语言，没有那么多的数据类型，只有5种基本类型（数字类型number，字符类型string，布尔类型boolean，未定义的undefined，空null）新增一种基本类型（symbol）和引用数据类型（对象object，函数fuction）

4. 安全性

5. 动态性，不是因为通过js达到页面的动态效果，而是通过用户的点击，移动，拖动等动作来成为我们完成某些我们定义的函数的进入点，达到和用户有一种交互的感觉

6. 跨平台性，和操作系统无关，无论是windows，ios，android还是其他的系统，只要系统中有支持实现js的浏览器，都可以被正确的执行，从而达到一段代码什么地方都可以使用

二：js可以做什么

1. 制作网页的特效，目前学习了通过点击不同的按钮达到改变整个页面的背景颜色

2. 提升使用性能，（目前没学习，以后补充）

3. 窗口的动态操作，（目前没学习，以后补充）

三.JavaScript和java之间的关系

没有什么关系，只是名字中带有Java而已，等同与司马光和司马懿之间的关系（毫无关系）

四.js的使用方法

1. 在标签内使用：使用方法在标签内部加上href=
   eg：<a href="javascript:console.log(6666)">xxxx2</a>
   当点击这个a标签的时候，会在console控制台中打印出6666

2. 嵌入式：在body任意位置添加script标签
   eg：

						<script>
    							var a=20
    							console.log(a)
    					</script>

3. 引入式：在body任意位置添加script标签内加src属性
   eg：

			<script src="src/test1.js"></script>

4. 嵌入引入式：后续 es6版本的新技术

五.变量的使用

1. var 声明变量 类似于int char 一个变量 var a = 20; 定义一个a变量，值为20，以后想要使用20这个值就直接使用a变量来代替，变量是为了保存数据，保证***编程数据的复用性***

2. 取数据的时候，取的是该变量最后保存的数据，之前保存的数据会被后面的数据所替代

3. 存数据，如果是之前就被定义过的变量并且有值，这这一步存数据的步骤叫做赋新值，如果这个变量之前并没有过值，这一步就叫做初始化

4. 如果我们想取一个变量中的数据，但是之前这个变量我们并没有定义过，直接读取则会报错，在老版本的时候会引起操作系统的直接崩溃，在现在则为报错，程序进行到这一步之后不会再往下运行，但这一步之前的步骤依然被进行

5. 如果我们直接赋予一个变量值
   eg：b=20;
   如果我们之前并没有定义这个b变量，那么系统会帮我们在全局作用域下隐式声明这个变量，并不会想java那样直接报错不能运行

6. 显式声明的变量会在脚本加载初期就提前声明变量

7. 隐式声明的变量会在脚本加载到那一行代码的时候再去进行隐式的声明

var a = 100;    //这个a变量就是显式声明的变量
b=100;				//这个b变量是隐式声明的变量 

8. 变量的名字取名的规范：单词>拼音>通过_（下划线）进行连接，不能以数字进行开头，除非显而易见的缩写，不要写缩写

六.变量的数据类型

1. 基本数据类型
   number:计算相关的数据
   string:人机交互
   boolean:判断
   undefined:没有定义的数据
   null:空，有定义但是没有值，和undefined有区别
2. 引用数据类型
   object:对象，数组函数，类数组（暂时没咋学）
   function：函数

七.数字类型

数字类型的运算： + - * / %
%的使用:使用的原因有一个是因为使用这个运算符代表着计算出来的值永远不会大于等于除数（取余符号）

			var num1=102
			var num2=100.2
			var num3=num1*num2
			var num4=num1%2//    表达式的结果永远不会超出2
			console.log(num4)

数字的难点 ++ –

a++的意思代表为先把a中储存的值拿出来使用，然后使用完了后再自加1放入a中

var a = 10;
console.log(a++) 	//打印出值为10

var a = 10;
a++;
console.log(a) 		//打印出值为11





			var a=20;
			var b=30;
			(a++)-(--b)+(a++)+(b++); 
			//20-29+21+29
			//a=22
			//b=30



			var c=b--;
			c=30
			var d=(--a);
			d=21
			console.log(a,b,c,d);
			// //a=21 b=29
			// //21 29 30 21

			var a=20;
			var b=10
			var  c=a+++b--
			console.log(a,b,c)

			//这是一道面试题 考点在于a+++b这一步，经过程序，得到的结果是（a++）+b--
			顺序为先进行a++ 在与b--进行相加
			结果为 //21，9，30

NaN
意思为，这是一个值但是只有计算机的二进制能够表现出来，不能通过十进制来表示给我们看

			var a=100
			var b=a*"hello"
			console.log(b)//NaN 非数字 
			//值为NaN因为通过计算机可以计算a*hello，但是这明显不是一个十进制数所以为NaN

			var a=200
			var b=100
			console.log(a==b)
			console.log(100==NaN)
			console.log(NaN==NaN)
			//false  false  false  
			前两个都显而易见 第三个NaN不为同一个值，
			

八.字符串

1. 使用规范：不像java一样，("")两个双引号是代表字符串 （’’）两个单引号是代表字符 ，在js中"" ''的意义是一样的都代表这字符类型，如果在一个语句中要同时使用两对双引号或者单引号可能会引起bug

var str1="<a href="xxx">xxx</a>"  //报错
var str3='<a href="xxx">xxx</a>'

2.字符串的拼接

			var width1=200;
			var width=200+"px"//
			"200"
			console.log(width)  			//200px

拼接是使用最多的功能，在加号的左右双边，如果有一个为字符类型，另外一个数据不是string类型的话，会把那个数据强制的tostring达到字符串的拼接功能

			var name="name1"
			var karen="karen1"
			var re=name+":"+karen
			var re2="name"+karen
			console.log(re,re2) 			//name:karen1    namekaren1	
			通过双引号圈起来的为字符串，不圈起来的为变量

			var name="karen"
			obj[name]="name"
			//系统会报错 具体原因不知道

拼接字符串的题：

			var color1="rgb(255,255,0)"
			var r=255
			var g=255
			var b=0	
			var color2="rgb("+r+","+g+","+b+")"
			console.log(color2)

拼接字符串的模板格式（方便不动脑子固定格式）

			var r=255
			var g=255
			var b=0	
			// var color2="rgb("+r+","+g+","+b+")"
			// var color3=`rgb(r,g,b)`
			var color3=`rgb(${r},${g},${b})`
			console.log(color3)
			//反引号（tab上的键）

			var str = ""
			console.log(str)
			打印出来是不能选取到的0个空字符
			var str1 = "   "
			console.log(str)
			打印出来是能选取到的3个空字符

九.调试

		var a="lalalal";
        alert(a);

跳出对话框lalala 只有一个确定按键

		var re=confirm(b="lalalalalala") ;
        console.log(re);

跳出对话框lalalalala 有一个确定按键一个取消按键，当点击确认按键的时候，会向控制台输出一个ture，当点击取消按键时会向控制台输出一个false

		var a="错误消息"
        console.error(a);

在控制台中输出一个红色的错误消息

var obj={bane:"jack",age:"18"};
        console.table(obj);

会在控制台中输出一个object 里面包含信息
age: “18”
bane: “jack”

十.dom操作

			var btn1=document.querySelector(".btn");
       		btn1.onclick=function(){
            var div2=document.querySelector("#div1");
            div2.innerHTML="123333333333333333333";
            div2.style.backgroundColor="red";
            div2.style.fontsize="30px";

1.获取元素
2.给元素写内容:innerHTML尖括号的内容
3.给元素事件

		//通过选择器获取界面上的元素
        var div1=document.querySelector("#div1");
        

三元素：事件源 事件类型 处理程序

<div id="div1">777</div>
<button class="btn" type="button">xxx点击 </button>
		var btn1 = document.querySelector(".btn");
        btn1.onclick = function () {
            var div2 = document.querySelector("#div1");
            div2.innerHTML = "666";
            div2.style.backgroundColor = "red";
            div2.style.fontsize = "30px";
        }

通过innerHTML来个元素写尖括号里面的内容（777）改变背景颜色和字体大小

十一.课上练习（一键换图）

通过点击不同的图片，让整个页面变成点击的那张图片
思路：1.首先定义出div1，div2起到按钮的作用
2.先定义一个变量，他的值

div1 = document.querySelector(".div2");

然后开始写函数，因为这是一个点击事件所以使用onchilk函数为了验证是否进入到这个函数可以添加console.log(666);然后在定义一个变量body1=document.querySelector("body")
然后在使用body1.style.backgroundImage="url(轮播图1.jpg)"将body的背景图片改变
难点
为什么要先用一个变量来document.querySelector（） //暂时我也不知道

十二.typeof

typeof的意义：检测数据的类型
返回值是一个单词（nmuber,string,null,undefined,boolean,object,symbol）
注意
1.使用typeof时，返回值的值只有可能是这几个中的一个
2.typeof的返回值类型是string类型
eg:

	var a=100;
    var re=typeof(a);					//re=number
    console.log(typeof(re));					//string

十三.布尔类型

布尔类型有两种表达形式
1.直接量 true or false
2.表达式 eg： a>b;

var a = 100;
if(0){
		console.log(a);
}

打印不出来a的值，因为在布尔类型中0==false，包括-0,+0,0

var a = 100;
if(""){
		console.log(a);
}

打印不出来a的值，因为在布尔类型中""(空字符串)==false

var a = 100;
if(undefined){
		console.log(a);
}

打印不出来a的值，因为在布尔类型中undefined==false

var a = 100;
if(NaN){
		console.log(a);
}

打印不出来a的值，因为在布尔类型中NaN==false

总结：
在布尔类型中（false==+0,-0,0,"",undefined,NaN，undefined= =undefined，NaN==NaN）
这些都是不成立的，都是false

十四.null

null的类型为object

console.log(null == undefined)

打印出来的值为ture

console.log(null === undefined)

打印出来的值为false

console.log(typeof（underfined）)

打印出来为空，什么都打印不出来，不知道是什么类型
= 赋值
== 判断数据的值相等
=== 数据的值相等而且类型一样;就是同一个人