第四章 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 循环

 <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]+'<br>')
        }
      }
    </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+'<br>')
        }
      }
</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]+'<br>')
          }
        }
      }
    </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>Document</title>
    <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>Document</title>
    <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>Document</title>
    <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>Document</title>
    <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>Document</title>
    <script src="js/one.js"></script>
    <script>
        function fun1(){
             var name = document.getElementById('username').value

             document.write(name.length+'<br>')
             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>Document</title>
    <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>

本文含有隐藏内容，请开通VIP 后查看

第四章 javascript脚本

4.1 简介

4.2 案例

4.2.1 弹出框

4.2.2 写到网页

4.3 提示函数

4.3.1 可以把脚本编写在

4.4 脚本的语法

4.4.1 标识符：

4.4.2 保留字和关键字

4.3.2 注释

4.3.3 数据类型

4.3.4 声明变量

4.3.5 函数

4.3.5.1 声明函数：function

4.3.5.2 不含参数的

4.3.5.3 含参数的

4.3.5.4 含参数返回值

4.3.5.5 系统函数eval

4.3.6 运算符

4.3.6.1 算术运算符

4.3.6.2 赋值运算符

4.3.6.3 比较运算符

4.3.6.4 逻辑运算符

4.3.7 循环

4.4 自定义对象

4.4.1 类

4.4.2 通过内置对象

4.4.3 字符串类型

4.4.4 Math对象

4.5 数组类型

4.5.1 一维数组

4.5.2 二维数组

4.5.3 Array对象

4.6 内置对象

4.6.1 获取url

4.6.2 获取表单

4.6.7 正则表达式

4.7 编写类-创建对象使用

网站公告

今日签到

热门文章

最新发布