JS中的数据和变量
JS是一种专门为与网页交互而设计的脚本语言
JavaScript作用:前端html页面的交互,可以实现效果(动画,操作效果)数据展示 ,数据验证 ,访问数据(小游戏开发 api接口访问实现(天气预报 地图api ))等等
JS的组成部分:
1.核心(ECMAScript)提供核心语言功能
2.文档对象模型(DOM)提供访问和操作网页内容的方法和接口
3.浏览器对象模型(BOM)提供与阅览器交互的方法和接口
1. 如何在html中使用JS
1.1 嵌套在html中
a. 嵌入到head中
<html>
<head>
<title>Demo</title>
<script>
/*js代码段*/
</script>
</head>
<body>
</body>
</html>
b. 嵌入到body中
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script>
/*js代码段*/
</script>
</body>
</html>
1.2 引入外部文件
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
/*src是引用JS文件的路径*/
<script src="js.js" type="text/javascript" async="async"></script>
</head>
<body>
</body>
</html>
1.3 noscript的出现
会在页面不支持或者已经禁用脚本的情况下告诉用户页面未能达到预期效果的原因。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="demo6.js" type="text/javascript" async="async"></script>
</head>
<body>
<noscript>
<p>需要开启脚本支持</p> // 其他的提示性语言
</noscript>
</body>
</html>
2. JS中的数据类型
3.如何声明变量
3.1 变量与常量
Javascipt中声明变量的关键字是var
变量 | 可变的量,可写可读 |
---|---|
常量 | 不可变的量,只读 |
3.2 变量的命名(不区别数据类型,但是严格区分大小写关键字)
变量的命名:
驼峰命名: UserName
帕斯卡命名: userName
带符号 _ user_name
3.3 变量的作用域
局部变量 | 作用于当前的代码块区域, 定义的局部变量不会出现在window |
---|---|
全局变量 | 整个作用域 ,定义的全局变量默认属域window |
var name = "张三"; //全局变量
function method() {
var sex = "男"; //局部变量
console.log(name, sex);
}
console.log(window);
当我们执行上面这段代码会在console控制器中出现如下结果。
而window中只能查找到**name = "张三"这个全局变量,而sex = “男”**作为局部变量无法查找到
我们加入method2,通过执行method2函数来加深理解。
var name = "张三"; //全局变量
function method() {
var sex = "男"; //局部变量
console.log(name, sex);
}
console.log(window);
method();
function method2() {
console.log(name, sex);
}
method2();
sex = “男” 作为局部变量只会在method函数中起作用,如果在method2函数中调用会报错(sex没有定义)
3.4 如何检测数据类型
typeOf | 检测数据类型 |
---|---|
instanceof | 判断数据类型(值类型无法判断,只能判断引用类型) |
3.4.1 typeOf
var a = 1; //number
var b = "abc"; //string
var c = true; //boolean
var d = null; //object
var e = {}; //object
var f = undefined; //undefined
var g = function () {
}; //function
var h = []; //object
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
console.log(typeof f);
console.log(typeof g);
console.log(typeof h);
在console控制器中输出如下:
3.4.2 instanceof
var a = 1; //number
var b = "abc"; //string
var c = true; //boolean
var d = null; //object
var e = {}; //object
var f = undefined; //undefined
var g = function () {
}; //function
var h = []; //object
console.log(g instanceof Function);
console.log(h instanceof Array);
在console控制器中输出如下:
3.5 变量的声明提前
里层变量可以使用外层变量,但是外层变量无法使用里层变量
(打个比方:你可以问你的爷爷爸爸要钱,但是你爷爷爸爸不能问你要钱)
x = 1;
console.log(x);
var y = function () {
console.log(x);
var x = 2;
console.log(x);
}
y();
上述代码可以写成如下代码
x = 1;
console.log(x);
var y = function () {
var x;
console.log(x);
x = 2;
console.log(x);
}
y();
js编译器在执行这个y函数的时候,会把把它y函数里面的声明变量提前到最前面进行声明,此时x作为y函数局部变量并未定义,所以 x=undefined 。
如果我们把 var x = 2; 删除。
x = 1;
console.log(x);
var y = function () {
console.log(x);
console.log(x);
}
y();
变量x在内部它没有进行var声明,它会一直沿着作用域向上找,此时的x 就为全局变量。
再来看下面这个例题:
下面的代码输出 a=10
var a = 1;
function b() {
a = 10;
return;
}
b();
console.log(a);
下面的代码输出 a=1
var a = 1;
function b() {
a = 10;
return;
function a() { }
}
b();
console.log(a);
function a() { }相当于 var a = function(){}。
var a = 1;
function b() {
var a;
a = 10;
return;
var a = function () { };
}
b();
console.log(a);
var a;是在function b()中的局部变量;而全局变量var a = 1;不受影响所以输出的是1。