首页 > 其他分享 >JS个人笔记

JS个人笔记

时间：2022-12-06 21:32:24浏览次数：36  
标签：function document 个人 笔记 alert getElementById var JS


1、引入javascript的几种方式

<script type="text/javascript">
    window.alert("hello js");   //alert函数会阻塞整个页面加载的作用，当我们把script放到最前面
                                //当alert按钮不被点击时 页面的内容是无法显示的
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入javascript的方法</title>
</head>
<body>
    <!-- 代码块的方式   -->
    <script type="text/javascript">
        /*
            暴露在脚本块当中的程序，在页面打开的时候执行
            并且遵守自上而下的顺序依次逐行执行。(这个代码的执行不需要事件)
         */
        /*
        *   javascript代码块可以放在任何位置 且都遵循自上而下的顺序一次执行
        * */
        window.alert("hello js");
    </script>
    <!-- 外部引入的方式  用src来引入-->
    <script type="text/javascript" src="js/1,js">
    </script>
    <!--
    这种方式是不可以的 不能使用自闭和标签来引入JS
    <script type="text/javascript" src="js/1,js"/> 
    -->

</body>
</html>

2、JS中的变量

<script type="text/javascript">
        /*
            javascript当中的变量？
                怎么生命变量？
                var 变量名;
                怎么给变量赋值？
                var 变量名 = 值;
                javasciprt是弱类型编程语言，赋任何都可以
                var a;  默认赋值为undefined  请记住undefined是一个值

                当变量没有定义直接访问时？
                alert(a); 在浏览器控制台会看到报错 a is not defined
         */
        var i = 10;
        var a = 100;
        var b = 'abc';
    <script>

3、JS函数

<script type="text/javascript">
            // JS的变量事一种弱类型的，那么函数应该怎么定义呢？
            /*语法格式：
                第一种方法：
                    function 函数名(形式参数列表){
                        函数体;
                    }
                第二种：
                    函数名 = function (形式列表参数){
                        函数体;
                    }*/
            function sum(a,b){
                alert(a + b);
            }
            //函数调用
            sum(10,20);
            
</script>
    <!--    也可以通过这种方式调用-->
    <input type="button" value="hello" onclick="sum(10,20)">

在JS中如果两个同名函数出现 后一个函数将覆盖前一个同名函数

4、JS的局部变量和全局变量

<script type="text/javascript">
    /**
     * 全局变量:
     *      在函数体之外声明的变量属于全局变量，全局变量的生命周期是:
     *          浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量。
     * 局部变量:
     *      在函数体当中声明的变量,包括一个函数的形参都属于局部变量:
     *          局部变量的生命周期是，函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。
     */
    //全局变量
    var i = 100;
    //alert(age);//age并没有定义 所以会报错 在控制台报未定义
    function getage(){
        var age = 18;
        alert(age);  //这个才是正确且引用的是局部变量
    }
    //在一个函数中的变量未加var则均视为全局变量
    function getage1(){
        age = 20;
    }
    getage1();
    alert(age);//访问到的是getage1中的age变量,但在使用age前需要先调用getage1声明age变量才可以
</script>

JS的数据类型

JS个人笔记_javascript

5、JS常用事件 回调函数概念 注册事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        /**
         *  双等于 “==”是同等 仅数值对应即可
         */
        alert(1==1)  //true
        alert(1==true)  //true
        alert(null==undefined) //true  只要数值相等  不需要管是否是同一个类型
        alert(NaN == null)   //false

        /**
         *   三等于 “===” 是全相等  需要数值相等且类型相同
         */
        alert(1 === true)  //false  因为1是Number 而 true 是Boolean类型 虽然数值相等但是 类型不同
        alert(null === undefined)    //false  与上面同等情况

        /**
         * 关于 null NaN undefined 这三个的类型
         */
        alert(typeof null)      //Object
        alert(typeof NaN)       //Number
        alert(typeof undefined) //undefined
        /**
         * JS的常用事件：
         *      focus 获得焦点
         *      blur 失去焦点
         *
         *      click 鼠标单击
         *      dbclick 鼠标双击
         *
         *      keydown 键盘按下
         *      keyup 键盘弹起
         *
         *      mousedown 鼠标按下
         *      mouseover 鼠标经过
         *      mousemove 鼠标移动
         *      mouseout  鼠标离开
         *      mouseup  鼠标弹起
         *
         *      reset 表单重置
         *      submit 表单提交
         *
         *      change 下拉列表选中项改变，或文本框内容改变
         *      select 文本被选定
         *      load 页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生)
         */

        /**
         *      第二种 事件调用方式
         *          使用document.getElementById获取标签元素对象同样还有ByName、ByClassName
         *          标签元素中就存在onclick属性 可以为其添加行为
         */

        var btn = document.getElementById("btn");
        document.get
        btn.onclick = function (){
            alert("this is submit1....")
        }

        /**
         *      第一种 事件调用方式
         */
        function messge(){
            alert("this is messge......");
        }
    </script>
    <!--
        第一种事件调用方式 每一个事件都有一个实践句柄 就是在事件前加on 如：click事件句柄为 onclick
        事件句柄是以 标签的属性存在的 可以给句柄添加行为
        
        第二种事件调用方式 在JS中调用
    -->
    <input type="submit" value="submit" onclick="messge()">
    <input type="submit" value="submit1" id="btn">
