第四章 javascript脚本
4.1 简介
- 是一种脚本语言，可以提高网页的互动性
- 脚本是浏览器加载并且执行的
- 可以把js文件压缩使浏览器加载的效率提高
- javascript区别java
- 脚本运行在浏览器
- java运行在后端(服务器)
4.2 案例
事件：
οnclick="单击"
οnblur="焦点丢失"
οnkeypress="任意键"
4.2.1 弹出框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
head>
<body>
<script>
function fun_name(){ //这是有一个函数，就是方法：功能
var params = 'hello'
var params1 = "world"
//输出
alert(params)
}
script>
<div align="center">
<button id="btn" onclick="fun_name()">按钮button>
div>
body>
html>
4.2.2 写到网页
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
head>
<body>
<script>
function fun_name(){ //这是有一个函数，就是方法：功能
var params = 'hello'
var params1 = "world"
//输出
document.write(params1)
}
script>
<div align="center">
<button id="btn" onclick="fun_name()">按钮button>
div>
body>
html>
- 案例：通过组件的id获取对应的值value
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
head>
<body>
<script>
function fun_name(){ //这是有一个函数，就是方法：功能
//获取控件
var num = document.getElementById('num1')
//获取值
var data = num.value
console.log('控制台',data)
}
script>
<div align="center">
<input type="number" id="num1">
<button id="btn" onclick="fun_name()">按钮button>
div>
body>
html>
- 类型转换
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
head>
<body>
<script>
function fun_name(){ //这是有一个函数，就是方法：功能
//获取控件的值
var num1 = document.getElementById('num1').value
var num2 = document.getElementById('num2').value
/*
转换类型
赋值到对应的控件中
*/
var data = parseInt(num1)+parseInt(num2)
document.getElementById('num3').value = data
}
script>
<div align="center">
<input type="number" id="num1">+
<input type="number" id="num2">=
<input type="number" id="num3"><br>
<button id="btn" onclick="fun_name()">按钮button>
div>
body>
html>
4.3 提示函数
4.3.1 可以把脚本编写在
- 控件中：
<button id="btn" onclick="confirm('删除？')">按钮button>
-
网页中
-
文件中(推荐)
- js文件
function del(){ if(confirm('删除吗?')){ alert('删除') }else{ alert('不删除') } }- 页面需要引入
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录title> <script src="js/one.js">script> head> <body> <div align="center"> <button id="btn" onclick="del()">按钮button> div> body> html>4.4 脚本的语法
4.4.1 标识符：
数字、字母、下划线、＄ 数字不能开头 区分大小写 不能使用关键字4.4.2 保留字和关键字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZayAAHQM-1665385831785)(images/image-20220817094602705.png)]
4.3.2 注释
- 单行： //
- 多行: /* */
4.3.3 数据类型
- 整型常量，可以使用10进制，16进制，8进制，如:10进制12345
- 实型常量，如：123.45，也可以使用科学计数法
- 布尔常量，取值为true和false 字符串常量，
- 字符串常量可以采用双引号“”或单引号，如：”Hello World”
- null常量，表示变量指向的对象为空
- undefined，表示变量没有赋值或此变量不存在
<script>
function abc(){
var params;
alert(params)
}
script>
4.3.4 声明变量
使用var声明，可以跨域(语句块)
4.3.5 函数
4.3.5.1 声明函数：function
4.3.5.2 不含参数的
4.3.5.3 含参数的
4.3.5.4 含参数返回值
- js文件
function fun1(){
alert('无参数')
}
function fun2(obj1,obj2,obj3){
document.write(obj1)
}
function fun3(obj1,obj2){
return parseFloat(obj1)+parseFloat(obj2)
}
- 测试网页
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var a = document.getElementById('a').value
var b = document.getElementById('b').value
//调用函数
var result = fun3(a,b)
//输出
alert(result)
}
script>
head>
<body>
<div align="center">
<input type="number" id="a">+<input type="number" id="b">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.5.5 系统函数eval
-
可以把字符串转换对象
-
json格式的字符串：
- json格式
//单行 {"id":"1001","name":"leo","age":"11"} //多行 [ {name:"leo",sex:"boy",age:11}, {name:"alice",sex:"gril",age:12}, {name:"tony",sex:"man",age:35} ] -
案例：转为对象使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var jsonStr = '{"id":"1001","name":"leo","age":"11"}'
//把这个字符串转object
var data = eval("("+jsonStr+")")
alert(data.name)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
- 数组格式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var jsonStr = '[{name:"leo",sex:"boy",age:11},'+
' {name:"alice",sex:"gril",age:12},'+
' {name:"tony",sex:"man",age:35}]'
//把这个字符串转object
var data = eval("("+jsonStr+")")
//循环获取
for(var index=0;index<data.length;index++){
alert(data[index].name)
}
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.6 运算符
- 算术运算符（+、-、、/、++、–、%）
- 赋值运算符（=、+=、-=、=、 /=、%=）
- 比较运算符（>、<、>=、<=、、=）
- 逻辑运算符（&&、||、!）
- 位运算符
4.3.6.1 算术运算符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var total = 20
var pageSize = 7
var pageNo = 1
var pages = 1
//分页处理
if(parseInt(total)%parseInt(pageSize)==0){
pages = parseInt(parseInt(total)/parseInt(pageSize))
}else{
pages = parseInt(parseInt(total)/parseInt(pageSize)+1)
}
alert('总页数='+pages)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.6.2 赋值运算符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var i = 10
i += 10 //相当于 i=i+10
alert(i)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.6.3 比较运算符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var i = 10
var n = '10'
//比较值
alert(i==n)
//绝对相等：及比较类型也比较值
alert(i===n)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.6.4 逻辑运算符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
if(1>0 && 2>3){
alert('短路与')
}
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.3.7 循环
- for
<script>
function abc(){
for(var i=0;i<4;i++){
}
}
script>
- while
- do-while
<script>
function abc(){
var i = 0
while(i<3){
i++
}
//-------------
do{
i++
}while(i<3)
}
script>
4.4 自定义对象
4.4.1 类
//创建类
function Person(){}
//创建对象
var person = $ = new Person()
- 测试
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
//创建对象
var person = new Person()
person.name = 'leo'//属性
person.age = 11
//输出
document.write(person.name)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.4.2 通过内置对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
//创建对象
var person = new Object()
person.name = 'leo'//属性
person.age = 11
//输出
document.write(person.name)
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.4.3 字符串类型
- 函数
<script>
function abc(){
//字符串参数
var str = 'helloe'
var ch = str.charAt(1)
//alert(ch)
//获取指定位置的下标值
var index = str.indexOf('e')
var lastIndex = str.lastIndexOf('e')
document.write(index+';'+lastIndex)
}
script>
- 函数
<script>
function abc(){
//字符串参数
var str = 'java,spring,mysql,hbase,kafka'
//拆分
var arr = str.split(',')
//循环
for(var index=0;index<arr.length;index++){
document.write(arr[index]+'
')
}
}
script>
- 函数
<script>
function abc(){
//字符串参数
var str = 'java.txt'
//获取下标
var index = str.lastIndexOf(".")
//截取
var fix = str.substring(index)
var fileName = "abc"
fileName += fix
//转换大小写
alert(fileName.toUpperCase())
alert(fileName.toLowerCase())
}
script>
4.4.4 Math对象
<script>
function abc(){
for(var n=0;n<4;n++){
var i = Math.random()
document.write(i+'
')
}
}
script>
4.5 数组类型
4.5.1 一维数组
<script>
function abc(){
var arr = [1,2,3,4,5]
//遍历
for(var index=0;index<arr.length;index++){
console.log(arr[index])
}
}
script>
4.5.2 二维数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录title>
<script src="js/one.js">script>
<script>
function abc(){
var arr = [[1],[2,3],[4,5,6]]
//遍历
for(var rows=0;rows<arr.length;rows++){
for(var cols=0;cols<arr[rows].length;cols++){
document.write('rows['+rows+']['+cols+']='+arr[rows][cols]+'
')
}
}
}
script>
head>
<body>
<div align="center">
<button id="btn" onclick="abc()">按钮button>
div>
body>
html>
4.5.3 Array对象
- 创建数组对象
<script>
function abc(){
var arr = [1,2,3,4,5]
//创建一个数组对象
var arr1 = new Array(arr.length)
//交换数组元素
arr1 = arr
alert(arr1[0])
}
script>
- 拼接元素
<script>
function abc(){
var arr = [1,2,3,4,5]
//创建一个数组对象
var arr1 = new Array(arr.length)
//交换数组元素
arr1 = arr
alert(arr1.join('-'))
}
script>
- 排序
- 颠倒顺序
<script>
function abc(){
var arr = [3,1,6,2,5]
//排序
alert(arr.sort())
//颠倒顺序
alert(arr.reverse())
}
script>
4.6 内置对象
4.6.1 获取url
<script>
function abc(){
//获取url信息
var url = window.location
alert(url)
}
script>
- 跳转
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function load(){
window.location.href='login.html'
}
script>
head>
<body onload="load()">
<font color="red">正在加载中....font>
body>
html>
4.6.2 获取表单
- 注意：表单不能嵌套使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function fun1(){
var name = document.getElementById('username').value
//判断
if(name==''){
alert('不能为空值')
return
}else{
document.forms.formname.submit()
}
}
script>
head>
<body>
<form name="formname" action="login.html">
<input name="username" id="username">
<button onclick="fun1()">按 钮button>
form>
body>
html>
- 获取表单的属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function fun1(){
//获取所有的表单
var ff = document.forms
//循环
for(var i=0;i<ff.length;i++){
document.write(ff[i].name+'-'+ff[i].action+'-'+ff[i].method)
}
}
script>
head>
<body>
<form name="formname" action="login.html" method="post">
<input name="username" id="username">
<button onclick="fun1()">按 钮button>
form>
body>
html>
- 动态修改表单的属性值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
function fun1(){
document.forms[0].name = 'abc'
}
script>
head>
<body>
<form name="formname" action="login.html" method="post">
<input name="username" id="username">
form>
<button onclick="fun1()">按 钮button>
body>
html>
4.6.7 正则表达式
- 去掉空格（前后的空格）
//创建类
function Person(){}
//创建对象
var person = $ = new Person()
function trim(){
return this.replace(/^\s+|\s+$/g,' ')
}
- 测试
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/one.js">script>
<script>
function fun1(){
var name = document.getElementById('username').value
document.write(name.length+'
')
document.write(name.trim().length)
}
script>
head>
<body>
<input name="username" id="username">
<button onclick="fun1()">按 钮button>
body>
html>
4.7 编写类-创建对象使用
- js文件
//创建类
function JsUtils(){}
//创建对象
var jsUtils = $ = new JsUtils()
//获取函数原型
JsUtils.prototype.show=function(){
alert('显示函数')
}
//去掉空格
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,' ')
}
//获取函数原型
JsUtils.prototype.save=function(obj){
alert('获取参数'+obj)
}
- 测试
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/one.js">script>
<script>
function fun1(){
//jsUtils.show()
$.save('数据')
}
script>
head>
<body>
<input name="username" id="username">
<button onclick="fun1()">按 钮button>
body>
html>