JavaScript学习笔记-1

记录一下JavaScript学习，第一篇。

概念

一门客户端脚本语言，可在本地执行

与HTML结合方式

  • 内部js

    • 在HTML定义一个<script>js代码</script>标签，可以定义在HTML的任何位置，但是房子位置会影响js代码执行顺序，并且是阻塞式的，如果没有执行完毕不会运行接下来的html代码

  • 外部js

    • <script>src = "外部js路径"</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试javascript</title>


    </head>
    <body>
        <script>
            alert("hrlloworld");
        </script>


    </body>

</html>

  • 数据类型

    • 原始数据类型
      • number：数字（整数、小数、NaN(not a number 一个不是数字的数字类型)）
      • string：字符串（字符和字符串）“ABC” ‘ABC’
      • booleam：布尔类型 true false
      • null：一个对象为空
      • undefined：未定义。如果一个变量 没有给初始化值，则会默认被赋值undefined
    • 引用数据类型：对象

  • 变量

    • var 变量名 = 初始化值；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    // alert("hrlloworld");
    var a = "a";
    // alert(a);
    var str = "abc";
    var str2 = "def";

    //
    var bool = true;

    var obj = null;
    var int = 1;
    var int2 = NaN;

    var def = undefined;

    //输出到页面上
    document.write(a +"----"+typeof(a)+ "<br/>");
    document.write(str +"----"+typeof(str) + "<br/>");
    document.write(str2 +"----"+typeof(str2) + "<br/>");
    document.write(bool +"----"+typeof(bool) + "<br/>");
    document.write(int +"----"+typeof(int)+ "<br/>");
    document.write(int2 +"----"+typeof(int2)+ "<br/>");
    document.write(obj +"----"+typeof(obj)+ "<br/>");
    document.write(def +"----"+typeof(def)+ "<br/>");
</script>

运算符

  • 算术运算符
运算符 描述
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++ 自加
– 自减
  • 赋值运算符
运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
+ 运算符也可用于对字符串进行相加（concatenate，级联）。
	txt1 = "Bill";
	txt2 = "Gates";
	txt3 = txt1 + " " + txt2; 
	结果为Bill Gates
+= 赋值运算符也可用于相加（级联）字符串：
	txt1 = "Hello ";
	txt1 += "Kitty!"; 
	结果为
	Hello Kitty!
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：
	x = 7 + 8;
    y = "7" + 8;
    z = "Hello" + 7;
    x、y 和 z 的结果将是：
    15
    78
    Hello7
  • 比较运算符
  1. 类型相同直接比较
    • 字符串按照字典顺序比较，逐位比较
  2. 类型不同。先进行转化再比较
    • ===先进行类型判断，如果不同直接false，否则接着比较
运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符
  • 逻辑运算符
运算符 描述
&& 逻辑与(有短路的效果)
|| 逻辑或(有短路的效果)
! 逻辑非
  • 类型运算符
运算符 描述
typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。
  • 位运算符
运算符 描述 例子 等同于 结果 十进制
& 与 5 & 1 0101 & 0001 0001 1
| 或 5 | 1 0101 | 0001 0101 5
~ 非 ~ 5 ~0101 1010 10
^ 异或 5 ^ 1 0101 ^ 0001 0100 4
<< 零填充左位移 5 << 1 0101 << 1 1010 10
>> 有符号右位移 5 >> 1 0101 >> 1 0010 2
>>> 零填充右位移 5 >>> 1 0101 >>> 1 0010 2

注意事项

  1. string转number：按照字面转化，如果字面不是数字则转化为NaN；
  2. boolean转number***：***true为1；false为0；
  3. number转Boolean：0或NaN为假非0为真；
  4. string转Boolean：除了空字符串都是true；
  5. null&undefine:都是false
  6. 所有对象都是true
  7. 左移 都是 乘 ；右移 都是 除 左移一位就是乘2；
  8. 三元运算符：d=a?b:c

流程控制语句

与Java保持一致

  1. if…else…
  2. switch
  3. while
  4. do…while
  5. for

特殊语法

  1. 语句以;结尾，如果一行只有一条语句则;可以省略；
  2. 变量定义使用var关键字，也可以不使用;如果使用定义的变量是局部变量，不用就是全局变量；即变量的作用域不同；

小例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>99乘法表</title>
		
		<style>
			td{
				border: 1px  solid;
				color: palevioletred;
			}		
		</style>
		
		
		<script>
			//for循环嵌套
			
			document.write("<table align='center'> ")
			
			
			for(var i=1;i<=9;i++){
				
				document.write("<tr>")
				
				for(var j=1;j<=i;j++){
					document.write("<td>")
					
					document.write(i+"*"+j+"="+(i*j)+"&nbsp");
					
					document.write("</td>")
					
				}
				
				document.write("</tr>")
				
				//输出换行
				//document.write("<br/>");
			}
			
			document.write("</table>");
				
		</script>
	</head>
	<body>
			
	</body>
</html>