【javaScript简记】

编码小生

已于 2022-06-08 12:34:33 修改

阅读量248

点赞数 1

分类专栏： javaweb 文章标签： javascript

于 2021-11-22 11:50:33 首次发布

本文链接：https://blog.csdn.net/qq_45813532/article/details/121468604

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javaScript介绍

  JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要浏览器来解析JavaScript代码。

 js是Netscape网景公司的产品，最早取名为LIveScript;为了吸引更多java程序员。更名为javaScript。

js是弱类型，java强类型

弱类型就是类型可变。

强类型就是定义变量的时候。类型已确定。而且不可变。

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释js的浏览器都可以执行，和平台无关）

JavaScript和html代码的结合方式

第一种方式：

只要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        alert("hello javaScript");
    </script>
</head>
<body>

</body>
</html>

第二种使用方式：

使用script标签引入单独的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="1.js"></script>
</head>
<body>

</body>
</html>

变量

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript的变量类型：

数值类型：number

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

JavaScript里特殊的值：

undefined 未定义，所有js变量未赋初始值的时候，默认值都是undefined。

null 空值

NAN 全称是：Not a number。非数字。非数值。

js中的定义变量格式：

var 变量名；

var 变量名 = 值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        i = 12;
        //typeof()是javaScript语言提供的一个函数。
        // 它可以取变量的数据类型返回
        //alert(typeof(i)); //number
        //i ="abc"
        //alert(typeof(i));//string
        var a="abc";
        var b=1;
        alert(a*b);//NAN非数字，非数值。
    </script>
</head>
<body>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHm0S8FT-1637552935617)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211121111550151.png)]

关系（比较）运算

等于：== 等于是简单的做字面值得比较

全等于：=== 除了做字面值得比较之外，还会比较俩变量得数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a ="12";
        var b =12;
        alert( a===b );//true
        alert( a==b );//false
    </script>
</head>
<body>

</body>
</html>

逻辑运算

且运算：&&

或运算：||

取反运算：！

在JavaScript语言中，所有变量，都可以做为一个boolean类型得变量去使用。

0，null,undefined,“”(空串)都认为是false;

&&且运算，有俩种情况：

第一种：当表达式全为真得时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假得时候。返回第一个为假的表达式的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
    <script type="text/javascript">
        var a = "abc";
        var b = true;
        var c = false;
        alert(a&&b);//true
        alert(a&&c);//false
        alert(a&&b&&c);//false
    </script>
</head>
<body>

</body>
</html>

|| 或运算

第一种：当表达式全为假时，返回最后一个表达式的值

第二种：只要有一个表达式为真，就会返回第一个为真的表达式的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
    <script type="text/javascript">
        var a = "abc";
        var b = true;
        var c = false;
        var d =false;
      //  alert(a&&b);//true
        //alert(a&&c);//false
        //alert(a && b && c);//false
        alert(d||c);//false
        alert(a||d);//abc
    </script>
</head>
<body>

</body>
</html

数组

数组的定义方式

js中数组的定义：

格式：

var 数组名 = []; //空数组

var 数组名 = [1,‘abc’,true];//定义数组同时赋值元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript">
        var arr = []; //定义一个数组；
        alert(arr.length);//0
        arr[0]=12;
        alert(arr[0].length);//12
        alert(arr.length);//0

        //JavaScript语言中的数据，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组扩容操作

        arr[2] ="abc";
        alert(arr[2]);//abc
        alert(arr.length);//3

        //alter(arr[1]);//undefined

        //数组的遍历
        for(var i = 0;i<arr.length;i++)
        {
            alert(arr[i]);
        }
    </script>
</head>
<body>

</body>
</html>

函数

函数的二种定义方式

第一种：可以使用function 关键字来定义函数。

使用格式如下：

function 函数名（形参列表）{

函数体

}

在JavaScript语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用return语句返回值即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun1(){
            alert("无参函数被调用了");
        }
        //函数调用才会执行
        fun1();
        function fun2(a,b){
            alert("有参函数fun2()被调用了a=>"+a+",b=>"+b);
        }
        fun2(12,"24");
        //定义带有返回值的函数
        function sum(num1,num2){
            var result =num1 + num2;
            return result;
        }
        alert(sum(12,14));

    </script>
</head>
<body>

</body>
</html>

函数的第二种定义方式，格式如下：

var 函数名 = function（形参列表）{

函数体

}

注：在Java中函数允许重载。但是在js中函数的重载会直接覆盖掉上一次的定义

函数的arguments 隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以用来直接获取所有参数的变量。我们管它叫做隐形参数。隐形参数特别像java基础的可变长参数一样。

public void fun(object …args);

可变长参数其实是一个数组。

