JavaScript入门基础
概述
JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，JavaScript已经从单纯实现前端互动，发展到可以全栈实现整个应用。尤其是在移动互联网蓬勃发展以及应用追求极致用户体验的今天，JavaScript更是必须要重视和掌握的。
变量的声明
使用var关键字进行变量的声明，声明的同时也可以进行赋值。变量的声明只能有一次，但赋值可以有多次。如果只声明变量，但是变量没有被赋值，此时变量的值为undefined。
JavaScript变量的类型取决于右侧的对象。
样例代码：
var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';
- 1
- 2
- 3
- 4
变量的作用域
JavaScript没有块级作用域
java：
if(true) { int a = 1;
}
System.out.println(a); // 编译错误，超出作用域
- 1
- 2
- 3
- 4
javascript：
if(true){ var a = 1;
}
console.log(a); // 输出1 ，JavaScript没有块级作用域
- 1
- 2
- 3
- 4
基本数据类型
Number类型
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
String类型
单引号或双引号扩起来的字符集合。
Boolean类型
该类型只有两个值，true和false。
Undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。
Null类型
Null类型被看做空对象指针，Null类型也是空的对象引用。
三大引用类型
Object类型
我们看到的大多数类型值都是Object类型的实例，创建Object实例的方式有两种。
第一种是使用new操作符后跟Object构造函数，如下所示
var person = new Object();
person.name = "Micheal";
person.age = 24;
- 1
- 2
- 3
- 4
- 5
第二种方式是使用对象字面量表示法，如下所示
var person = { name : "Micheal", age : 24
};
alert(person.name);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象…另外，数组的大小是可以动态调整的。
创建数组的基本方式有两种
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
- 1
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
- 1
Function类型
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){ return num1 + num2;
};
- 1
- 2
- 3
- 4
- 5
这和使用函数表达式定义函数的方式相差无几。
var sum = function (num1,num2){
return num1 + num2;
};
var result = sum(5,8); alert(result);
- 1
- 2
- 3
- 4
- 5
typeof 操作符
由于js中的变量是弱类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字。
typeof 123 //Number
typeof 'abc' //String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
js编写的位置
1.将JS代码编写到script标签中：
<script > 写这里</script>
2.还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件
3.可以将JS代码编写到标签的指定属性中（不推荐使用）
样例代码：
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <!--可以将JS代码编写到script标签中--> <!--<script type="text/javascript"> alert("hello"); </script>--> <!-- 还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件 将JS代码编写到外部文件中，可以在不同的页面中引入相同的JS代码， 方便后期的维护，并且写在外部文件中可以使用浏览器的缓存，加快访问速度提高用户体验 如果使用script来引入外部文件，则它就不能在编写任何的JS代码了 ， 如果还需要编写则需要创建一个新的script标签 --> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript"> alert("我是内部的JS代码"); </script> </head> <body> <!-- 将JS代码编写到标签的属性中，属于结构与行为耦合，不方便后期的维护，不推荐使用 --> <!-- 可以将JS代码编写到标签的指定属性中 --> <button onclick="alert('点完的效果');">点这里</button> <!-- 可以将JS代码编写到超链接的href中 --> <a href="javascript:alert('第二个效果');">再点这里</a> <br /><br /> </body>
</html>
- 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
效果动态图：
js的三种输出方式
/* 控制浏览器弹出一个提示框 */
alert("Hello JavaScript"); /* 控制浏览器在页面中输出一个内容 document.write()向body中写一个内容 */
document.write("牛哄哄的柯南"); /* 向控制台输出一个内容 */
console.log("Keafmd");
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script> /* 控制浏览器弹出一个提示框 */ alert("Hello JavaScript"); /* 控制浏览器在页面中输出一个内容 document.write()向body中写一个内容 */ document.write("牛哄哄的柯南"); /* 向控制台输出一个内容 */ console.log("Keafmd");
</script>
</body>
</html>
- 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
效果截图：
浏览器弹出一个提示框↓
浏览器在页面中输出一个内容↓
向控制台输出一个内容↓
控制台调出步骤：网页右键-检查-选择Console
写作不易，如果看完对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。
原文链接：keafmd.blog.csdn.net/article/details/109539668
- 点赞
- 收藏
- 关注作者
评论（0）