</body>
</html>

6、JS代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码的执行顺序</title>
</head>
<body>
    <script type="text/javascript">
        /**
         * 如果我们的JS代码放在body的前面 由于html是由上而下顺序执行
         * 就有可能存在我们的JS代码在为某个标签绑定单击事件时 下面的标签元素
         * 还没有加载成功，导致绑定失败
         */
        document.getElementById("btn1").onclick = function (){
            alert("this is submit1.......");
        }
    </script>
    <input type="submit" value="submit1" id="btn1">
</body>
</html>

我们在浏览器中查看到的情况是

JS个人笔记_javascript_02

配置为空

解决方案：

我们可以使用load事件等页面全部加载完成后在使绑定事件执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码的执行顺序</title>
</head>
<body>
    <script type="text/javascript">
        /**
         * 如果我们的JS代码放在body的前面 由于html是由上而下顺序执行
         * 就有可能存在我们的JS代码在为某个标签绑定单击事件时 下面的标签元素
         * 还没有加载成功，导致绑定失败
         */
        /**
           document.getElementById("btn1").onclick = function (){
                alert("this is submit1.......");
            }
        **/
        /**
         * 我们可以使用load函数当页面全部加载完成后在使绑定事件执行
         */
        window.onload = function (){
            document.getElementById("btn1").onclick = function (){
                alert("this is submit1.......");
            }
        }
    </script>
    <input type="submit" value="submit1" id="btn1">
</body>
</html>

再次打开浏览器查看，发现可以正确执行出我们想要的结果

JS个人笔记_javascript_03

7、JS捕获键盘回车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7、JS捕获键盘按键</title>
</head>
<body>
    <script type="text/javascript">
        /**
         * 在系统执行事件时 都会有一个事件参数 ，如果我们在function后的括号，
         * 加一个用于接收的形参便可以获取到这个事件参数供我们使用其中的一些属性
         */
        window.onload = function (){
            var btn = document.getElementById("btn");
            window.onkeydown = function (event){
                /**
                 * 回车的键值 17
                 * ESC的键值 23
                 */
                if (event.keyCode === 13){
                    btn.click();
                }
            }

        }
        function btnMessge(){
            alert("this is btnMessge......")
        }
    </script>
    <input type="submit" value="submit1" id="btn" onclick="btnMessge()">
</body>
</html>

8、DOM

1、javascript包括三大块：

ECMAScript：JS的核心语法

DOM:Document Object Moduel （文档对象模型：对网页中的节点进行增删改查的过程）HTML文档被当作一棵DOM树来看待。

var a = document.getElementById("btn");

BOM:Browser Object Moduel (浏览器对象模型):

关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等。都是BOM编程

2、BOM和DOM的区别和联系

BOM的顶级对象是：window

DOM的顶级对象是：document

实际上BOM包括DOM的

JS个人笔记_javascript_04

3、innerHTML和innerText操作div和span

1、首先innerHTML和innerText是标签对象中的属性，并不是方法调用时不需要添加括号
     比如： var btn1 = document.getElementById("btn")
            btn1.innerHTML = "abc"
2、设置div中的内容 通过JS代码
     通过innerHTML插入的内容浏览器可能会将其当作一段代码执行
     通过innerText插入的内容就只会被当作文本插入进去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            background-color:red;
            width:500px;
            height:500px;

        }
    </style>
</head>
<body>
    <script type="text/javascript">
        /**
         *  1、首先innerHTML和innerText是标签对象中的属性，并不是方法调用时不需要添加括号
         *      比如： var btn1 = document.getElementById("btn")
         *             btn1.innerHTML = "abc"
         *  2、设置div中的内容 通过JS代码
         *      通过innerHTML插入的内容浏览器可能会将其当作一段代码执行
         *
         */
        window.onload = function (){
           var btn =  document.getElementById("btn");
           btn.onclick = function (){
               var btn1 = document.getElementById("div1");
               //btn1.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
               btn1.innerText = "<a href='http://www.baidu.com'>百度</a>"
           }
        }
    </script>
    <input type="submit" value="设置div中的内容" id="btn">
    <div id="div1">

    </div>
</body>
</html>

使用innerHTML。这里我们可以看到div里插入的文字竟然变成了超链接，所以是有危险的操作

使用innerText。我们可以看到div里只有文字并不会将其当成一段代码去执行

JS个人笔记_javascript_05

4、正则表达式

1、怎么创建正则表达式对象，怎么调用正则表达式对象的方法？ 