那么js中的隐形参数也和Java中的可变长参数一样。操作类似数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
             alert(arguments.length);
             alert(arguments[0]);
             alert(arguments[1]);
             alert(arguments[2]);

             for(var i=0;i<arguments.length;i++)
             {
                 alert(arguments[i]);
             }
             alert("无参函数fun（）");
        }
           fun(1,2,3);
    </script>
</head>
<body>

</body>
</html>

js中的自定义对象

object形式的自定义对象

对象的定义：

var 变量名 = new object(); //对象实例（空对象）

变量名.属性名 = 值；//定义一个属性

变量名.函数名 = function（）{} // 定义一个函数

对象的访问：

变量名.属性/函数名（）；

{}花括号形式的自定义对象

对象的定义：

var 变量名 = { //空对象

属性名：值；

函数名：function(){}

}；

对象的访问：

变量名.属性/函数名（）；

js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，称之为事件。

常用的事件：

onload 加载完成事件：页面加载完成之后常用于做页面js代码初始化操作

onclick单击事件：常用于按钮的点击响应操作

onblur失去焦点事件：常用于输入框失去焦点后验证其是否合法

onchange 内容发生该该改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册俩种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或者事件绑定。

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们称为静态注册。

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function（）{} 这种形式赋予事件响应后的代码，叫动态注册。

动态注册基本步骤：

1.获取标签对象

2.标签对象.事件名 = function（）{}

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript">
        function onloadFun(){
            alert("静态注册onload事件，所有代码");
        }
        /*   window.onload = function(){
            alert("动态注册的onload事件");
        }
    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后会自动触发的事件
        <body onload="onloadFun();">
   -->
<body>


</body>
</html>

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态注册");
        }
        //动态注册onclick注册
        window.onclick = function(){
        //1 获取标签对象
           /* document 是JavaScript语言提供的一个对象(文档)<br/>
              get     获取
              element 元素（就是标签）
              By      通过。。。由。。。经。。
              Id      id属性
              getElementById通过id属性获取标签对象
*/

            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            //2 通过标签对象。事件名 = function(){}
            btnObj.onclick = function(){
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
     <!--静态注册onclick标签-->
     <button onclick="onclickFun();">按钮1</button>
     <button  id="btn01">按钮2</button>
</body>
</html>

onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       //静态注册失去焦点事件
       function onblurFun(){
           //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
           //log() 是打印的方法
           console.log("静态控制失去焦点");
       }
       //动态注册 onblur 事件
       window.onblur = function (){
           //1.获取标签对象
           var passwordObj = document.getElementById("password");
           //alert(passwordObj);
           passwordObj.onblur = function(){
               console.log("动态控制失去焦点");
           }
       }
    </script>
</head>
<body>
        用户名：<input type="text" onblur="onblurFun()"><br/>
        密码：  <input type="text" id="password"><br/>

</body>
</html>

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("男朋友已经改变！");
        }
        window.onchange = function(){
            var selectObj = document.getElementById("select01");
            //alert(selectObj);
            selectObj.onchange = function(){
                alert("内容已经发生改变");
            }
        }
    </script>
</head>
<body>
      请选择：
      <select onchange="onchangeFun();">
          <option>--肖战--</option>
          <option>--肖战--</option>
          <option>--肖战--</option>
          <option>--肖战--</option>
          <option>--王一博--</option>
      </select>
      请选择：
      <select id="select01">
          <option>--秀逗--</option>
          <option>--九月--</option>
          <option>--酷偕--</option>
          <option>--灵梦--</option>
          <option>--羲和--</option>
      </select>
</body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册表单提交事务
        function onsubmitFun(){
            //要验证所有表单向是否合法，如果有一个不合法就阻止表单提交
            alert("静态注册表单提交事件---发现不合法");
            return false;
        }
        window.onsubmit = function (){
            var fomObj = document.getElementById("fom01");
            fomObj.onsubmit = function (){
             alert("动态注册表单提交事件----发现不合法");
            }
        }
    </script>
</head>
<body>
       <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
           <input type="submit" value="静态注册"/>
       </form>

       <form action="http://localhost:8080" method="get" id="fom01">
           <input type="submit" value="动态注册"/>
       </form>

</body>
</html>

DOM模型

DOM全称是Document Object Model 文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NI9oGLC-1637552935621)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211121204034309.png)]

documnet 对象的理解：

1.document它管理了所有的html文档内容。

2.document它是一种树结构的文档。有层级管理。

3.他让我们把所有的标签都对象化。

4.我们可以通过document访问所有的标签对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xxc7yQWm-1637552935623)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211121204857310.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            //如何验证字符串，符合这个规则，需要使用在正则表达式
            var patt= /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串是不是匹配我的规则
            *  匹配就返回true，不匹配就返回false
            * */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }
            else{
                alert("用户名不合法");
                }
        }
    </script>
</head>
<body>
     用户名：<input type="text" id="username" value=""/>
     <button onclick="onclickFun();">验证</button>
</body>
</html>

