JavaWeb--JavaScript

特点

JavaScript的特点是交互性（用来进行信息之间的交互）、跨平台性、安全性（不被允许直接访问本地硬盘）

使用

<script type="text/javaScript">
    //javaScript自带的警告框函数
    alert("hello JavaScript");
</script>

javaScript文件的引入和基本功能

通过src将js文件引入路径。可以是相对路径也可以是绝对路径

script有两个功能，在其中书写JavaScript代码或引入js文件，但是只能二选一，不能一起用

如果想要有两个提示可以重新再写一个script标签再进行书写js代码

JavaScript的基本元素

JavaScript中的数据类型
   数值类型   number
   字符串类型   String
   布尔类型   boolean
   函数类型   function
   对象类型   object

   javaScript中特殊的值
   undefined   未定义类型，当js变量未赋予初始值的时候，都是undefined
   null   空值
   NAN   全称是：Not a Number   非数值非数字

   变量定义方式
   var 变量名;
   var 变量名 = 值;

   当JavaScript中数字和字符串进行运算结果就是NAN类型的
   进行定义变量时，先给变量赋值后还可以再给变量进行赋值，数据类型会随之变化

   关系比较运算符
   等于   ==   简单进行数值比较
   全等于   ===   不仅进行数值比较还进行数据类型的比较
   其他和Java一样的用

   逻辑运算
   且运算  &&
   或运算  ||
   取反运算  ！

   在JavaScript中所有变量都可以当作Boolean类型进行运算比较
   0，null，undefined，空字符串”“都是false
   在进行且运算时当两个都是真就会返回最后一个变量的值，当有一个假的就会返回第一个为假的变量的值
   在进行或运算时当两个值都是假的就会返回最后一个值，当有一个真的时就会返回第一个为真的变量值

   数组
   数组定义
   var 数组名 = 【】；空数组
   var 数组名 = 【a,d,f,3,4,o】；

   函数
   函数定义
   function 函数名（形参列表）{
   函数体
   }

函数定义的第二种方式

   var 函数名 = function(形参列表){函数体}

   js中的函数不能重载，重载会致使第一次的函数定义被覆盖

   在function函数中有一个arguments隐形参数，不需要定义，就可以获取所有参数的变量，叫做隐形函数

   利用arguments可以对参数进行数组操作，预先设定的形参并不会影响arguments的使用，参数可以在函数调用赋值环节再加

   类型判断就可以使用if配typeof函数判断处理

   js中数字字符串相加会进行字符串拼接操作，产生的结果就是拼接字符串

   对象的定义：
   var 变量名 = {属性名：值，属性名：值，函数名：function（）{}，....} //空对象
   var 变量名 = new Object();
   变量名.属性名=值
   变量名.函数名 = function(){}
   对象的调用：
   变量名.属性名/函数名();
   在函数内部可以使用this关键字调用本对象的属性

JavaScript的事件

JavaScript的事件
   onload加载完成事件   加载js完成页面初始化操作
   onclick单击事件   页面点击响应事件
   onblur失去焦点事件   输入框失去焦点时验证输入内容是否合法
   onchange内容发生改变事件   下拉列表和输入框内容发生改变的时候
   onsubmit表单提交事件   表单提交前验证表单项是否合法

   事件的注册：
   静态注册：直接在标签事件发生后就赋予事件响应代码
   动态注册：通过js代码先获得指定dom对象，然后通过dom对象.事件名 = function（）{} 赋予事件响应后的代码
   动态注册的步骤
   1.获得标签对象
   2.标签对象.事件名 = function（）{}

<script type="text/javascript">

        // window.onload = function (){
        //     alert("动态注册")
        // }

        // var onloadfun = function (){
        //     alert("静态注册")
        // }

        function onclickfun(){
            alert("静态注册")
        }

        window.onclick= function () {

            var onclickfun1 = document.getElementById("but1");

            onclickfun1.onclick = function () {
                alert("动态注册")
            }
        }

        function onblurfun(){
            console.log("静态注册失去焦点")
        }

        window.onload = function () {
            var onblurid = document.getElementById("onblur01")

            onblurid.onblur = function () {
                console.log("动态注册失去焦点")
            }
        }

        function onchangefun() {
            alert("地址选择已修改成功")
        }

        window.onload = function () {
            var changeid = document.getElementById("change01");
            changeid.onchange = function () {
                alert("修改成功")
            }
        }

        function onsubtionfun() {
            alert("静态注册提交被拦截")
            return false;
        }

        window.onload = function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function () {
                alert("动态注册提交被拦截")
                return false;//想要不拦截直接提交成功就改成true
            }
        }

    </script>

JavaScript中的dom元素的使用

Document HTML标签对象模型 -- 就是用一个类将页面内的标签进行统计管理
模拟注册条件设置比较
doucument.getelementbyid/getelementbyName 方法只能在页面加载完成之后才能够进行查询

Javascript正则表达式的使用

<head>
    <meta charset="UTF-8">
    <title>js_06-正则表达式对象REGEXP</title>
  <script type="text/javascript">

    var patt = new RegExp("h");//表示字符串中是否包含“h”
    var guu = /a{3}/
    var fft = /^\w{3,5}$/
    var str = "aaabch";
    var dde = "aaa"
    // alert(patt.test(str))
    // alert(guu.test(str))
    alert(fft.test(dde))

  </script>
</head>

JavaScript往页面中添加元素

<head>
    <meta charset="UTF-8">
    <title>js_07-JavaScript在页面添加元素内容</title>
  <script type="text/javascript">
<!--    这些语句必须在页面加载完成后才能够添加内容不然就会显示appendChild中的内容无法找到-->
    window.onload = function () {
      var creatediv = document.createElement("div")
      var createObj = document.createTextNode("简直妙极了")
      creatediv.appendChild(createObj)
      document.body.appendChild(creatediv)
    }
    
  </script>

posted @ 2021-11-04 22:21 优质水阅读(75) 评论(0) 收藏举报

刷新页面返回顶部

JavaWeb--JavaScript