JavWeb笔记:JavaScript总结

JavWeb笔记:JavaScript总结

 

目录

JavWeb笔记:JavaScript总结

一、js简介

二、基本语法

三、js内建对象

四、js的函数

五、js的事件

六、js的bom

七、js的dom



一、js简介


    1、js是什么
    2、js作用
    3、组成
    4、引入方式


二、基本语法


    1、变量
    2、原始数据类型
    3、引入数据类型
    4、运算符
    5、逻辑语句
    
    


三、js内建对象

    (1)Number
        创建方式:
            var myNum=new Number(value);
            var myNum=Number(value);
        属性和方法:
            toString():转成字符串
            valueOf():返回一个 Number 对象的基本数字值
    (2)Boolean
        创建方式:
            var bool = new Boolean(value);    
            var bool = Boolean(value);
        属性和方法:
            toString():转成字符串
            valueOf():返回一个 Boolean 对象的基本值(boolean)            
    (3)String
        创建方式:
            var str = new String(s);
            var str = String(s);
        属性和方法:
            length:字符串的长度
            charAt():返回索引字符
            charCodeAt:返回索引字符unicode
            indexOf():返回字符的索引
            lastIndexOf();逆向返回字符的索引
            split();将字符串按照特殊字符切割成数组
            substr():从起始索引号提取字符串中指定数目的字符
            substring():提取字符串中两个指定的索引号之间的字符
            toUpperCase();转大写
        示例:
    (4)Array
        创建方式:
            var arr = new Array();//空数组
            var arr = new Array(size);//创建一个指定长度的数据
            var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
            var arr = [];//空数组
            var arr = [1,2,5,"java"];//创建数组直接实例化元素
        属性和方法:
            length:数组长度
            join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
            pop():删除并返回最后元素
            push():向数组的末尾添加一个或更多元素,并返回新的长度
            reverse();反转数组
            sort();排序
    (5)Date
        创建方式:    
            var myDate = new Date();
            var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
        属性和方法
            getFullYear():年
            getMonth():月 0-11
            getDate():日 1-31
            getDay():星期 0-6
            getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
            toLocalString();获得本地时间格式的字符串
            
    (6)Math
        创建方式:    
            Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
            不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
        属性和方法
            PI:圆周率
            abs():绝对值
            ceil():对数进行上舍入
            floor():对数进行下舍入
            pow(x,y):返回 x 的 y 次幂
            random():0-1之间的随机数
            round():四舍五入
    (7)RegExp
        创建方式:    
            var reg = new RegExp(pattern);
            var reg = /^正则规则$/;
        规则的写法:
            [0-9] 
            [A-Z]
            [a-z]
            [A-z]
            \d 代表数据
            \D    非数字
            \w    查找单词字符
            \W    查找非单词字符
            \s    查找空白字符
            \S    查找非空白字符
            n+    出现至少一次
            n*    出现0次或多次
            n?    出现0次或1次
            {5} 出现5
            {2,8} 2到8次
        方法:    
            test(str):检索字符串中指定的值。返回 true 或 false
        需求:
            校验邮箱:
            var email = haohao_827@163.com
            var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
            reg.test(email);

 

