一、JavaScript的起源
在1995年时,由NetScape公司在网景导航者浏览器上首次设计实现而成。NetScape在最初将其脚本语言命名为LiveScript,因为NetScape和SUN公司合作,网景公司管理层希望蹭Java的热度,因此取名为JavaScript。
JavaScript共分成三部分:
- ECMAScript(基本语法)
- BOM(浏览器对象模型)
- DOM(文档对象模型)
二、JavaScript的特性
2.1 脚本语言
JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行,JavaScript不会产生编译出来的字节码文件,而是在程序的运行过程中对源文件逐行进行解释。
2.2 基于对象
JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是面向对象的三大特性:封装、继承、多态中,JavaScript能够实现封装,可以模拟继承,不支持多态,所以它不是一门面向对象的编程语言。
2.3 弱类型
JavaScript中也有明确的数据类型,但是声明一个变量后它可以接收任何类型的数据,并且会在程序执行过程中根据上下文自动转换类型。
2.4 事件驱动
JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
2.5 跨平台性
JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。
三、JavaScript的基本语法
3.1 JavaScript的引入方式
3.1.1 内部脚本方式
- JavaScript代码要写在script标签内
- script标签可以写在文档内的任意位置
- 为了能够方便查询或操作HTML标签(元素)script标签可以写在body标签后面
3.1.2 外部脚本方式
在script标签内通过src属性指定外部xxx.js文件的路径即可。
- 引用外部JavaScript文件的script标签里面不能写JavaScript代码
- 先引入,再使用
- script标签不能写成单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的引入方式</title>
<!--
建议在header中引入外部的js文件
-->
<script src="../js/outer.js"></script>
</head>
<body>
<!--
第一种引入方式:内部引入方式,在HTML文档内部。通过script标签去编写js代码
-->
<script type="text/javascript">
alert("hello world")
</script>
<!--
第二种引入方式:外部引入方式,在当前项目中创建一个js文件,然后在需要引入的HTML里面使用script标签引入
-->
<script type="text/javascript">
showMessage()
</script>
</body>
</html>
3.2 声明和使用变量
3.2.1 JavaScript数据类型
基本数据类型
- 数值型number:JavaScript不区分整数、小数
- 字符串string:JavaScript不区分字符、字符串;单引号、双引号意思一样。
- 布尔型boolean:true、false
在JavaScript中,其他类型和布尔类型的自动转换。
- true:非零的数值,非空字符串,非空对象
- false:零,空字符串,null,undefined
引用数据类型
- 所有new出来的对象
- 用[]声明的数组
- 用{}声明的对象
3.2.2 变量
- 关键字:var,其实ECMAScript6之后建议使用let
- 数据类型:JavaScript变量是弱类型的,可以接收任意类型的数据
- 标识符:严格区分大小写
- 变量使用规则:如果使用了一个没有声明的变量,那么会在运行时报错;如果声明了一个变量没有初始化,那么这个变量的值为undefined。
3.3 函数
3.3.1 内置函数
内置函数就是JavaScript中内置好的函数,可以直接使用。
弹出警告框
// 弹出警告框:alert()
alert("警告一下!")
弹出确认框
//弹出确认框:confirm(),可以让用户选择确定或者取消,选择确定就返回true,否则就返回false。
var flag = confirm("你确定要删除吗?")
alert(flag)
在控制台打印日志
//在控制台输出日志:console.log()
console.log("我是一条日志.....")
3.3.2 声明函数
声明函数就是使用者自己定义一个函数,有两种写法:
写法1:命名函数
function showMessage(message) {
console.log(message)
}
写法2:匿名函数
var sum = function (a,b) {
console.log("求"+a+"和"+b+"的和")
return a+b
}
声明一个函数,相当于创建了一个函数对象,将这个对象的引用赋值给变量total。如果不给这个对象赋值,可以将其作为匿名函数使用。
3.3.3 调用函数
JavaScript中函数本身就是一种对象,函数名就是这个对象的引用。而调用函数的格式是:函数引用()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明和创建函数</title>
</head>
<body>
<script>
//声明函数的两种方式:
// 1. 命名函数(普通函数)
//JS中声明函数的特点:
// 1. 没有返回值类型
// 2. 没有参数
function showMessage(message) {
console.log(message)
}
// 2. 匿名函数:声明函数的时候不取名字
var sum = function (a,b) {
console.log("求"+a+"和"+b+"的和")
return a+b
}
// 调用函数,通过函数名调用即可
showMessage("你好啊")
// JS的函数,在声明时和调用时的参数个数可以不一致,所以在JS里面没有方法重载的概念。
// 如果出现同名函数以后面的为准
var total = sum(1,2)
console.log(total)
</script>
</body>
</html>
3.4 对象
JavaScript中没有类的概念,对于系统内置的对象可以直接创建使用。
3.4.1 使用new关键字创建对象
// 在JS中使用new的方式创建对象
var obj1 = new Object()
// 给对象的属性赋值
obj1.age=10
obj1.name="jay"
obj1.address = "中国台湾省台北市"
console.log(obj1.name)
3.4.2 使用{}创建对象(常用)
// 在JS中使用{}的方式创建对象
var obj2 = {
"name":"张飞",
"age":30,
"address":"蜀国",
}
console.log(obj2.name)
3.4.3 给对象设置函数属性
// 在JS中使用{}的方式创建对象
var obj2 = {
"name":"张飞",
"age":30,
"address":"蜀国",
"showMessage":function (message) {
console.log(message)
}
}
console.log(obj2.name)
obj2.showMessage(obj2.name)
3.4.4 this关键字
this关键字只有两种情况:
- 在函数外面:this关键字指向window对象(代表当前浏览器窗口)
- 在函数里面:this关键字指向调用函数的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this的介绍</title>
</head>
<body>
<script>
var name = "刘备"
this.name = "刘皇叔"
function showName() {
console.log(this.name)
}
var obj1 = {
"name":"张飞",
"showName":function () {
console.log(this.name)
}
}
showName()
obj1.showName()
</script>
</body>
</html>
3.5 数组
3.5.1 使用new关键字创建数组
// 创建数组对象
var array = new Array();
3.5.2 使用[]创建数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的数组</title>
</head>
<body>
<script>
// 1. 创建一个数组,JS中的数组长度不是固定的,并且存放的数据类型也不是固定的。
var arr = [1,2,3,"马超","赵云"]
arr[5] = "黄忠"
// reverse方法是将数组中的内容进行反转
// arr.reverse()
// join方法是将数组中的元素通过分隔符拼接成一个字符串
var str = arr.join("&");
console.log(str)
// split方法是将字符串通过分隔符拆分成数组
var strings = str.split("&");
// pop方法是弹出数组中的最后一个元素
console.log(strings.pop())
// 2.对于数组而言最重要的就是遍历
for ( i = 0; i <strings.length ; i++) {
console.log(arr[i])
}
</script>
</body>
</html>
3.6 JSON
3.6.1 JSON格式的用途
在开发中涉及到跨平台数据传输,JSON格式是首选。
3.6.2 JSON格式的说明
JSON数据两端要么是{}
,要么是[]
。
- {}定义JSON对象
- []定义JSON数组
- JSON对象的格式是:
{key:value,key:value}
- JSON数组的格式是:
[{key:value,key:value},{key:value,key:value}]
- key的类型固定是字符串类型
- value的类型可以是基本数据类型,也可以是引用类型(JSON对象或JSON数组)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON的介绍</title>
</head>
<body>
<script>
// json的格式:{key:value,key:value}
var person = {
"name":"关羽",
"age":18,
"address":"蜀国"
}
var person2 = {
"name":"关羽",
"age":18,
"address":"蜀国",
"child":{
"name":"关凤",
"age":1,
"address":"蜀国"
}
}
console.log(person2.child.name)
// json数组的格式:[{key:value,key:value},{key:value,key:value}]
var person3 = {
"name":"关羽",
"age":18,
"address":"蜀国",
"child":[
{
"name":"关凤",
"age":1,
"address":"蜀国"
},
{
"name":"关平",
"age":2,
"address":"蜀国"
}
]
}
</script>
</body>
</html>
3.6.3 JSON对象和JSON字符串互转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON转换</title>
</head>
<body>
<script>
var person = {
"name":"刘备",
"age":18,
"address":"蜀国"
}
// person对于js而言是一个对象
// 将JSON字符串转成字符串
var str = JSON.stringify(person);
console.log(str)
// 假设str是服务器传输到客户端的,在拿到json字符串之后,需要将其转成JSON对象才能解析出数据
var p = JSON.parse(str);
console.log(p.name)
</script>
</body>
</html>