正则表达式

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFAW0bPg-1637552935626)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211121230829058.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示要求字符串中，是否包含字母e
        //var patt = nSSew RegExp("e");
        //var patt = /e/;

        //表示要求字符串中，是否包含字母a,b,c
        //var patt = /[abc]/;
        //表示要求字符串，是否包含任意大写字母
        //var patt =/[A-Z]/;
        表示要求字符串，是否包含0-9数字
        //var patt =/[0-9]/;

        //表示要求字符串，是否包含字母，数字，下划线
        //var patt = /\w/;

        //表示要求字符串中是否包含至少一个a
        //var patt = /a+/;

        //表示字符串中是否包含零个或多个a
        //var patt = /a*/;

        //表示字符串中是否包含零个或一个a
        //var patt = /a?/;

        //表示要求字符串是否包含连续三个a
        //var patt = /a{3}/;

        //表示要求字符串是否包含至少3个连续的a,最多5个连续的a
          //var patt =/a{3,5}/;

        //表示要求字符串是否包含至少三个连续的a
         //var patt =/a{3,}/;

        //表示要求 字符串必须以a结尾
        //var patt = /a$/;

        //表示要求字符串必须以a打头
        //var patt = /^a/;

       //要求字符串，从头到尾都必须完全匹配
       var patt = /^a{3,5}$/;
        var str = "aaaaa";
        alert(patt.test(str));

    </script>
</head>
<body>

</body>
</html>

getElementByName 方法：返回带有指定名称的对象的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       //全选
        function  checkall(){
            var hobbies = document.getElementsByName("hobby");
           for(var i =0;i<hobbies.length;i++){
               hobbies[i].checked=true;
           }

        }
        //全不选
        function  checkno(){

            var hobbies = document.getElementsByName("hobby");
            for(var i =0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverst(){
           var hobbies = document.getElementsByName("hobby");
           for(var i = 0; i<hobbies.length;i++)
           {
               hobbies[i].checked =!hobbies[i].checked;
              /* if(hobbies[i].checked )
               {
                   hobbies[i].checked =false;
               }
               else{
                   hobbies[i].checked = true;
               }*/
           }

        }

    </script>
</head>
<body>
     兴趣爱好：
     <input type="checkbox" name="hobby" value="cpp" checked="checked"/>C++
     <input type="checkbox" name="hobby" value="java"/>java
     <input type="checkbox" name="hobby" value="js"/>javaScript
     <br/>
     <button onclick="checkall()">全选</button>
     <button onclick="checkno()">全不选</button>
     <button onclick="checkReverst()">反选</button>
</body>
</html>

getElementById

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            //如何验证字符串，符合这个规则，需要使用在正则表达式
            var patt= /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串是不是匹配我的规则
            *  匹配就返回true，不匹配就返回false
            * */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }
            else{
                alert("用户名不合法");
                }
        }
    </script>
</head>
<body>
     用户名：<input type="text" id="username" value=""/>
     <button onclick="onclickFun();">验证</button>
</body>
</html>

getelementByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkall(){
            var inputs = document.getElementsByTagName("input");

            for(var i =0 ;i < inputs.length;i++)
            {
                inputs[i].checked =true;
            }
        }

    </script>
</head>
<body>

     兴趣爱好：
        <input type="checkbox" name="hobby" value="cpp" checked="checked"/>C++
        <input type="checkbox" name="hobby" value="java"/>java
        <input type="checkbox" name="hobby" value="js"/>javaScript
         <br/>
         <button onclick="checkall()">全选</button>
</body>
</html>

innerHTML :表示获取/设置起始标签和结束标签中的内容

innerText: 表示获取/设置其实标签和结束标签中的文本

childNodes:获取当前节点的所有子节点

firstChild: 获取当前节点的第一个子节点

lastChild:获得当前节点的最后一个子节点

parentNode：获得当前节点的父节点

nextSibling:获取当前节点的下一个节点

previousSibling:获取当前节点的上一个节点

className：获取或设置标签的class属性值

createElement

appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode是要添加的孩子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            //使用js代码来创建html标签，并显示在页面上
            var divObj= document.createElement("div");

            var textNOdeObj = document.createTextNode("123");

            divObj.appendChild(textNOdeObj);
           // divObj.innerHTML ="123";
            //添加子元素
            document.body.appendChild(divObj);
        }

    </script>
</head>
<body>

</body>
</html>

编码小生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javaScript简记】

javaScript介绍 JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要浏览器来解析JavaScript代码。 js是Netscape网景公司的产品，最早取名为LIveScript;为了吸引更多java程序员。更名为javaScript。js是弱类型，java强类型弱类型就是类型可变。强类型就是定义变量的时候。类型已确定。而且不可变。特点：1.交互性（它可以做的就是信息的动态交互）2.安全性（不允许直接访问本地硬盘）3.跨平台性（只要是可以解释js的浏
复制链接

扫一扫