第一种创建方式：
      var regExp = /正则表达式/flags;
        第二种创建方式：
          var regExp = new RegExp("正则表达式", "flags");

  关于flags： 

 g：全局匹配
 i：忽略大小写
 m：多行搜索（一般这个在第一种创建方式中不能使用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
      
        /**
         *  一个非常简单的 正则表达式的使用。邮箱是否合法
         * @type {RegExp}
         */
        var regExp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/  
        window.onload = function (){
            document.getElementById("btn").onclick = function (){
                var str = document.getElementById("user").value
                if (!regExp.test(str)){
                    document.getElementById("userInfo").innerText = "您输入的邮箱不合法"
                }else {
                    document.getElementById("userInfo").innerText = ""
                    alert("邮箱正确，正在登陆。。。。。。")
                }
            }
            document.getElementById("user").onfocus = function (){
                document.getElementById("userInfo").innerText = ""
            }
        }
    </script>
    <div>
        <span>账号：</span>
        <input type="text" value="请输入邮箱" id="user">
        <span id="userInfo" style="color: red;font-size: 14px"></span>
    </div>

    <input type="submit" value="submit" id="btn">
</body>
</html>

JS个人笔记_JSON_06

5、设置顶级窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        function setTop(){
            if (window.top != window.self){
                window.top.location = window.self.location;
            }
        }
    </script>

    <input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口，点击后设置成顶级窗口">
</body>
</html>

9、JSON

1、什么是JSON，有什么用?

JavaScript 0bject Notation (JavaScript对象标记），简称JSON。(数据交换格式)

JSON主要的作用是:一种标准的数据交换格式。(目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON.

2、JSON是一种标准的轻量级的数据交换格式。特点是:

体积小，易解析。

3、在实际的开发中有两种数据交换格式，使用最多，其一是TSON，另一个是XML。

XML体积较大，解析麻烦，但是有其优点是，语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)

1、JSON对象的创建

<script type="text/javascript">
        /**
         *      1、创建JSON对象
         */
        var json1 = {
            "name":"wzy",
            "age":"18",
            "sno":"2022114081"
        };

        for (const i in json1) {
            alert(json1[i]);
        }
    </script>

2、eval函数

eval函数的作用是：

将字符串当做一段JS代码解释并执行。

window.eval("var i = 100;");
alert(i)  //i=100

java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器

也就是说java响应到浏览器上的仅仅是一个JSON格式的字符串,还不是一个JSON对象.

可以使用eval函数,将json格式的字符串转换成JSON对象.

面试题：

在JS当中：[]和{}有什么区别？

             []是数组

             {}是JSON。

java中的数组：int[] arr = {1,4,2,3,4};

JS中的数组： var arr = [1,2,3,4,5];

JSON：var jsonObj = {"email":"​​[email protected]​​","age":"18"};


标签：function,document,个人,笔记,alert,getElementById,var,JS
From： https://blog.51cto.com/u_15887473/5916642

相关文章

  • JS与前端的交互
    JS与前端的交互BOM操作BOM是指浏览器对象模型，它使js能够与浏览器交互window.open('网址','','打开的窗口尺寸')打开新窗口window.close()关闭当前窗口navigator对......
  • js、jQuery
    BOM操作BOM（BrowserObjectModel）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”window.open()window.open('https://www.sogo.com/','','width=800px,l......
  • JSP指令-概述、page指令
    JSP指令-概述 指令作用：用于配置JSP页面，导入资源文件格式： <%@指令名称属性名1=属性值1属性名2=属性值2...%>JSP指令用来设置整个JSP页面......
  • SpringMVC —— 请求参数（传递json数据）
    接收请求中的json数据         注解     json格式（POJO）  json数组（POJO）   @RequestBody与@RequestParam区别  ......
  • 数据库(js部分讲解)
    BOM操作BOM（BrowserObjectModel）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”window.open() window.open('https://www.sogo.com/','','width=800......
  • JS之BOM与DOM
    目录BOM操作计时器相关操作（重要）DOM操作查找标签操作节点获取值操作class与css操作事件事件实战案例BOM操作所有浏览器都支持window对象。它表示浏览器窗口。*如果文......
  • js 字符串与ArrayBuffer互转
    1.情景展示在js当中，如何将字符串转成ArrayBuffer？如何将ArrayBuffer转成字符串？2.字符串转ArrayBuffer/***将类型化数组转字符串Int8Array：8位有符号整数，长度1个字......
  • 【个人设想】动力电能技术【ZSJ超级电能】
       首先声明：个人不懂电动汽车的技术，也不懂这些框框架架的工作原理，但这是一个难题，就需要解决不是。   当今时代下，电动汽车遇见的最大难题是什么？   无非储......
  • UE4学习笔记23——【动画】Mixamo自动绑骨并导入虚幻4
    P61.Mixamo自动绑骨并导入虚幻4P61需要插件“MixamoAnimationRetargeting”（200多块......）（这节课就简单听听，以后用到了再看）（桥豆麻袋！不用买这个插件，这节课的东西也能......
  • js base64与字符串互相转换
    1.情景展示在js当中，如何把base64字符串解码成字符串？如何把字符串进行base64编码？2.base64编码将字符串转base64格式window.btoa(str)  3.base64解码将base64格......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99