第五次网页前端培训笔记（JavarScript基本语法）

1.JavaScript

1.1.JavaScript组成

ECMAScript（基础语法）：描述了该语言的基本语言和对象

DOM（文档对象模型）：描述了处理网页内容的方法和接口

BOM（浏览器对象模型）：描述了与浏览器进行交互的方法和接口

1.2.基本用法

1.2.1.行内JS

<button onclick="alert('Hello 刘德华')">按钮</button>/*在HTML上直接写JS代码*/

效果如图

 

1.2.2.内部JS

<script>
		alert('Hello 刘德华')/*在script中写JS代码，script标签可以在head或body中（建议放在body标签最后）*/
		</script>

效果如图（打开网页直接显示）

 

1.2.3.外部JS

<script src="js/text.js" type="text/javascript" charset="utf-8">
		
		</script>/*定义JS文件，通过script标签的src属性引入对应的JS中*/

效果如图

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

2.JavaScript基础语法

2.1.语句和注释

语句：
                1.JS代码 一行为单位，代码从上而下走，一行一条语句
                2.语句不加分号结尾，如果一行定义多条语句，每句语句必须以分号结尾。（建议都加分号）
                3.表达式不需要以分号结尾，如果加了分号则会被JavaScript当作语句执行，生产无用的语句
注释：
                 HTML代码注释：<！---->
                 JS代码注释：//单行注释
                                       /**/多行注释-->

2.2.标识符和关键字

标识符：
                    规则：
                        由Unicode字母、_、$、数字组成、中文组成
                          1.不能以数字开头
                          2.不能是关键字和保留字
                          3.严格区分大小写
                    规范：
                        1.见名知意
                        2.驼峰命名和下划线规则
关键字（保留字）：
                    声明变量时，不要使用关键字

2.3.变量

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

注：也可以不用var修饰符，直接声明

2.3.1变量的声明

（1）先声明再赋值

var a;
a=10;

（2）声明并赋值

var a = 10;

2.3.2变量的注意点

（1）如果变量只声明而为赋值，则显示undefined

var b
console.log(b)

效果如图

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

console.log(c)

效果如图

（3）可以使用var同时声明多个变量

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

效果如图

 

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

var a;
a=10;
var a;
console.log(a);

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

var a;
a=10;
var a = 20;
console.log(a);

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

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

效果如图

2.3.3.变量名提升 

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行，这造成的结果是所有变量的声明语句，都会被提到代码的头部，这就是变量名提升

注释：变量提升只对var命令声明的变量有效

2.4.数据类型

2.4.1.undefined类型

（1）变量只声明未赋值

var a;
console.log(a)

（2）当定义函数需要形参，而调用函数未传递形参时，参数值未undefined

function fn01(str)
{
console.log(str)
}
fn01()

（3）函数没有返回值，接收者为undefined

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

2.4.2.null类型

（1）使用typeof操作符测试null返回object字符串（typeof操作符，判断变量的类型）

console.log(undefined==null)

（2）undefined源自null，等值比较返回值是ture。未初始化的变量和赋值为null的变量相等

var c
console.log(c==null)

2.4.3.布尔类型

ture和false 没啥可讲的

2.4.4.数值型（整型和浮点型）

（1）1与1.0相等，1+1.0得到的还是整数2

console.log(1==1.0)
console.log(1+1.0)

（2）存储数据中自动将能够转化成整型的浮点数转化为整型

console.log(1.0)

效果如图

2.4.5.字符串

（1）使用''或""引起来

var a1="Hello"
var a2='World'
	

（2）可以使用+对字符串拼接

var a1="Hello"
var a2='World'
console.log(a1+a2)

 2.4.6.对象类型

（1）数组

var数组名=[ ]

（2）对象

var 对象名=( )

（3）函数

function 函数名（）{
}

2.5.类型转换 

2.5.1.自动类型转换

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

（2）转布尔型：有值为ture，无值为false（0为false，非0为ture）

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

 2.5.2.函数转换

（1）parseInt      转整数型

<script type="text/javascript">
			console.log(parseInt("123abc"))
			console.log(parseInt("abc123"))
			console.log(parseInt("123.4abc"))
			console.log(parseInt("123"))
		</script>

效果如图

 

（2）parseFloat  转浮点型

<script type="text/javascript">
			
			console.log(parseFloat("123abc"));
			console.log(parseFloat("abc123"));
			console.log(parseFloat("123.4abc"));
			console.log(parseFloat("123"));
			console.log(parseFloat("123.4.5"));
			console.log(parseFloat("123.45"));
		</script>

效果如图

 

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

 2.5.3.显示转换（强制转换）

（1）toString（）转换为字符串（不能对null和undefined使用，会报错）

data=1;
			console.log(data.toString())

效果如图

 

（2）toFixed（）保留指定小数位（四舍五入，不包括5）

data1=1.346
			console.log(data1.toFixed(2))

效果如图

 

（3）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))

效果如图

（4）Boolean 强制转化成布尔类型

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

效果如图

 

（5）String（）强制转化成字符串（null和undefined也可以转换）

console.log(String(10))
			console.log(String(null))

效果如图