1、js基础内容

js基础内容

1. 编辑器

编译环境 浏览器

编辑软件 vscode sublime DW H5Build Atom

【注】尽可能多的去使用编辑器去编辑代码。

Html+css

JS 逻辑

比作建设一栋摩天大厦

Html 结构

css 装修

javaScript 物业 (和用户交互)

如何和用户进行交互。

2.认识JavaScript

基于对象和事件驱动的客户端脚本语言。

++ JavaScript是一种专为与网页交互而设计的客户端脚本语言。++

网页交互 和网站进行互动

客户端

客户端和服务端（相对概念）资源提供

++ 服务端 资源提供方

客户端 获取资源 ++

3.js的基础

<script type = "text/javascript">

/* javascript组成

graph TB
javascript-->ECMAScript
javascript-->BOM
javascript-->DOM

++ 1、ECMAScript

2、BOM Browse Object Model 浏览器对象模型

3、DOM Document Object Model 文档对象模型 ++

*/

/*【注】javascript代码全部写在script标签里。

src: 引入外部文件【引入js文件】 css href */

/*第一个js程序

== alert() 弹出警告框

document.write() 在页面上输出文本 ==

*/

// alert("Hello World!");

//document.write("Hello World!");

            alert(1);
		</script>
		<script>
			alert(2);
		</script>
		<script src = "demo.js">
            /*
				如果用户引入外部文件
				这里就不能再写代码了
			*/
			alert("执行不到");
//  单行注释   快捷键（ctrl + /）
/*
		多行注释  快捷键（ctrl + shift + /）
*/
		</script>

4.js注意

            /*document.write("<h1>标题</h1>"); */
	        /*	document.write 会自动解析文本内标签内容
			*/
			/*
				转义字符 &lt  <    &gt  >
			*/
			document.write("&lt/script&gt");
			/*
				【注】要求每一条js语句后都加分号。
			*/

5.变量和常量

++ 常量/直接量/字面量 ++

100 3.14 "hello" true

数据类型：

== ** 基本数据类型 ： ==

++ ** Number/数字 ** ++ 10 3.14

++String/字符串++ 所有带单引号或双引号

++Boolean/布尔值**++ true false

复合数据类型：对象

++特殊数据类型++：NaN(not a number) 　undefined(未声明)　 null(空)

1、变量的声明/定义

var 关键字(特殊功能的单词) 声明变量

var num 在内存中开辟/申请一块空间，名字叫做num

num = 20;

2、初始化

声明变量的时候，直接赋值，叫做初始化。

                /*var num = 20;
    			alert(num);*/
    			/*var num;
    			alert(num); //undefined*/

3、为了避免上述操作，一般情况下，会把变量赋值成null

                /*var num = null;
    			num = 30;*/
			/*
				typeof 输出当前变量或者常量的数据类型
			*/

			// alert(typeof num); //number

			/*var str = "hello";
			alert(typeof str); //string*/

			var isYes = true;
			alert(typeof isYes); //boolean

1、=号前后加空格

2、每一条语句后加分号。

==组成电脑的部件

外设

CPU 内存 硬盘 主板 显卡(GPU)

运行程序 程序被CPU运行

写好程序存储硬盘

硬盘 -> 内存(程序是在内存中被CPU运行)

6.变量命名规则

/*

++【注】用户自定义的名称，都叫做标识符。++

1、只能由数字、字母、下划线、$组成

2、不能以数字开头

3、区分大小写age Age 两个变量

4、见名思意

5、多个单词驼峰式命名 className 烤串式 class_name 6、禁止用拼音，英文单词用全拼

7、不能是关键字和保留字

++【注】JS变量，弱类型。变量的数据类型可以根据赋值改变。++

【注】禁止这么做，会歧义。

*/

            // var 1nu$m = 10;
			/*var num = 10;
			var num1 = 10, num2 = 20, num3 = 30;
			var str = "hello";
			var name = "qf"
			var className = "青岛1802";*/
			/*var num = 10;
			num = "hello"
			alert(typeof num);*/

7.运算符

/*

++算数运算符

逻辑运算符

关系运算符

赋值运算符

自增、自减运算符++

...

*/

