网络安全之web基础js篇（上篇）（基础入门）

<!DOCTYPE html> <!-- 声明文档类型为html -->
<html>
	<head> <!-- 文档头部 -->
		<meta charset="utf-8">  <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 -->
		<title>我的js笔记</title> <!-- 标题 -->
	</head>
	<body> 
	<script type="text/javascript">//声明类型为js
		alert("这是一个警告框");//alert函数用来在浏览器上方弹出一个警告框
	</script>
    </body>
</html>

alert在浏览器正上方弹出一个警告框

2，prompt提示框函数

<!DOCTYPE html> <!-- 声明文档类型为html -->
<html>
	<head> <!-- 文档头部 -->
		<meta charset="utf-8">  <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 -->
		<title>我的js笔记</title> <!-- 标题 -->
	</head>
	<body> 
	<script type="text/javascript">
		prompt("这是一个提示框");//prompt函数用来在浏览器上方弹出一个提示框
	</script>
    </body>
</html>

propmt在浏览器正上方弹出一个提示框

3，console控制台函数

console.log在控制台输出一些数据

<!DOCTYPE html> <!-- 声明文档类型为html -->
<html>
	<head> <!-- 文档头部 -->
		<meta charset="utf-8">  <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 -->
		<title>我的js笔记</title> <!-- 标题 -->
	</head>
	<body> 
	<script type="text/javascript">
		console.log("这是一个控制台输出的信息");//console用来在浏览器控制台输出一些数据
	</script>
    </body>
</html>

F12打开开发者模式点击Console可以看到输出的数据

在控制台中也可以进行简单的运算，1+1得到结果2

  <script>	
  console.log(1+1);
  </script>

或直接在控制台输入1+1

二，js中五个基本数据类型

【1】string(字符类型)：“老男孩”

【2】number(数字类型)：888

【3】blooean(布尔类型)：True,False

【4】undefined(未定义类型)：undefined

【5】Null(空类型)：null

1，引用类型

Object（引用类型）：函数、数组、正则、DOM、BOM

2，数字类型字面量

整数（分正负）：5，-5

小数（分正负）：0.2，-0.2

科学计数（分正负）：2e3(相当于2*10^3)，-2e3(相当于-2*10^3)

无穷数（分正负）：Indinity，-Indinity，1/0

NaN（不是一个数字）:0/0（分母不能为0，所以会出现NaN）

3，字符串类型的字面量

数据由单引号或双引号括起来，字符串中的字符，可以是汉字、英文字母、数字、任意特殊字符。

		<script>
        console.log("你好");
		console.log("hello");
		console.log('8');
		console.log('*');
        console.log("");//空字符
        </script>

三，js中的变量

4，变量

顾名思义可以变的量，变量用法有三个步骤：

1，定义变量

2，给变量赋值

3，使用变量

    <script>
    var a;//定义变量，也可在定义的同时赋值如：var a=4;
	a=4;//给变量赋值
	console.log(a);//使用变量
    </script>

如果没有给变量赋值那么变量的值默认为undefined

5，变量的命名规则

1. 可以是数字、英文字母、下划线、美元符号$

2. 不能以数字开头

3. 不能是关键字、保留字

6，变量声明提升

顾名思义是将定义的变量作用域提升到最上面去，但是赋给的值不会提升到最上面。

<!DOCTYPE html> <!-- 声明文档类型为html -->
<html>
	<head> <!-- 文档头部 -->
		<meta charset="utf-8">  <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 -->
		<title>我的js笔记</title> <!-- 标题 -->
	</head>
	<body> 
	<script type="text/javascript">
	console.log(a);//undefined
	    var a;
		a=4;
	console.log(a);//4
	</script>
    </body>
</html>

输出结果

7，用typeof检测数据的类型

<script>
    console.log(typeof "good");
	console.log(typeof 100);
	var a;
	console.log(typeof a);
</script>

结果

8，数据类型的转换

【1】数字转字符串

通过使用＋号将数字转换成字符，可以理解为连字符吧

<script>
console.log("你好啊"+65+"hello");
</script>

结果

【2】字符串转数字

parseInt函数是将第一次遇到的整型数字字符串给提取出来

parseFloat函数是将第一次遇到的浮点型（小数）数字字符串给提取出来

<script>
console.log(parseInt("123你好456"));
console.log(parseFloat("1.23你好啊4.56"));
</script>

结果

9，从提示框获取数据

	<script type="text/javascript">
		var a=prompt("你今年几岁了?");
        console.log(a);//输出在输入框输入的数据
    </script>

输入19控制台输出19

10，数学运算符（+，-，*，/，%）对应加，减，乘，除，模除（求余数）

<script type="text/javascript">
        console.log(10+3);//输出13
		console.log(10-3);//输出7
		console.log(10*3);//输出30
		console.log(9/3);//输出3
		console.log(10%3);//输出1
    </script>

