2.javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
      需要使用script引入外部的js文件来执行
      src 属性专门用来引入js文件路径(可以相对路径,也可以绝对路径)

      script标签可以用来定义js代码,也可以用来引入js文件,但是两个功能二选一,不能同时使用
    -->
    <!--<script type="text/javascript" src="test2.js">
    </script>-->
    <script type="text/javascript">
        var i;
        alert(i);//undefined
        i=12;
        //typeof() javascript语言提供过的一个函数,返回变量的数据类型
        alert(typeof(i));//number
        i="abc";
        alert(typeof(i));//string

        var a = 12;
        var b = "abc";
        alert(a*b);//NaN

        function fun(){
            alert(arguments.length);//2
            alert(arguments[0]);//abc
            alert(arguments[1]);//123
            for(var i ;i<arguments.length,i++){
                alert(arguments[i]);
            }
        }
        fun("abc",123);
    </script>
</head>
<body>
<!--
变量:
数值类型  number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function

特殊的值
null    空值
undefined    未定义,所有js变狼为赋于初始值的时候,默认的值都是undefined
NaN    not a number  非数字,非数值

定义变量的格式
var  变量名;
var   变量名 = 值;

关系运算
等于    ==  等于是简单的做i面值的比较
全等于  ===  除了比较字面值,还会比较两个变量的数据类型
0、null、undefined “”(空串)都认为是false

逻辑运算
在javascript中,所有的变量,都可以作为一个boolean类型的变量去使用
&&且运算
有两种情况: 当表达式全为真的时候,返回最后一个表达式的值
           当表达式中,有一个为假的时候,返回第一个为假的表达式的值
||或运算
有两种情况: 当表达式全为假的时候,返回最后一个表达式的值
           当表达式中,有一个为真的时候,返回第一个为真的表达式的值

数组
1.数组的定义
  var 数组名 =[];  空数组
  var 数组名 =[1,'abc',true];
只要通过数组的下标赋值,那么最大的下标值,就会自动的给数组扩容

函数
function 函数名(形参列表){
    函数体
}
在JavaScript中,如何定义带有返回值的函数:
   只需要在函数体内直接返回return值就可

函数的第二种定义方式
var 函数名 = function(参数列表){ 函数体}

js中不允许重载函数,如果有重载,直接覆盖上次的定义
argument隐形参数: 在function函数中不需要定义,但却可以直接用来获取所有参数的变量。
                  隐形参数像Java基础中的可变长参数一样

js中的自定义对象
对象的定义:
var 变量名 = new Object();   --对象实例
变量名.属性名 = 值;  --定义属性
变量名.函数名 = function(){} --定义函数

对象的访问:
变量名.属性名、变量名.函数名


方式二:
对象的定义
var  变量名  = {
    属性名 : 值,
    属性名: 值,
    函数名: function(){
    }
}

js中的时间
常用的事件 :
onload   加载完成事件: 也米娜加载完成之后,常用于页面js代码初始化操作
onclick  单击事件  :常用于按钮的点击响应操作
onblur   失去焦点事件  常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件  常用于下拉框和输入框内容改变后操作
onsubmit 表单提交事件   常用于表单提交前,验证所有表单项是否合法

事件的注册(或绑定): 告诉浏览器,当事件响应后要执行那些操作代码
分为两类: 静态注册 或  动态注册
静态注册: 通过html标签的事件属性直接赋予事件响应后的代码
动态注册:先通过js代码得到标签的dom标签,再通过dom对象.事件名=function(){} 这种形式赋予事件响应后的代码

动态注册基本步骤:
   1.获取标签对象
   2.标签对象.事件名 = function(){}
-->
</body>
</html>
alert("方式二");

onload、onclick、onblur、onchange、onsubmit事件

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
    <script type="text/javascript">
        //onload事件
     /*   function onload() {
            alert('静态注册onload事件,所有代码');
        }*/
        //onload事件动态注册,是固定写法
        window.onload= function() {
            alert('动态注册onload事件,所有代码');
        }
    </script>
</head>
<!--静态onload事件
       onload是浏览器解析完页面之后,自动执行
       <script type="text/javascript">
        //onload事件
           function onload() {
              alert('静态注册onload事件,所有代码');
            }
    </script>
       在body标签内 <body onload="onload();">
-->
<body >

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onclick 用于按钮的点击响应操作
        function onclickfn() {
            alert("静态注册onclick事件");
        }

        //动态注册onlick事件
        window.onload  = function () {
            //1.获取标签对象
            /*
            document 是JavaScript语言提供的一个对象(文件)
            getElementById 通过id属性获取标签对象
            */
            var btn02obj= document.getElementById("btn02");
            //2.通过标签对象.事件名= function(){}
            btn02obj.onclick = function () {
                alert("动态按钮");
            }
        }
    </script>
</head>
<body>
<!--静态注册-->
    <button onclick="onclickfn();">按钮1</button>
    <button id="btn02">按钮2</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onblur 用于输入框失去焦点,验证输入内容是否正确
        // 静态注册失去焦点事件
        function onblurfn() {
            //console是控制台对象,专门用来向浏览器的控制器打印输出,用于测试使用
            //log是打印的方法
            console.log("静态注册失去焦点");
        }

        //动态注册
        window.onload = function () {
            //1.获取标签对象
            var elementById = document.getElementById("text02");
            //2.通过标签对象,获取事件名
            elementById.onblur = function () {
                console.log("动态失去焦点");
            }
        }
    </script>
</head>
<br>
用户名:<input type="text" onblur="onblurfn();"></br>
  密码:<input type="text" id="text02"></br>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //onchange 下拉表或输入框内容发生改变后操作
        function onchangefn() {
             alert("课程改变");
        }
        window.onload = function () {
                var elementById = document.getElementById("teacher");
                elementById.onchange=function () {
                    alert("老师已经改变");
                }
        }
    </script>
</head>
<body>
请选择喜欢的课程:
<select onchange="onchangefn();">
    <option> java</option></br>
    <option> web</option></br>
    <option> oracle</option></br>
</select>


请选择喜欢的老师:
<select id="teacher">
    <option> java老师</option></br>
    <option> web老师</option></br>
    <option> oracle老师</option></br>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitfn() {
            //验证所有表单项是否合法,如果有一个不合法就组织表单提交
            alert("静态表单注册事件");
            return false;
        }
        window.onload= function () {
            var elementById = document.getElementById("onsubmitfn");
            elementById.onsubmit =function () {
                alert("动态表单注册事件");
                return false;
            }
        }
    </script>

</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit=" return onsubmitfn;">
<!--    onsubmit 用于表单提交前,验证表单项是否合法-->
    <input type="submit" value="静态注册">
</form>

<form action="http://localhost:8080" id="onsubmitfn">
    <!--    onsubmit 用于表单提交前,验证表单项是否合法-->
    <input type="submit" value="动态注册">
</form>

</body>
</html>

 

posted @ 2021-07-27 09:10  孫sun  阅读(35)  评论(0编辑  收藏  举报