/*

算符运算符

+

-

*

/

% 取余运算符

0.01

*/

++++            /*++++var num = 12 % 10;
			alert(num);*/

			/*var num = -10 / 0;  //Infinity无穷大  -Infinity无穷小
			alert(num)*/

/*

其他数据类型的算数运算

++表达式：变量/常量和任何运算符组成的式子叫做表达式。

1、功能

2、值++

*/

// alert(100 + 200);

8.自动数据类型转换

/*

自动数据类型转换：

【注】不同数据类型的数据，不能直接用于计算，转化成同一类型，才能进行计算。

*/

/*

+

1、当运算符是加法，并且其中一个操作数是字符串的情况下，另外一个操作数也会被转成字符串进行拼接。

*/

            // var str = "hello" + "world";
			// var str = "hello" + 100
			// var str = "hello" + true;
			/*var str = "hello" + undefined;
			alert(str);*/

/*

2、当运算符不是加号，如果操作数是字符串，操作数会直接转成数字进行运算。

如果操作数不是纯数字字符串的话，转成数字会直接转成NaN,NaN和任何数据进行运算，都是NaN(not a number)。

*/

            /*var str = "200" - "100";
			alert(typeof str); //number*/

			/*var str = "200" - "10a";
			alert(str); //NaN*/

/*

3、布尔值和数字进行算数运算。

<1>将布尔值转成数字，再进行运算

<2>true => 1 false => 0

*/

            // var num = 1 + true;
			// var num = 1 + false;
			// var num = 10 - true;
			/*var num = "10" - true;
			alert(num);*/

9.强制数据类型转换

/*

++Boolean(数据);

【注】将别的数据类型强制转换成布尔值。++

1、非零即真

2、非空即真

3、undefined NaN null => false

*/

            // alert(Boolean(-10)); //true
			// alert(Boolean(0)); //false

			// alert(Boolean("10")); //true
			// alert(Boolean("")); //false

			// alert(Boolean(undefined)); //false
			// alert(Boolean(NaN)); //false
			// alert(Boolean(null)); false

10.数字强制数据类型转换

	<script>

/*

Number() 将别的数据类型转成数字

parseInt() 取整

parseFloat() 取浮点数(带小数点的数)

*/

            // alert(Number(true));
			// alert(Number(false));

			// alert(Number("200a")); //NaN

			// alert(parseInt("3.14"));

			// alert(parseInt("20a")); //20

			// alert(typeof parseFloat("3.14")); //number

/*

++【注】不要用小数进行运算，计算机不会计算小数运算。++

*/

		// alert(3.14 + 5.33);
		alert(0.8 - 0.1);
	</script>

11.练习

<script>
			/*
				a.入职薪水10K，每年涨幅入职薪水的5%，50年后工资多少？
			*/  

			/*var money = 10000;
			var salary = money * 0.05 * 50 + money;
			alert(salary);*/

			/*
				b.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
			*/
			/*var hour = 89;
			var date = parseInt(hour / 24);
			var newHour = hour % 24;

			alert("共" + date + "天零" + newHour + "小时");*/

			/*
			c.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
			它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
			提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
			*/

			/*var Fahrenheit = 90;
			var centigrade = 5 / 9 * (Fahrenheit - 32);
			alert(centigrade)*/

			/*
				d.给定一个三位数，分别把这个数字的百位、十位、个位算出来并显示。
			*/
			var num = 123;
			var unit = num % 10;
			var decade = parseInt(num / 10) % 10;
			var hundreds = parseInt(num / 100);

			alert("百位：" + hundreds + "，十位：" + decade + "，个位：" + unit);

/*

1、代码缩进(JS/html) 一个tab键 == 四个空格

2、=号两边的空格 + 号两边的空格，所有运算符前后都要加空格。

3、语句最后的 ; 号

*/

	</script>

12.运算符格式

<script>
		/*
			格式：*=  += -= /= %=
		*/
		var num = 10;
		// num = num + 20;
		// num += 20;

		// num = num * 10;
		num *= 10;
		alert(num);
	</script>

13.一元运算符