四、js的函数


    1、js函数定义的方式
        (1)普通方式
            语法:function 函数名(参数列表){函数体}
            示例:
                function method(){
                    alert("xxx");
                }
                method();
        (2)匿名函数
            语法:function(参数列表){函数体}
            示例:
                var method = function(){
                    alert("yyy");
                };
                method();
        (3)对象函数
            语法:new Function(参数1,参数2,...,函数体);
            注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
            示例:
                var fn = new Function("a","b","alert(a+b)");
                fn(2,5);
    2、函数的参数
        (1)形参没有var去修饰
        (2)形参和实参个数不一定相等
        (3)arguments对象 是个数组 会将传递的实参进行封装
        function fn(a,b,c){
            //var sum = a+b+c;
            //alert(sum);
            //arguments是个数组 会将传递的实参进行封装
            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
        }
        fn(1,2,4,8);
        
    3、返回值
        (1)在定义函数的时候不必表明是否具有返回值
        (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
        function fn(a,b){
            return a+b;
            //alert("xxxx");
        }
        alert(fn(2,3));
    
    4、js的全局函数
        (1)编码和解码
            encodeURI()   decodeURI()
            encodeURIComponet()      decodeURIComponent()
            escape()    unescape()
            三者区别:
                进行编码的符号范围不同吧,实际开发中常使用第一种
        (2)强制转换
            Number()
            String()
            Boolean()
        (3)转成数字
            parseInt()
            parseFloat()
        (4)eval()方法    
            将字符串当作脚本进行解析运行
            //var str = "var a=2;var b=3;alert(a+b)";
            //eval(str);
            function print(str){
                eval(str);
            }
            print("自定义逻辑");
    

五、js的事件


    事件
    事件源
    响应行为
    1、js的常用事件
        onclick:点击事件
        onchange:域内容被改变的事件
            需求:实现二级联动
            <select id="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
            </select>
            <select id="area">
                <option>海淀</option>
                <option>朝阳</option>
                <option>东城</option>
            </select>
            <script type="text/javascript">
                var select = document.getElementById("city");
                select.onchange = function(){
                    var optionVal = select.value;
                    switch(optionVal){
                        case 'bj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                            break;
                        case 'tj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                            break;
                        case 'sh':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>浦东</option><option>杨浦</option>";
                            break;
                        default:
                            alert("error");
                    }
                };                
                
            </script>
        onfoucus:获得焦点的事件
        onblur:失去焦点的事件
            需求:    当输入框获得焦点的时候,提示输入的内容格式
                    当输入框失去焦点的时候,提示输入有误
            <label for="txt">name</label>
            <input id="txt" type="text" /><span id="action"></span>
            <script type="text/javascript">
                var txt = document.getElementById("txt");
                txt.onfocus = function(){
                    //友好提示
                    var span = document.getElementById("action");
                    span.innerHTML = "用户名格式最小8位";
                    span.style.color = "green";
                };
                txt.onblur = function(){
                    //错误提示
                    var span = document.getElementById("action");
                    span.innerHTML = "对不起 格式不正确";
                    span.style.color = "red";
                };
            </script>
            
        onmouseover:鼠标悬浮的事件
        onmouseout:鼠标离开的事件
            需求:div元素 鼠标移入变为绿色 移出恢复原色
            #d1{background-color: red;width:200px;height: 200px;}
            <div id="d1"></div>
            <script type="text/javascript">
                var div = document.getElementById("d1");
                div.onmouseover = function(){
                    this.style.backgroundColor = "green";
                };
                div.onmouseout = function(){
                    this.style.backgroundColor = "red";
                };
            </script>
        
    
        onload:加载完毕的事件
            等到页面加载完毕在执行onload事件所指向的函数
            <span id="span"></span>
            <script type="text/javascript">
                window.onload = function(){
                    var span = document.getElementById("span");
                    alert(span);
                    span.innerHTML = "hello js";
                };
            </script>
            
    2、事件的绑定方式
        (1)将事件和响应行为都内嵌到html标签中
            <input type="button" value="button"  οnclick="alert('xxx')"/>
        (2)将事件内嵌到html中而响应行为用函数进行封装
            <input type="button" value="button" οnclick="fn()" />
            <script type="text/javascript">
                function fn(){
                    alert("yyy");
                }
            </script>
        (3)将事件和响应行为 与html标签完全分离
            <input id="btn" type="button" value="button"/>
            <script type="text/javascript">
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    alert("zzz");
                };
            </script>
        
        ****this关键字
            this经过事件的函数进行传递的是html标签对象
            <input id="btn" name="mybtn" type="button" value="button123" οnclick="fn(this)"/>
            <script type="text/javascript">
                function fn(obj){
                    alert(obj.name);
                }
            </script>
    
    3、阻止事件的默认行为
        IE:window.event.returnValue = false;
        W3c: 传递过来的事件对象.preventDefault();
        //ie:window.event.returnValue = false;
        //W3c:传递过来的事件对象.preventDefault();
        //W3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标签
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
        
        
        //通过事件返回false也可以阻止事件的默认行为
        <a href="demo11.html" οnclick="return false">点击我吧</a>
    
    4、阻止事件的传播
        IE:window.event.cancelBubble = true;
        W3c: 传递过来的事件对象.stopPropagation();
        if(e&&e.stopPropagation){
            alert("w3c");
            e.stopPropagation();
        //IE标签
        }else{
            alert("ie");
            window.event.cancelBubble = true;
        }    

 

六、js的bom


    (1)window对象
        弹框的方法:
            提示框:alert("提示信息");
            确认框:confirm("确认信息");
                有返回值:如果点击确认返回true  如果点击取消 返回false
                var res = confirm("您确认要删除吗?");
                alert(res);
            输入框:prompt("提示信息");
                有返回值:如果点击确认返回输入框的文本 点击取消返回null
                var res =  prompt("请输入密码?");
                alert(res);
        open方法:
            window.open("url地址");            
            open("../jsCore/demo10.html");
            
        定时器:
            setTimeout(函数,毫秒值);
                setTimeout(
                    function(){
                        alert("xx");
                    },
                    3000
                );
            clearTimeout(定时器的名称);
                var timer;
                var fn = function(){
                    alert("x");
                    timer = setTimeout(fn,2000);
                };
                var closer = function(){
                    clearTimeout(timer);
                };
                fn();
            setInterval(函数,毫秒值);
            clearInterval(定时器的名称)
                var timer = setInterval(
                function(){
                    alert("nihao");
                },
                2000
            );
            var closer = function(){
                clearInterval(timer);
            };
            
        需求:注册后5秒钟跳转首页
        恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
        <script type="text/javascript">
            var time = 5;
            var timer;
            timer = setInterval(
                function(){
                    var second = document.getElementById("second");
                    if(time>=1){
                        second.innerHTML = time;
                        time--;
                    }else{
                        clearInterval(timer);
                        location.href="../jsCore/demo10.html";
                    }
                },
                1000
            );
        </script>
        
    (2)location    
        location.href="url地址";
    (3)history
        back();
        forward();
        go();
        <a href="demo7.html">后一页</a>
        <input type="button" value="上一页" οnclick="history.back()">
        <input type="button" value="下一页" οnclick="history.forward()">
        
        <input type="button" value="上一页" οnclick="history.go(-1)">
        <input type="button" value="下一页" οnclick="history.go(1)">
        


