第五次网页前端培训（JS）

一，简介

javascript是一种具有面向对象能力的，解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户脚本语言。它的主要目的是，验证发往服务器端的数据，增加web互动。加强用户体验度等。

二，HTML的基本使用

1，JS的三种使用方法

（1）行内JS

再html标签上直接写代码

<button onclick="alert('Hello World!');">按钮</button>

 

 

（2）内部JS

在script标签中写js代码，script标签可以放在head或body中（建议放在body标签后面）

<script type="text/javascript">
           alert("这是一个按钮！")		
		</script>

 

 

（3）外部JS

定义JS文件，通过script标签的scr属性引入对应的JS文件

注意：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效

三，基础语法

1，语句

JS代码以行为单位，代码从上往下执行，一行一条语句

语句不加分号结尾，如果一行定义多条语句，每句语句只会必须以分号结尾（建议都加分号）

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

 

 表达式不需要以分号结尾，如果加了分号则JavaScript引擎会当作语句执行，生成无用的语句

 2.注释

HTML代码注释：<!--HTML注释-->

JS代码注释：

//单行注释

/*多行注释*/

3.标识符

（1）规则

有Unicode字母，_,$,数字组成，中文组成

不能以数字开头

不能是关键字和保留字

严格区分大小写

（2）规范

见名知意

驼峰命名或下划线规则

（3）关键字（保留字）

声明变量时，不要使用关键字

四，变量

JS是一种弱类型语言，在声明变量时不需要指明变量类型，直接用var修饰符进行声明

注意;也可以不使用var修饰符，直接声明并赋值

1.变量的声明

(1)先声明再赋值

<script type="text/javascript">
		var a;
		a=1;
		console.log(a);
		</script>

 

 

（2）声明并赋值

var b=2;
		console.log(b)

 

 2.变量的注意点

（1)如果变量只声明而未赋值，则显示undefinded

	var c;//声明变量
		console.log(c);//undefinded

 (2)如果变量未声明就使用，则会报错

（3)如果可以使用var同时声明多个变量

var aa,bb,cc=10;
		console.log(aa);
		console.log(bb);
		console.log(cc);

 （4）如果重新声明一个已存在的变量，则无效

（5）如果重新声明一个已存在的变量并赋值，则会覆盖

（6）JS是一种动态的，弱类型语言，可以声明任意数据类型的变量

var str ="Hello World";//字符串类型
		var flag = true;//布尔类型
		console.log(str);
		console.log(flag);
		console.log(true);

 

 3.变量名提升

JavaScript引擎的工作方式是先解析代码，获取所有被声明的变量，然后在一行一行的运行

这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这叫变量提升

注意：变量提升只对var命令的声明的变量有效，如果变量不是用var命令声明的，就不会发生变量提升

五，数据类型

1.undefined

值不存在 

出现的情况：

（1）变量只声明未赋值，值为undefined

var a;
		console.log(a);

 

 

(2)定义函数需要形参，调用函数未传递实参时，参数的值为undefined

function fn01(str){
			console.log(str);
		}
		fn01();
		</script>

 

 

 

（3）当函数没有返回值，接受值为undefined

function fn02() {
			console.log("fn02_");
			return;
		}
		var b = fn02();
		console.log(b);

 

 2.null类型

表示空值

（1）使用typeo操作符测试，null返回object字符串。

typrof操作符：判断变量类型

var num = 1;//数值
		var flag = true;//布尔类型
		var str = "Hello";//字符串
		console.log(typeof num);
		console.log(typeof flag);
		console.log(typeof str);

 

var aa = null;
		console.log(typeof aa);

 

 

 

（2）undefined派生自null，所以等值比较返回值时true，未初始化的变量和赋值未null

	console.log(undefined == null);

 

 3.数值型

数值型包含两种数值：整型和浮点型。 

（1)所有数字（整型和浮点型）都是以64位浮点数形式储存。所以在JS中1与1.0相等。

console.log(1==1.0);
		var n = 1 + 1.0;
		console.log(n);
		console.log(1.0);

 

 

 

（2）在储存数值型数据时自动将可以转换为整型数据的浮点数值转为整型

4.字符串类型

（1）使用' '或“ ”引起来

（2）可以使用“+”对字符串进行拼接

var s1 = 'Hello';
		var s2 = "World";
		console.log(s1,s2);
		console.log(s1+s2);

 

（5）布尔类型

true和 false

(6)对象类型

数组：

var 数组名 = [ ];

对象：

var 对象名 = { }；

函数;

function 方法名（ ）{

}

六，类型转换

1.自动类型转换

（1）转字符串：所有的值转字符串都是加引号

（2）转布尔类型：有值为true,无值为false(0为false,非0为true）

（3）转数值型：空值为0，非空的数值型字符串能转换，非数值字符串转换为NaN

2.函数转换

parseInt( )     转整数型

parseFloat( )   转浮点型

注意：转换时会从值的第零个位置开始找有效数字，直接找到无效数字的位置。parseFloat在转换时会比parseInt多识别一个小数点

<script type="text/javascript">
	console.log(parseInt("123abc"));//123
	console.log(parseInt("abc123"));//NaN
	console.log(parseInt("123.4abc"));//123
	console.log(parseInt("123"));//123
	console.log(("123"));
	var a = 1;
	var b = "2";
	console.log(a+b);
	console.log(a + parseInt(b));
	console.log(parseFloat("123abc"));//123
	console.log(parseFloat("abc123"));//NaN
	console.log(parseFloat("123.4abc"));//123
	console.log(parseFloat("123"));//123
    console.log(parseFloat("123.4.5"));
	</script>

 3.显示转换

toString( )      将值转换成字符串

toFixed( )       保留指定小数位,四舍五入

 var aa = 10;	
	console.log(aa);
	console.log(aa.toString());
   var cc = 1.346;
   console.log(cc.toFixed(2));//

 

 

注意：值不能为null     

JS为Number,Booean,String对象提供了构造方法 ，用于强制转换数据类型，转换的是值的全部

Number：

var q = "1";
   var w = "a";
   var e = "123abc";
   var r = "123.4";
   var t = "123.4.5";
   console.log(Number(q));
   console.log(Number(w));
	console.log(Number(e));
	console.log(Number(r));
	console.log(Number(t));

 

 Boolean

console.log(Boolean("a"));
	console.log(Boolean(0));
	console.log(Boolean("1"));
	console.log(Boolean(null));

 

 字符串

console.log(10);
	console.log(String(10));
	console.log(null);
	console.log(String("null"));
	</script>