1、什么是 js
JS: JavaScript -> java 脚本语言
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
JS的特点:
- 基于客户端浏览器 : js的运行环境是浏览器,无需下载任何jar和插件,浏览器自带对js运行环境的支持
- 面向(基于)对象 : js是面向对象的语言 , 我们开发中对js代码的使用 对象.属性 对象.方法()
- 事件驱动式 : js是基于事件实现大多数功能的, 什么叫做事件,事件类似于css中的伪类的概念
- 脚本语言 : 脚本语言无需编译,可以直接被解释执行,所以源代码可以直接看到
2、js与用户的交互方式
交互方式:
1.警示框
语法:alert(message)
作用:弹出一个警示框,并给出提示信息
2.对话输入框
语法:result prompt(messsge , value)
message:提示信息
value:输入框的默认值
result:返回值,就是用户在输入框输入的内容
注意:
1) 返回值是字符串,如果需要其他数据类型,需要强制类型转换
3) 函数定义了两个输入参数,但是根据需要传入需要的实参,不用的参数可以不传参
3.控制台输入(打印输出语句)
语法:console.log(msg)
作用:在控制台输出信息(可以是字符串,也可以是其他数据类型,包括对象)
注意:该方法一般用于调试程序
4.页面输出(在浏览器网页上打印)
语法:document.write(markup)
作用:向浏览器页面输出内容
注意:主要用于输出html代码字符串
上面将的交互方式都是函数(方法),在面向对象语言中方法一定属于某个对象,正确的调用方式是对象.方法()
在调用alert()或者prompt()函数的时候没有指定对象,是因为这些函数属于window对象
在js中,window对象方法成员可以省略window 类似于window.alert() --> alert()
3、js的组成
js的内容由3部分组成:
- ECMAScript : 语法部分,类似于javaSE数组之前的内容,所以最近规范叫做ES6->ECMAScript 6
- DOM : document object model 文档对象模型 , 让我们使用js代码去操作页面元素,实现动态添加,删除,修改,获取页面元素
- BOM : 浏览器对象模型 , 让我们使用js代码去操作浏览器,上一页,下一页,修改地址栏直接访问页面,刷新页面等等
4、变量
学习一门语言,首先学习语法
语法中学习顺序: 变量 -> 数据类型 ->运算符 ->流程控制语句 ->对象
变量: 内存中划定一块区域,保存值,值可以变化,用来表示这块内存的量就是变量
4.1、JavaScript 的变量类型
- 数值类型: number
(包含了java中的整数以及浮点数) 此类型用来表示整数和浮点数(小数)值。
比如: 数字 10、10.01、100 、 -100 等等都是
注意: 数值型除了常见的值之外还有一个特殊的值:NaN - 字符串类型: string
(字符串和字符) 此类型用来表示字符串。字符串可以由单引号(')或双引号(")表示 - 对象类型: object
- 布尔类型: boolean
- 函数类型: function
判断数据类型的方式: typeof 运算符
4.2、JavaScript 里特殊的值
undefined 未定义,所有js变量未赋于初始值的时候,默认值都是undefined
null 空值
NAN 全称是:Not a Number。 非数字。非数值。
4.3、JS中定义变量格式
语法:
1. java 声明变量 : 数据类型 变量名 = 初始化值;
2.js 声明变量: var 变量名 = 初始化值;
注意:
- 变量可以声明的时候直接进行初始化,也可以先只声明,在使用前进行初始化
- 如果变量没有初始化,可以访问值,值是undefined(undefined:只声明没有初始化的状态)
- js是弱类型语言,变量声明的时候无需指定数据类型,但是赋值的时候可以指定不同数据类型的值
原因: java声明变量的时候必须指定数据类型,js声明变量的时候,所有数据类型的内存大小都是2个字节 - 变量声明的时候没有指定数据类型,变量的数据类型一直在变化,所以数据类型就是最后一次赋值,值的类型
总结: java中变量一旦声明,值可以变化但是数据类型不可变,js中变量值和数据类型都是可变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
// alert(i); //undefined
i=12;
// typeof()是JavaScript语言提供的一个函数
// 它可以取变量的数据类型返回
// alert(typeof(i)); //number
i="abc";
// alert(typeof (i)); //string
var a = 12;
var b ="abc";
alert(a*b); //NAN 非数字。非数值。
</script>
</head>
<body>
</body>
</html>
5、关系(比较)运算
等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert(a==b); // true
alert(a===b); // false
</script>
</head>
<body>
</body>
</html>
6、逻辑运算
且运算: &&
或运算: ||
取反运算: !
在JavaScript 语言中,所有的变量,都可以作为一个boolean类型的变量去使用。
0、null、undefined、""(空串)都认为是false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = 0;
if (a){
alert("0为真")
}else {
alert("0为假")
}
var b = null;
if (b){
alert("null为真")
}else {
alert("null为假")
}
var c = undefined;
if (c){
alert("undefined为真")
}else {
alert("undefined为假")
}
var d = "";
if (d){
alert("空串为真")
}else {
alert("空串为假")
}
//以上结果全部为假
/*
&& 且运算。
有两种情况: 第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
*/
var a = "abc";
var b = true;
var d = false;
var c = null;
alert(a && b) // true
alert(b && a) // true
alert(a && d) // false
alert(a && c) // null
alert(a && d && c) //false
/* || 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
*/
alert(d || c) // null
alert(c || d) //false
alert(a || c) // abc
</script>
</head>
<body>
</body>
</html>
7、数组(重点)
7.1、数组定义方式
JS 中 数组的定义
格式:
var 数组名 = [] // 空数组
var 数组名 = [1,‘abc’,true]; // 定义数组同时赋值元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert(arr.length) // 0
arr[0] = 12;
// alert(arr[0]) //12
// alert(arr.length) // 1
//JavaScript中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length) // 3
// alert(arr[1]) // undefined
for (var i = 0;i<arr.length;i++){
// 数组的遍历
alert(arr[i])
}
</script>
</head>
<body>
</body>
</html>
8、函数(重点)
8.1、函数的两种定义方式
- 第一种,可以使用function关键字来定义函数
使用的格式:
function 函数名(形参列表){
函数体
}
在JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义一个无参函数
function fun(){
alert("无参函数fun()被调用了")
}
//函数调用,才会执行
fun()
//定义一个有参函数
function fun2(a,b){
alert("有参函数fun2()被调用了"+"a="+a+" b="+b)
} fun2(12,"abc")
//带有返回值的函数
function sum(sum1,sum2){
var result = sum1+sum2;
return result;
}
alert(sum(130,20))
</script>
</head>
<body>
</body>
</html>
- 第二种定义方式
使用格式:
var 函数名 = function(形参列表){
函数体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function (){
alert("无参函数")
} fun()
var fun2 = function (