七、js的dom


    1、理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象
    2、dom方法和属性
        笔记见代码
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

走向认知发展的理性建构理论

Towards a Rational Constructivist Theory of Cognitive Development Fei Xu University of California, Berkeley来源&#xff1a;CreateAMind本文对认知发展理论——理性建构主义进行了综述。这种观点的基本原则如下:(a)初始状态:人类婴儿以一组原型概念的原语开始生命。这些…

JavaWeb笔记:JDBC总结

JavaWeb笔记:JDBC总结 目录 JavaWeb笔记:JDBC总结 一、JDBC概述 二、开发一个JDBC程序&#xff08;重要&#xff09; 三、JDBC常用的类和接口详解 1、java.sql.Drivermanager类 : 创建连接 2、java.sql.Connection接口&#xff1a;一个连接 3、java.sql.Statement接口:…

谷歌街景15年乾坤大挪移!带你穿越法老的金字塔

来源&#xff1a;机器学习研究组订阅最近两年多&#xff0c;整个世界都被一个共同对手折腾得够呛。有人咬牙坚持、有人躺平摆烂&#xff0c;有人祈求上天&#xff0c;还有人离开了这个世界。更多的人们则逐渐意识到&#xff0c;原来所谓「Good Old Times」离我们竟然如此之近&a…

如何构建可信GNN?最新综述来了!可信图神经网络:维度,方法,趋势

来源&#xff1a;Monash University作者&#xff1a;He Zhang&#xff0c;Bang Wu前言在过去的几年里&#xff0c;以神经网络为首的人工智能技术通过对不同类型数据的深入挖掘已经深刻地改变了人类的生活并极大地推动了社会发展的进程 [1]。作为人工智能领域最活跃的研究方向之…

JavaWeb:XML总结

JavaWeb:XML总结 目录 JavaWeb:XML总结 一&#xff1a;什么是XML&#xff1f; 二&#xff1a;xml语法&#xff1a; 三&#xff1a; xml约束&#xff1a; 四&#xff1a;XML解析思想&#xff1a; 一&#xff1a;什么是XML&#xff1f; XML&#xff1a;eXtensible Markup La…

JavaWeb:tomcat服务器安装总结及Http协议

JavaWeb:tomcat服务器安装总结 目录 JavaWeb:tomcat服务器安装总结 一&#xff1a;服务器端概述&#xff1a; 二&#xff1a;Tomcat下载&#xff1a; 三&#xff1a;安装&#xff1a; 四&#xff1a;HTTP问题&#xff1a; 五&#xff1a;深入了解tomcat服务器&#xff1…

深度知识的6个维度:如何让人工智能真正理解世界?

智能的真正标志不是知识&#xff0c;而是想象力。来源&#xff1a;AI科技评论作者&#xff1a;Gadi Singer编译&#xff1a;王玥编辑&#xff1a;陈彩娴什么知识让我们变得聪明&#xff1f;我们用来理解世界、解释新体验和做出深思熟虑的选择的认知结构是什么&#xff1f;定义一…

C语言:fopen与open的总结

目录 QUESTION:fopen与open的总结? ANSWER: 1.非缓冲文件系统 2.缓冲文件系统 3.具体区别 QUESTION:fopen与open的总结? ANSWER: 1.非缓冲文件系统 缓冲文件系统是借助文件结构体指针来对文件进行管理&#xff0c;通过文件指针来对文件进行访问&#xff0c;既可以读写字符…

2013年图灵奖得主Leslie Lamport:如何写出数学上完美的算法

来源&#xff1a;新智元图灵奖得主、分布式系统先驱、LaTeX之父Leslie Lamport认为&#xff0c;对于程序员而言&#xff0c;对数学思维的强调永远不会过分&#xff0c;要写出好代码&#xff0c;不能惧怕数学。Leslie Lamport可能不是一个家喻户晓的名字&#xff0c;但一提到和他…

