JavaScript入门基础
- 概述
-
- 变量的声明
- 变量的作用域
- 基本数据类型
-
- Number类型
- String类型
- Boolean类型
- Undefined类型
- Null类型
- 三大引用类型
-
- Object类型
- Array类型
- Function类型
- typeof 操作符
- js编写的位置
- js的三种输出方式
概述
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';
变量的作用域
JavaScript没有块级作用域
java：
if(true) {
int a = 1;
}
System.out.println(a); // 编译错误，超出作用域
javascript：
if(true){
var a = 1;
}
console.log(a); // 输出1 ，JavaScript没有块级作用域
基本数据类型
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;
第二种方式是使用对象字面量表示法，如下所示
var person = {
name : "Micheal",
age : 24
};
alert(person.name);
Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象…另外，数组的大小是可以动态调整的。
创建数组的基本方式有两种
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
Function类型
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){
return num1 + num2;
};
这和使用函数表达式定义函数的方式相差无几。
var sum = function (num1,num2){
return num1 + num2;
};
var result = sum(5,8); alert(result);
typeof 操作符
由于js中的变量是弱类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字。
typeof 123 //Number
typeof 'abc' //String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
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>
效果动态图：
js的三种输出方式
alert("Hello JavaScript");
document.write("牛哄哄的柯南");
console.log("Keafmd");
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script> alert("Hello JavaScript"); document.write("牛哄哄的柯南"); console.log("Keafmd"); </script>
</body>
</html>
效果截图：
浏览器弹出一个提示框↓
浏览器在页面中输出一个内容↓
向控制台输出一个内容↓
控制台调出步骤：网页右键-检查-选择Console
写作不易，如果看完对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