<script>
		/*
		【注】操作数只有一个，叫做一元运算符
			操作数++
			1、功能   对原来的数进行+1操作。
			2、值

		【注】表达式  num    num++   ++num

功能：一致，都是对原有的num进行+1操作。自增

值：

num++

++后置，先取值，后运算

++num

++前置，先运算，后取值

b=a++——>b=a,a=a+1

c=++a——>a=a+1，c=a

操作数--

*/
			// var num = 2;
			// alert(num++); //2
			// alert(++num); //3
			// alert(num);   //3

			var num = 2;
			// alert(num--);
			alert(--num);
			alert(num);
	</script>

14.关系运算符

    <script>
		/*
			> < >= <= == != === !==

		格式：
			表达式1 关系运算符 表达式2
		值： true   false
		*/
		// alert(10 > 20);

/*

【注】别的数据类型之前的关系运算

和其他运算符一样,当关系运算符操作数非数值时要遵循一下规则:

1.两个操作数都是数值，则数值比较；

2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；

逐位进行比较，只要比较出大小，直接得出结果。

3.两个操作数有一个是数字，则将另一个转换为数字，再进行数值比较；

4.NaN和任何数据，进行关系运算都是false。

*/

            // alert("a" > "b"); //ASCII码值 字符和二进制的十进制表示的编码一张对应表

			// alert("abcd" < "ad"); //true

			// alert(10 < "9a");

			// alert(2 > true);
			// alert(true == 1);
			// alert(false == 0);

/*

++在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：

1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；

2.一个操作数是字符串，则比较之前将其转成为数值再比较

3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；

4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false++

*/

		// alert(NaN == NaN); //false

		alert("10" === 10);

	</script>

15.逻辑运算符

<script>

/*

逻辑运算符

与 && (and符号)

格式： 表达式1 && 表达式2

结果：当两个表达式都为真的时候，与运算为真。

短路操作：

当第一个表达式为假的时候，整个表达式为假，表达式2就不去执行。

或 ||

格式：表达式1 || 表达式2

结果：当两个表达式都为假的时候，或运算为假。

短路操作：

当第一个表达式为真的时候，整个表达式为真，表达式2就不去执行。

非 !

格式：!表达式

结果：表达式的值取反。

*/

            // alert(a);

			// alert(10 < 5 && alert(a));

			// alert(10 > 5 || alert(a)); //true

/*

非运算

它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

1.操作数是一个空字符串，返回 true；

2.操作数是一个非空字符串，返回 false；

3.操作数是数值 0，返回 true；

4.操作数是任意非 0 数值(包括 Infinity)，false；

5.操作数是 NaN，返回 true；

6.操作数是 undefined，返回 true；

*/

            // alert(!"");  //true
			// alert(!"ss");  //false
			// alert(!0); //true
			// alert(!Infinity); //false
			// alert(!NaN); //true
			// alert(!undefined); //true

/*

位运算

32位操作系统

32位地址总线

32位可最大寻址基数。 2^32

例如：全国

用十进制两位数进行发放电话号码 00~99

用户二进制两位数进行发放电话号码 00 01 10

1132位系统下可识别的最大内存4GB。

64位操作系统 2^32 * 4GB

计算内存：CPU运行程序的场所。

4GB 8GB

相当于一个一个开关组成的一栋摩天大厦，每一个开关一个房间，每一个房间住一个1或者0.

*/

/*

字符串运算符

+ 字符串拼接符

*/

        var num1 = 10, num2 = 20, num3 = 30;

	</script>

/*

十进制

二进制

八进制

十六进制

*/

/*

十进制转二进制

52 　　模二取余

110100

二进制转十进制

1 * 2^2 + 1 * 2^4 + 1 * 2^5 =

4 + 16 + 32 = 52

八进制

二进制 => 八进制

【注】自右往左，每三位一组，不足三位用0补齐，将每三位转成十进制数。

110 100

64

4 * 8^0 + 6 * 8^1 = 52;

十六进制 0~9 a b c d e f

【注】自右往左，每四位一组，不足四位用0补齐，将每四位转成十进制数。

0011 0100

34

4 * 16^0 + 3 * 16^1 = 52;

*/

运算符优先级