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;
*/

运算符优先级