11，赋值运算符（=，+=，-=，*=，/=，%=）

	<script type="text/javascript">
	var a=1;
    a+=4;
	console.log(a);//输出5
    </script>

其实可以理解为a=a+4

12，数学函数Math

<script type="text/javascript">
        console.log(Math);
</script>

可以看出Math里面集成了许多数学函数

使用Math，还有许多内置的函数，这里列举几个

	<script type="text/javascript">
        console.log(Math.abs(-34));//求绝对值
		console.log(Math.random(0,2));//0到2的随机数
    </script>

13，类型隐含的值

类型隐值

True 1

False 0

undefined NaN

null 0

空字符串:"" 0

纯数字字符:"123" 123

混合的数字字符:"1a" NaN

14，比较运算符

大于 >

大于等于 >=

小于 <

小于等于 <=

等于 ==

全等于（值和类型都相等） ===

不等于 !=

不全等于 (值和类型都不相等) !==

15，字符串比较

从第一个开始按字符的ASCII码值依次向后进行进行比较，结果为true或false

0的ASCII为48

A的ASCII为65

a的ASCII为97

	<script type="text/javascript">
      console.log("abc">"abcd");//输出false
    </script>

16，逻辑运算符

逻辑与：&&，逻辑或：|，逻辑非！

【1】逻辑与（一0为0，全无0为后面哪个数）

	<script type="text/javascript">
      console.log(0&&1);//0
	  console.log(1&&2);//2
    </script>

结果

【2】逻辑或（不是全0数值为不是0的哪个数）

	<script type="text/javascript">
      console.log(0|0);//0
	  console.log(0|2);//2
    </script>

结果

【3】逻辑非（真假互换）

	<script type="text/javascript">
      console.log(!0);//true
	  console.log(!1);//false
    </script>

结果

17，隐含的boolean类型

0，NaN，undefined，unll，空字符串：false

非0数字，非空字符串：true

18，if条件语句

格式：

【1】if

格式：

<script>
if(条件)
{
   要执行的语句；
}
</script>

例子：

<script>
if(2>1)
{
console.log("2大")；
}
</script>

【2】if{}else{}

格式

<script>
if(条件)
{
 要执行的语句；
}
else
{
当条件为假时执行的语句；
}
</script>

例子：

	<script type="text/javascript">
	var a=1,b=2;
     if(a>b)
	{alert("a>b执行这里");
	} 
	 else
	 {
		 alert("a<b执行这里");
	 }
    </script>

【3】 if{}else{}嵌套（意思是if{}else里面套了if{}else）

格式：

	<script type="text/javascript">
	var a=80;
   if(条件语句)
   {
	执行语句;   
   }
   else if(条件语句)
   {
	  执行语句;
   }
   else
   {
	  执行语句;
   }
    </script>

例子：

	<script type="text/javascript">
	var a=80;
   if(a<60)
   {
	alert("不及格");   
   }
   else if(a>60&&a<=70)
   {
	   alert("及格");
   }
   else
   {
	   alert("优秀");
   }
    </script>

19，自增自减运算符

	<script type="text/javascript">
	var a=1,b=1,c=1,d=1;
	console.log(a++);//先输出1后自增加1
	console.log(++b);//先加1后输出2
	console.log(c--);//先输出1然后自减减1
	console.log(--d);//先自减减1后输出0
    </script>

结果

20，switch条件语句

格式：

<script type="text/javascript">
switch(条件)
{
	case 条件1:
	执行语句;break;
	case 条件2:
	执行语句;break;
	case 条件3:
	执行语句;break;
    default:执行语句;break;
}
</script>

【1】先判断条件是否为真

【2】条件为真去匹配case中的条件，满足则执行语句

【3】break的作用是执行完这条语句后就跳出switch不再执行下面的了，如果没有break它就会把符合条件及它下面的都给执行了

【4】default的作用是在找不到符合的case条件时执行这条语句

例子：

	<script type="text/javascript">
	var a=80;
	var b=1;
switch(b==1)
{
	case a<60:
	alert('不及格');break;
	case a>70:
	alert('及格');break;
	case a>60:
	alert('优秀');break;
    default:alert('成绩错误');break;
}
    </script>

21,循环语句

1，for循环

格式：

	<script type="text/javascript">
	for(定义变量;设置条件;变量调整)
	{
		执行语句;
	}
    </script>

例子：下面是在控制台输出0到80的数（设置条件时应该避免条件永远为真，避免死循环）

	<script type="text/javascript">
	var a=80;
	for(var b=0;b<=a;b++)
	{
		console.log(b);
	}
    </script>

程序执行的顺序：

【1】定义变量

【2】判断条件

【3】执行语句

【4】变量调整

2，for语句嵌套（for里面有for）

	<script type="text/javascript">
	for(var b=0;b<=3;b++)
	{
		for(var c=0;c<=b;c++)
		console.log(c);
	}
    </script>

【1】外面的for循环一次里面的for循环到c>b为止，直到外面的for条件也终止

