第四章 javascript脚本

于 2022-10-10 15:14:04 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端开发 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ym18861512953/article/details/127245128
版权

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]+'<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>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值