JS的全称是 JavaScript,是属于HTML和Web的编程语言,运行在浏览器中的脚本语言,对网页行为进行编程,是由浏览器解释执行,能够让网页和用户有交互功能,增加用户体验效果,是web开发者必学的三种语言之一
JavaScript虽然名字带有Java,但实际和java没有半毛钱关系
- HTML:定义网页的内容
- CSS:定义网页样式和布局,让网页变得漂亮、多样化
- JavaScript:对网页行为进行编程,让网页动起来
JavaScript的使用类似于CSS,有三种使用方式: - 行内式
顾名思义,就是在标签内部使用
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title></title>
</head>
<body>
<input type="button" value="你来点我呀!" onclick="alert('哼哼哼,哼哼哼!!!')">
</body>
</html>
执行结果:
点击按钮之后:
- 内嵌式
就是将js代码写到script标签里面,类似于css的style标签,定义在 head标签内部
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title></title>
<script>
alert("哈哈哈,我是小天使")
</script>
</head>
<body>
<input type="button" value="你来点我呀!" onclick="alert('哼哼哼,哼哼哼!!!')">
</body>
</html>
- 外链式
类使用css当中专门定义样式的.css文件, 所有js代码定义在一个专门的.js文件当中,需要的时候直接引入该文件即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title></title>
<script src="js/main.js"></script>
</head>
<body>
<input type="button" value="你来点我呀!" onclick="alert('哼哼哼,哼哼哼!!!')">
</body>
</html>
变量
JavaScript是一种弱类型语言,也就是在定义变量的时候不需要指定数据类型,类型由值来决定
定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾
语法格式:var 变量名 = 值;
变量的定义
var iTest = 231;
var iAbs = 'abs';
同时定义多个变量时,用","隔开,公用一个‘var’关键字
var iNum = 2,sTr='ssds',sCount='a2';
数据类型
5种基本数据类型:
- number 数字类型,该类型的表示方法有两种形式:
- 第一种是整数:可以通过十进制,八进制,十六进制的字面值来表示;
- 第二种为浮点数:该数值中必须包含一个小数点,且小数点后必须有一位数字
var wTest = 123;
var wNum = 23.12;
- string 字符串类型,表示由零或多个16位的Unicode字符组成的字符序列,也就是字符串,用单引号还是双引号,在js中还是没有差别的
var wTest = "as1"
- boolean 布尔类型,该类型有两个值true和false,需要注意的是,true和false是区分大小写的,True和False(以及其它的混合大小形式)都不是布尔类型值,而只是个标识符
var wTest = true
- undefined 类型,只有一个值,即特殊值undefined,也就是在使用var声明变量时未对其加以初始化,这个变量值就是undefined
var unData;
- null类型,表示空对象,是第二个只有一个值的数据类型,其特殊值就是Null,从逻辑角度上看,null是一个空的对象指针,而这也正是使用typeof操作符检测null值,会返回“object”的原因。
如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
var nullData = null;
执行结果:
- object数据类型,称为对象,是一组数据和函数的集合,可以用new操作符后+要创建的对象类型名称创建,也可以用字面量表示法创建。在其中添加不同名(包含空字符串在内的任意字符串)的属性
var oObj = {
name:"隔壁老王",
age:123
}
变量命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
函数的定义
使用关键字 function 定义函数,类似于python当中的def
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title></title>
<script>
// 函数定义
function fuAlert(a,b){
var mMiao = a+b;
alert("我在玩js");
return mMiao;
}
// 函数调用
var c = fuAlert(2,3);
alert(c);
</script>
</head>
<body>
</body>
</html>
执行结果: