一、基本介绍
- JavaScript能改变HTML内容,能改变HTML属性,能改变HTML样式(CSS),能完成页面的数据验证
- JS需要运行浏览器来解析执行JavaScript代码
- JavaScript特点
- JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释
- JavaScript是一种基于对象的脚本语言,可以创建对象,也能使用现有的对象
- JavaScript是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程中是可以变化的
- JS代码可以写在script标签中
- type=“text/javascript” 表示这个脚本(script)类型是 javascript
- type=“text/javascript” 可以不写,但是建议写上
- .js 语句可以不写 ; 建议写上
- alert:输出,使用弹框方式
<script type="text/javascript">
var name="js学习";
alert("name="+name);
</script>
- typeof:输出变量的类型
<script type="text/javascript">
var name="js学习";
alert(typeof name)
</script>
- console.log:调试输出
<script type="text/javascript">
var name="JavaScript";
console.log(name);
console.log(typeof name);
</script>
- 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)
二、JavaScript使用方式
方式一
- 可以在head和body中嵌入script
- 执行顺序是从上到下的
- 建议放在head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<script type="text/javascript">
console.log("ok");
</script>
</head>
<body>
<script type="text/javascript">
console.log("hi");
</script>
</body>
</html>
方式二
- 使用script标签引入JS文件
- 方式一和方式二不能混用,如果混用了不会报错,但是只有一种方式生效
<script type="text/javascript" src="引入的 js 文件"></script>
三、JavaScript数据类型
常用的数据类型
- number:数值类型
- string:字符串类型
- 可以双引号括起来,也可以单引号括起来:“abc”、‘abc’
- object:对象类型
- boolean:布尔类型
- function:函数类型
特殊值
- undefined:变量未赋初始值时,默认undefined
- null:空值
- NaN:Not a Number 非数值
<script type="text/javascript">
var apple;
console.log(apple);
var banana = null;
console.log(banana);
console.log(10 * "asd")
</script>
逻辑运算符
-
逻辑运算符用于测定变量或值之间的逻辑
| 运算符 | 描述 |
| — | — |
| && | and |
| || | or |
| ! | not | -
注意细节
- 在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
- 0 、null、 undefined、“”(空串) 都认为是 false
- && 且运算,有两种情况
- 当表达式全为真的时候,返回最后一个表达式的值
- 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
- || 或运算, 有两种情况
- 当表达式全为假时,返回最后一个表达式的值
- 只要有一个表达式为真,就会返回第一个为真的表达式的值
条件运算符
var test= 1>0 ? "学习js":800;
- 如果 (10> 0) 条件表达式为 T, 返回第一个表达式的值
- 条件表达式为 F, 返回第 2 个表达式的值
四、数组
- 数组定义方式1
var test1 = ["123", "456", "789"];
console.log("test1=" + test1);
console.log(test1[1]);
- 方式二
#空数组
var test2 = [];
#添加元素
test2[0] = "123";
test2[1] = "456";
test2[2] = "789";
console.log("test2=" + test2);
console.log("test2[2]=" + test2[2]);
#如果元素不存在,返回的是undefined
console.log("test2[10]=" + test2[10]);
- 方式三
var test3 = new Array("123", "456", "789");
console.log("test3=" + test3);
console.log("test3[0]=" + test3[0]);//Audi
- 方式四
#空数组
var test4 = new Array();
console.log(typeof test4);
test4[0] = "aa";
test4[1] = "bb";
#相当于是给数组扩容
test4[2] = "yy";
#替换
test4[0] = "zz";
数组的遍历
<script type="text/javascript">
//定义一个数组
var cars = ["asd", "qwe", "zxc", 10, 20, true];
//查看数组的长度
console.log(cars.length)
//遍历
for (i = 0; i < cars.length; i++) {
console.log(cars[i]);
}
</script>
五、JavaScript函数
- 函数是由事件驱动的,或者当它被调用时,执行的可重复使用的代码块
- 如果不调用函数,函数不会执行
- js中执行函数有以下两种方式
- 主动调用
<script type="text/javascript">
function hi(){
alert("JavaScript学习");
}
hi()
</script>
- 通过事件去触发该函数
#这里表示给 button 绑定了 onclick 事件,当用户点击了该 button,就会触发 hi() 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function hi(){
alert("JavaScript学习");
}
</script>
</head>
<body>
<button onclick="hi()">点击这里</button>
</body>
</html>
function关键字定义函数
- 基本语法
function 函数名(形参列表){
函数体
return表达式
}
- 定义没有返回值的函数
<script type="text/javascript">
function study(){
alert("study被调用");
}
study()
</script>
- 定义有形参的函数
<script type="text/javascript">
function study(name){
alert("study被调用"+name);
}
study("javascript")
</script>
- 定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据来决定
<script type="text/javascript">
function study(n1, n2) {
return n1 + n2;
}
alert(study(1, 2))
</script>
将函数赋给变量
- 基本语法
var 函数名 = function(形参列表){
函数体
return表达式
}
#示例
<script type="text/javascript">
var f1 = function () {
alert("JavaScript学习"); }
f1();
</script>
六、JavaScript自定义对象
方式一:Object形式
- 基本语法
var 对象名=new Object(); //对象实例(空对象)
对象名.属性名 = function(){}//定义一个函数
#访问对象
对象名.属性
对象名.函数名()
<script type="text/javascript">
var person =new Object();
//增加name属性
person.name="小明";
//增加age属性
person.age=10;
//增加函数
person.say=function (){
console.log(this.name+" "+this.age)
}
//访问方法
person.say()
</script>
方式二:{}形式
- 语法
var 对象名 = {
属性名: 值,//定义属性
函数名: function(){}//定义函数
}
#对象访问
对象名.属性
对象名.函数名();
<script type="text/javascript">
var person={
name:"小明",
age:20,
hi:function (){
console.log(this.name+" "+this.age)
}
}
console.log("外部访问~~~"+person.name+person.age)
person.hi()
</script>
七、事件
- 事件介绍
- 事件时电脑输入设备与页面进行交互的响应
- 事件通常与函数配合使用,这样就可以通过发生的事来驱动函数执行
| 属性 | 当以情况发生时,出现此事件 |
| — | — |
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被一到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被松开 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被锁定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出界面 |
事件分类
- 事件的注册(绑定)
- 事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码,叫事件注册或事件绑定
- 静态事件注册
- 通过HTML标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册
- 动态事件注册
- 通过js代码得到标签的dom对象,然后通过dom对象.事件名=function(){}这种形式叫动态注册
- 动态注册时间步骤
- 1、获取标签—dom对象
- 2、dom 对象.事件名=function(){}
onload加载完成事件
- onload:某个页面或图像被完成加载
- 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function sayOK() {
alert('静态注册onload事件');
} </script>
</head>
<body onload="sayOK()">
</body>
</html>
- 动态注册
- 在js中,将页面窗口映射成Window dom对象
- Window对象有很多的函数和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
alert("动态注册 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
onclick单击事件
- onclick:鼠标点击某个对象
- 静态注册+动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function sayOK(){
alert("sayOK按钮")
}
window.onload = function (){
//动态注册onclick事件
var elementById = document.getElementById("button01");//拿到id="button01"对应的dom对象
elementById.onclick=function (){
alert("sayHI按钮")
}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK 按钮</button>
<button id="button01">sayHi 按钮</button>
</body>
</html>
onblur失去焦点事件
- onblur:元素失去焦点
- 案例:在鼠标离开输入框时,字符变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function upperCase() {
var fname = document.getElementById("fname");
fname.value = fname.value.toUpperCase();
}
window.onload = function () {
var fname2 = document.getElementById("fname2");
fname2.onblur = function () {
fname2.value = fname2.value.toUpperCase();
}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
输入英文单词:
<input type="text" id="fname" onblur="upperCase()"/><br/> 输入英文单词:
<input type="text" id="fname2"/>
</body>
</html>