目录
[1.使用字面量 创建对象:](#1.使用字面量 创建对象:)
[2.使用new Object()创建对象](#2.使用new Object()创建对象)
[3.使用 构造函数 创建对象](#3.使用 构造函数 创建对象)
一.什么是javaScript
JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.
javaScript和java是不存在任何关系的.
有关javaScript的发展史:
JS和CSS和html的关系:
![](https://i-blog.csdnimg.cn/direct/c7390a83638744ab9eacd3adf2aa49fc.png)
html相当于网页的骨架;
CSS相当于对网页进行填充,修饰
JS是赋予网页特有的功能,行为
二.快速实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("hello");
</script>
</body>
</html>
运行浏览器:
![](https://i-blog.csdnimg.cn/direct/c827391864c54461a0666265a5eec8a5.png)
alert:在弹窗中显示.
三.JS引入方式
1.行内引入:
直接在html标签内使用.
![](https://i-blog.csdnimg.cn/direct/2d758c896e4144f0bfb598f1c74ac35b.png)
点击按钮时,弹窗显示注册成功.
![](https://i-blog.csdnimg.cn/direct/d11f33d6910c479aa572d909e51e34e2.png)
这种方式容易产生大量的冗余代码,不⽅便后期的维护,所以不常⽤.
2.内部引入:
定义script标签,代码写在<script></script>标签中.
<script></script>标签可以放在代码任意位置,一般放在body中.
![](https://i-blog.csdnimg.cn/direct/6e2f5b3290ba4bb99f175ad826821519.png)
⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.
3.外部引入:
定义script标签,通过src属性,引入外部 .js文件.
![](https://i-blog.csdnimg.cn/direct/c912193f645244fbb6d1918089d71293.png)
外部样式,html和js实现了完全的分离,企业开发常⽤⽅式
四.基础语法
1.变量
创建变量/声明变量/变量初始化:
**var 变量名=内容;**或 len 变量名=内容;
这两个用法差不多相同,具体区别暂不讨论.
const 变量名=内容;
通过const创建的变量,初始化后,内容不能修改.
JS是一门动态若类型的语言:
动态:变量可以存放不同类型的值:
![](https://i-blog.csdnimg.cn/direct/bbeb2918071d498c99a1258fd5ece29b.png)
弱类型:随着程序的执行,变量中值的类型可以变化:
![](https://i-blog.csdnimg.cn/direct/2c525b841d6a4a28a5eff56d1fe3bca9.png)
变量命名规则:
1.变量名的组成字符可以是数字,字母,下划线_,美元符$
2.数字不能开头.
3.建议使用驼峰命名法.
2.数据类型
虽然js是弱数据类型的语⾔,但是js中也存在数据类型,js中的数据类型分为:原始类型 和 引⽤类 型,具体有如下类型
|-----------|------------------------------|
| 数据类型 | 描述 |
| number | 数字,不区分整数和小数 |
| string | 字符串 字符串字⾯值需要使⽤引号引起来,单引号双引号均可 |
| boolean | 布尔类型,true为真,false为假 |
| undefined | 表示变量未初始化,只有唯⼀的值 undefined |
使⽤typeof函数可以返回变量的数据类型,通过浏览器的控制台查看.
![](https://i-blog.csdnimg.cn/direct/f2cdd6eb809f4f96b5c7c6995b89d946.png)
![](https://i-blog.csdnimg.cn/direct/b60b54c16b88444e9ca6eb733e5dee14.png)
3.运算符
JS中的运算符和java中的用法基本相同
![](https://i-blog.csdnimg.cn/direct/11c86f976d28433b90d0f6b6ce5fae9d.png)
![](https://i-blog.csdnimg.cn/direct/f5e9bffa4611453c8e392d64455343ad.png)
==和===的区别:
==仅用于判断内容是否相等;
===判断时 包含类型的判断.
五.JS对象
1.数组
创建数组:
1.使用new关键字创建数组:
var a = new Array();
![](https://i-blog.csdnimg.cn/direct/f1983adad1cd453f83870bf0c9b4e3ab.png)
2.使用字面常量创建数组:
![](https://i-blog.csdnimg.cn/direct/188627d7d07940659d7856f0f43e42e2.png)
数组中的内容称为元素.
JS中的数组元素不要求类型相同.
2.操作数组
1>.读:
通过数组下标的方式访问数组元素.
2>.增
通过数组下标新增元素,或者通过push追加元素.
![](https://i-blog.csdnimg.cn/direct/31830140e46249c9a08d78c4421d63f9.png)
![](https://i-blog.csdnimg.cn/direct/d174503d8e4340f79292110bb7c8e72b.png)
可以进行隔空追加,对指定1数组下标追加.
3>.改
通过数组下标修改数组元素,
![](https://i-blog.csdnimg.cn/direct/e39b20b059304b63b9efa8e8c19cf4c6.png)
控制台输出结果:
![](https://i-blog.csdnimg.cn/direct/84adbc4228884b4b84a19698e140ad52.png)
注意
-
如果下标超出范围读取元素,则结果为undefined
-
不要给数组名直接赋值,此时数组中的所有元素都没了.
3.函数
语法格式:
function 函数名(形参列表){
函数体;
return 返回值;
}
函数调用:
函数名(实参列表);//无返回值
var 返回值 = 函数名(实参列表);//有返回值
![](https://i-blog.csdnimg.cn/direct/233f94029f5745da974a35b029d420bf.png)
函数注意事项:
函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.
调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.
函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)
函数参数:
形参个数和实参个数可以不匹配,但是实际开发⼀般要求形参和实参个数要匹配.
-
如果实参个数⽐形参个数多,则多出的参数不参与函数运算
-
如果实参个数⽐形参个数少,则此时多出来的形参值为 undefined
函数表达式:
var 变量名 = function(){
函数体;
return 返回值;
}
![](https://i-blog.csdnimg.cn/direct/bd81f8523ecf4247931cfc44b14a0abe.png)
此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表 ⽰. 后⾯就可以通过这个 add 变量来调⽤函数了.
4.对象
js中的 数值,字符串,布尔值,数组,函数都是对象,每个对象中包含若干个属性和方法.
属性:对象的特征,
方法:对象的行为.
1.使用字面量 创建对象:
使⽤ { }创建对象
• 属性和⽅法使⽤键值对的形式来组织.
• 键值对之间使⽤ , 分割.最后⼀个属性后⾯的,可有可⽆
• 键和值之间使⽤ : 分割.
• ⽅法的值是⼀个匿名函数.
![](https://i-blog.csdnimg.cn/direct/de66a773e3384e1b902adfa9c740746b.png)
使用对象的属性和方法:
![](https://i-blog.csdnimg.cn/direct/fe08fc6d783c43abad06065334a15f40.png)
2.使用new Object()创建对象
这种创建对象方法和创建数组方法类似.
![](https://i-blog.csdnimg.cn/direct/30b727607737436a9ce29e519ee769dc.png)
3.使用 构造函数 创建对象
语法:
function 构造函数名(参数列表){
this.属性名=值;
this.方法名=function(){}
.....
}
调用:
var 变量名= new 构造函数名(实参列表);
![](https://i-blog.csdnimg.cn/direct/b8cae3c6f3e64b0c81cbfb775ffc1f16.png)
注意:
• 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.
• 构造函数的函数名⾸字⺟⼀般是⼤写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要 return
• 创建对象的时候必须使⽤ new 关键字.