前端——JS
目录
什么是JS？
JS引入方式
JS基础语法
输出语句
变量
常量
数据类型
函数
自定义对象
什么是JS？
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
-
组成：
-
ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
-
BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
-
DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
-
JS引入方式
内部脚本：将JS代码定义在HTML页面中
- 在HTML文档中，可以在任意地方，放置任意数量的<scipt>
- 一般吧脚本置于<body>元素的底部，可以改善显示速度。
<body>
<script>
alert('Hello JS')
</script>
</body>第二种方式：
-
外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
-
外部JS文件中，只包含JS代码，不包含<script>标签
-
引入外部js的<script>标签，必须是双标签
-
-
JS书写规范：
-
结束符：每行js代码，结尾以分号结尾，而结尾的分号可有可无。（建议在一个项目中保持一致，要么全部都加，要么全部都不加）
-
注释：单行注释，多行注解的写法， 与java中一致。
-
JS基础语法
输出语句
在JS中有3种输出语句，分别是：
| api | 描述 |
| window.alert(...) | 警告框 |
| document.write(...) | 在HTML 输出内容 |
| console.log(...) | 写入浏览器控制台 |
<body>
<script>
//方式一: 写入浏览器的body区域
document.write("Hello JS (document.write)");
//方式二: 弹出框
window.alert("Hello JS (window.alert)");
//方式三: 控制台
console.log("Hello JS (console.log)")
</script>
</body>变量
<script>
//变量
let a = 20;
a = "Hello";
alert(a);
</script>上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。 因为JS是弱类型语言。
常量
在JS中，如果声明一个场景，需要使用const关键字。一旦声明，常量的值就不能改变 （不可以重新赋值）。
如下所示：
<script>
//常量
const PI = 3.14;
alert(PI);
</script>数据类型
虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为 ：原始数据类型 和 引用数据类型。原始数据类型主要包含以下几种类型：
| 数据类型 | 描述 |
| number | 数字（整数、小数、NaN(Not a Number)） |
| string | 字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号 |
| boolean | 布尔。true，false |
| null | 对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的 |
| undefined | 当声明的变量未初始化时，该变量的默认值是 undefined |
使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型。
<script>
//原始数据类型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello');//string
alert(typeof true); //boolean
alert(typeof false);//boolean
alert(typeof null); //object
var a ;
alert(typeof a); //undefined
</script>函数
方式一：
function 函数名(参数1,参数2..){
要执行的代码
}因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：
-
形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
-
返回值也不需要声明类型，直接return即可
示例：
function add(a, b){
return a + b;
}如果要调用上述的函数add，可以使用：函数名称(实际参数列表)
let result = add(10,20);
alert(result);方式二：
也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。
匿名函数：是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。
匿名函数定义可以通过两种方式：函数表达式 和 箭头函数。
示例一：函数表达式
var add = function (a,b){
return a + b;
}示例二：箭头函数
var add = (a,b) => {
return a + b;
}上述匿名函数声明好了之后，是将这个函数赋值给了add变量。 那我们就可以直接通过add函数直接调用，调用代码如下：
let result = add(10,20);
alert(result);自定义对象
let 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
方法名称: function(形参列表){}
};<script>
//自定义对象
let user = {
name: "Tom",
age: 10,
gender: "男",
/*sing: function(){
console.log("悠悠的唱着最炫的民族风~");
}*/
sing(){
console.log("悠悠的唱着最炫的民族风~");
}
}
console.log(user.name);
user.eat();
<script>