Python绘制图形之Matplotllib绘图

Python绘制图形之Matplotllib绘图 目录 Python绘制图形之Matplotllib绘图 一、绘制二维函数图 1.1 绘制 f(x)sin2(x−2)e−x2 1.2 、绘制 sigmoid函数图: f(x)11e−x 1.3、绘制正态分布图 二、绘制三维图 2.1 绘制三维螺旋图 2.2 绘制三维线性点图 2.3 绘制三维柱状图 2…

新发现罕见生命密码:基因读取的另一套代码

来源&#xff1a;生物通令人震惊但让人困惑的是&#xff0c;我们所知的生命密码使用了61个不同的三字母密码子&#xff0c;只产生了20个氨基酸&#xff0c;这意味着许多密码子被用来描述同一件事。新的研究表明&#xff0c;大脑和睾丸似乎非常适应使用多种不同种类的遗传密码来…

Java总结:正则表达式

目录 Java 正则表达式 正则表达式实例 实例 捕获组 实例 RegexMatches.java 文件代码&#xff1a; 正则表达式语法 Matcher 类的方法 索引方法 研究方法 替换方法 start 和 end 方法 RegexMatches.java 文件代码&#xff1a; matches 和 lookingAt 方法 RegexMat…

《自然-机器智能》:神经形态技术可使大型深度学习网络节能16倍

来源&#xff1a; 学术头条受生物大脑机制的启发&#xff0c;研究人员一直在提高人工神经网络的性能效率和计算要求。一项新的研究表明&#xff0c;对于大型深度学习网络&#xff0c;神经形态技术的能源效率有望达到其他人工智能系统的 16 倍。格拉茨技术大学&#xff08;TU Gr…

Java总结:正则表达式进行校验

Java总结:正则表达式进行校验 目录 Java总结:正则表达式进行校验 一、校验数字的表达式 二、校验字符的表达式 了解理论知识&#xff0c;请点击:Java总结:正则表达式 一、校验数字的表达式 1 数字&#xff1a;^[0-9]*$ 2 n位的数字&#xff1a;^\d{n}$ 3 至少n位的数字&am…

康奈尔计算计学院院长Kavita Bala:「元宇宙」算什么?上帝之眼或将通过 AI 诞生...

来源&#xff1a;AI科技评论编译&#xff1a;王玥编辑&#xff1a;陈彩娴在今年斯坦福HAI实验室的春季会议上&#xff0c;康奈尔计算机学院院长Kavita Bala以“视觉外观和理解&#xff1a;从微米分辨率到世界级”为题&#xff0c;就她在数字化现实世界方面的研究进行了精彩的演…

MySql笔记:Can't create table 'mydb3.#sql-f48_1' (errno: 150

QUESTION:Cant create table mydb3.#sql-f48_1 (errno: 150 ANSWER: 总得来说是因为两个表的字段类型不一致&#xff0c;例如&#xff1a; 两个字段的类型或大小不严格匹配&#xff0c;一个为tinyint&#xff0c;另一个为char&#xff1b;或一个为int(10)另一个为int(9)也是不…

王浩:哥德尔思想概说

来源&#xff1a;本文原文刊于《科学文化评论》2004年第6期撰文&#xff1a;王浩翻译&#xff1a;邢滔滔译者按本文选自王浩最后一本著作A Logical Journey—From Gdel to Philosophy (Cambridge: The MIT Press, 1996&#xff09;的引言部分&#xff0c;有删节&#xff0c;题目…

八大排序:Java实现八大排序及算法复杂度分析

目录 QUESTION:八大排序:Java实现八大排序及算法复杂度分析 ANSWER: 一&#xff1a;冒泡排序 1.算法分析 2.时间复杂度分析 3.代码 二&#xff1a;选择排序 1.算法分析 2.时间复杂度分析 3.代码 三&#xff1a;插入排序 1.算法分析 2.时间复杂度分析 3.代码 四&a…

网友:看完Jeff Dean新论文,我再也不相信大厂的鬼话了

来源&#xff1a;数学中国文字&#xff1a;乔叶配图 &#xff1a;乔叶排版&#xff1a;余弟宗璇「我相信他们得到的数字是准确的&#xff0c;他们确实做了工作并得到了结果…… 但这样真的好吗&#xff1f;」一名机器学习研究者的灵魂发问&#xff0c;今天成为了整个社区最热门…

Tomcat:部署成功后不能正常访问local:8080,服务已经启动。

QUESTION:Tomcat:部署成功后不能正常访问local:8080&#xff0c;服务已经启动? ANSWER: 昨天启动的时候&#xff0c;tomcat能够正常启动&#xff0c;但是对应的网页却打不开。针对此问题的解决采取了以下步骤&#xff1a; 首先&#xff0c;我找到tomcat的安装目录&#xff0…