【2】结果是0010120123

算法实例：

1，从1加到10,并输出到控制台

	<script type="text/javascript">
		var a=0;
	for(var b=1;b<=10;b++)
	{
		a+=b;
	}
	console.log(a);
    </script>

2，计算1~100之间的奇数和偶数

	<script type="text/javascript">
		var j=0,o=0;
	for(var b=1;b<=100;b++)
	{
		if(b%2==0)
	 o++;
	 else j++;
		
	}
	console.log(o,j);
    </script>

3，输出1~100间的素数（素数：只能被1和本身整除的数）

	<script type="text/javascript">
	for(var a=1;a<=100;a++)
	{
        for(var b=2;b<a;b++)
		{
			if(a%b==0) break;
		}
		if(b==a) console.log(a);	
	}
    </script>

【1】break跳出所在的循环

【2】continue结束本次循环

2，while循环

格式：

	<script type="text/javascript">
   while(条件)
   { 
      执行语句;
   }
    </script>

1，输出1~20的数

	<script type="text/javascript">
   var a=0;
   while(a<=20)
   {   a++;
	   console.log(a);
   }
    </script>

2，输出1~20之间的奇数

	<script type="text/javascript">
   var a=0;
   while(a<20)
   {   a++;
	   if(a%2!=0)
	   console.log(a);
   }
    </script>

3，do{}while循环

格式：

<script type="text/javascript">
      do
      {
       执行语句;
      }while(条件);
 </script>

【1】值得注意的是do{}while最少执行一次

1，输出1~10的数

	<script type="text/javascript">
   var a=0;
   do
   {    a++;
	   console.log(a);
   }while(a<10);
    </script>

22，js中的函数

格式：

	<script type="text/javascript">
    function fun(形参){
       执行语句
    }

fun(实参);//调用函数
    </script>

1，函数调用进行简单的加法运算

	<script type="text/javascript">
    function fun(a,b){
    console.log(a+b);//输出2
    }
    fun(1,1);//调用函数
    </script>

2，局部变量和全局变量

【1】局部变量（也就是被局部的定义域给限制了）

	<script type="text/javascript">
    function fun(){
    var c=9;
	console.log(c);//这是局部变量
    }
    fun();//调用函数
	console.log(c);//这里调用函数内部的局部变量会报错
    </script>

报错：not defined没有定义

【2】全局变量（在整个<script>标签内都可使用，但是值得注意的是局部变量的优先级要大于全局变量）

	<script type="text/javascript">
    var c=9; //这是全局变量
    function fun(){
	console.log(c);
    }
    fun();//调用函数
	console.log(c);
    </script>

不会报错：

3，变量作用域的提升（它会将声明提升到最上方但是不会把定义的值给提升到最上方）

	<script type="text/javascript">
    function fun(){
	console.log(c);
    }
    fun();//调用函数
	var c=9;
	console.log(c);
    </script>

输出结果：

4，return关键字

顾名思义返回一个值

	<script type="text/javascript">
    function fun(){
	 return 5;
	 console.log(6);
    }
	c=fun();
	console.log(c);
    </script>

结果：可以看到只输出了一个5,因为我们函数在执行完return后就不会再执行后面的语句了。

5，表达式类型的函数

<script type="text/javascript">
   var fun=function(){
	 alert("hello boy");
    }
	fun();
    </script>

结果：

【1】值得注意的是在调用时必须要在定义好了之后才能调用，它不会把他的作用域提升到最上方

例如：

	<script type="text/javascript">
		fun();
   var fun=function(){
	 alert("hello boy");
    }
	fun();
    </script>

结果报错了：

6，回调函数（顾名思义就是自己调用自己）

例如：

	<script type="text/javascript">
    function backfun(goback){
	 goback();
    }
	backfun(function(){alert("good boy");
	})
    </script>

结果：

【1】我们这里用goback接收了function(){alert("good boy");}，然后又用goback()调用回来了，这就是回调函数了。

7，递归（多次调用函数直到条件为假为止）

例如：递归实现5的阶层及5*4*3*2*1

	<script type="text/javascript">
    function fun(a){
	 if(a==1)return 1;
	 return  a*fun(a-1);
    }
	var sum=fun(5);
	console.log(sum);
    </script>

【1】值得注意的是递归要有终止条件啊，不然会死循环的。

8，IIFE立即调用函数（执行到这里时就立即调用一次）

	<script type="text/javascript">
var fun=function()
{
	console.log("这是立即调用函数");
}();
    </script>

输出结果：

第二种写法：

通过加、减、非、小括号：可以将关键字形式函数变为表达式形式的函数

例如：

	<script type="text/javascript">
  +function(a){
	 console.log(a);
 }("you")
 
 -function(b){
 	 console.log(b);
 }("are")
 
 +function(c){
 	 console.log(c);
 }("good")
 
 +function(d){
 	 console.log(d);
 }("boy")
 
    </script>

输出结果：