JavaScript笔记-CSDN博客

本文链接：https://blog.csdn.net/fenqing1213/article/details/79191065

1、JavaScript 简介：
        * 是基于对象和时间驱动的语言，应用于客户端
            - 基于对象：
                    ** 提供好了很多对象，直接用就可以
            - 时间驱动：
                    ** html 静态网站  JavaScript 动态网站
            - 客户端：
                    ** 专指浏览器
        * js特点
                1）交互性  信息的动态交互
                2）安全性  js不能访问本地磁盘的文件
                3）跨平台  只要能够支持js的浏览器，就可以运行
        * JavaScript和java的区别
                - java是sun公司，现在是oracle;js是网景公司
                - JavaScript 基于对象;java 面向对象
                - java 强类型的语言; js 弱类型
                - java 先编译成字节码文件在执行;JavaScript只需要解析就可以执行
        * js的组成
                - ECMAScript
                    ** ECMA:欧洲计算机协会
                    ** 制定js的语法、语句...
                - BOM
                    ** broswer object model：浏览器对象模型
                - DOM
                    ** document object model: 文档对象模型
2、js和html的结合方式（2种）
        第一种：
            - 使用标签<script type="text/javascript">js代码;</script>
                ** alert("弹出窗口");
        第二种：
            - 使用script标签，引入一个外部的.js文件
                    <script type="text/javascript" src="1.js"></script>
                ** 使用第二种方式，script标签内不写任何内容，因为不会执行
3、js的原始类型和声明变量
        ** java的基本数据类型 byte short int long float double char boolean 
        ** 定义变量  都使用关键字 var
        ** js的原始类型（5个）
                - string 字符串
                        *** var str="aaa";
                - number 数字
                        *** var num=123;
                - boolean 布尔
                        *** var bool=true;
                - null
                        *** var date=new Date();
                        *** 表示获取对象的引用，null表示对象引用为空，所有对象的引用也是object
                - undifined
                        *** 定义一个变量，但是没有赋值
                        *** var aa;

         ** typeof(); 查看当前变量的数据类型
                -- alert(type(str));
4、js的语句

        1）if判断
        2）switch 语句
        3）循环 for while do-while

5、js的运算符

        ** js里面不区分整数和小数
                var j = 123;
                alert(j/1000*1000);
                java中结果 0
                js中 123/1000*1000 = 0.123*1000 = 123

        ** 字符串的相加和相减的运算
                var str="123"

                ** 相加   字符串连接
                ** 相减   就是相减

                var str="456";
                alert(str+1);   结果 4561
                alert(str-1);   结果 455

                - 如果提示消息NaN   表示操作对象不是数字

        ** boolean类型 
                - true  表示值为1
                - false 表示值为0
        ** == 和 === 的区别
                **  做判断
                **  == 比较的只是值
                    === 比较的是值和类型

        ** 输出语句 相当于syso
                - document.write("aaa");
                - document.write("<br/>");

                ** 可以输出变量
                ** 可以放html标签，设置标签的属性需要使用单引号
6、js的数组
        * 定义方式(3种)
                - 1.var arr =[1,2,3];  var arr=[1,"2",true];
                        ** 数组可以存放不同类型的数据
                - 2.使用内置对象  Array对象
                        var arr1 = new Array(5);    定义一个数组，长度为5
                        arr1[0]=1;
                        arr1[1]=2;
                - 3.使用内置对象  Array 
                        var arr2=new Array(3,4,5);  定义数组，并初始化
        * length 属性
                - 获取数组的长度
                - arr.length
7、js的函数
        ** 定义（3种方式）
                - 1.使用关键字 function
                    function 方法名（参数列表）{
                        方法体；
                        返回值可有可无（根据实际需要）；
                    }

                    function add(a,b){
                        var sum=a+b;
                        alert(sum);
                        //return sum;
                    }

                    有return时，alert(add(1,2));

                - 2.匿名函数
                    var add=function(a,b){
                        alert(a+b);
                    }
                    add(1,2);
                - 3.使用 js 的内置对象 Function
                        var add = new Function("参数列表","方法体；返回值");

                        var add = new Function("x,y","var sum;sum=x+y;return sum");
                        alert(add(1,2));

                        ** 也可以 
                        var f1 = "x,y";
                        var f2 = "var sum;sum=x+y;return sum";
8、js的全局变量和局部变量
        ** 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
        ** 局部变量：在方法内部定义一个变量，只能在方法内部使用

9、script标签的位置
        ** 一般放在<body></body>后面，</html>前面
10、js的String对象
        ** 创建String对象
                var str = "abc";
        ** 方法和属性
                * 方法
                    1）与html相关的方法
                        - bold():加粗
                        - fontcolor():设置字符串的颜色
                        - fontsize():设置字体的大小
                        - link():将字符串显示成超链接
                            ** str.link("hello.html");
                        - sub() sup(): 上标  下标

                    2）与java相似的方法

                        - concat() 连接两个字符串
                            str1.concat(str2);

                        - charAt() 返回指定位置的字符串
                            var str ="abcdefg";
                            document.write(str.charAt(1));
                            如果超出范围，返回空字符串，也就是空白，而不是null
                            document.write(str.charAt(10));

                        - indexOf() 返回字符串的索引位置
                            document.write(str.indexOf("a"));

                        - split() 切分字符串，成数组
                            var str="a-b-c-d";
                            var arr=str.spilt("-");
                            document.write("length:"+arr.length);

                        - replace() 替换字符串
                            var str="abcd";
                            document.write(str.replace("a","A"));

                        - substr()和substring()
                            var str="abcdefghijkl";
                            str.substr(5,3);  从第五位开始截取三个  结果 fgh
                            str.substring(3,5); 从第三位开始到第五位结束，但是不包括第五位  结果 de

11、js的Array对象
        ** length   属性
        ** 方法
            - concat(a);    连接数组
            - join(a);  根据一个指定的字符分割数组
            - push(a);  向数组的末尾添加一个或更多元素，并返回新的长度
            - pop();    表示删除最后一个元素，返回删除的那个元素
            - reverse():    颠倒数组中元素的顺序

12、js的Date对象
        ** java中 new Date();
                    //toLocaleString();
        ** js中 获取时间
            var date=new Date();    //获取当前时间
            document.write(date);   

            document.write(date.toLocaleString());  //转换格式
        ** 获取 年月日 
                getFullYear();  年
                getMonth();     月   返回月份 0-11
                getDate();      日   返回一个月的某一天 1-31
                getDay();       星期  返回一周中的某一天 0-6
                    - 星期日 返回0  星期一到星期六  返回 1-6

                getHours();     小时
                getMInutes();   分钟
                getSeconds();   秒

                getTime();      毫秒数  返回1970年1月1日至今的毫秒数
                    - 应用：处理缓存

13、js的Math对象
        ** 都是静态方法  Math.方法();调用

        ** ceil(x)  向上舍入
        ** floor(x) 向下舍入
        ** round(x) 四舍五入

        ** random() 得到 0.0 ~ 1.0 之间的随机数（伪随机数）

14、js的全局函数
        * 不属于任何一个对象，直接写名称使用

        * eval() 把js字符串作为脚本代码来执行
            - 执行js代码，如果字符串就是一个js代码，则直接执行代码

        * encodeURI() 对字符进行编码
        * decodeURI() 对字符进行解码

        * encodeURIComponent()
        * decodeURIComponent()

        * isNaN()   判断当前字符串是否是数字，返回true，false

        *parseInt() 类型转换,转换成整数
            - var str="123";
                document.write(parsent(str)+1);


15、js的重载
        ** 模拟重载:通过arguments数组实现
            Function add(){
                for(var i=0;i< arguments.length;i++){
                    alert(arguments[i]);
                }
            }

            alert(add(1,2));
            alert(add(1,2,3));
            alert(add(1,2,3,4));

16、js的bom对象
            ** bom 浏览器对象模型
            ** 对象：
                - navigator：获取客户机的信息(浏览器的信息)
                    * navigator.appName
                    * document.write(navigator.appName);

            ** screen:获取屏幕的信息
                - document.write(screen.width);
                - document.write(screen.height);

            ** location  请求url地址
                - href 属性
                        ** 获取到请求的url地址
                            document.write(location.href);
                        ** 设置url地址
                            页面上安置一个按钮，按钮上绑定一个事件，点击事件，页面跳转到另一页面
                             <input type="button" value="tiaozhuan" onclick="href();">
                             鼠标点击事件  onclick="js的方法;"
            ** history  请求的url的历史记录
                - 创建三个页面
                    1、第一页面 a.html 写一个超链接 到 b.html
                    2、第二页面 b.html 超链接到c.html
                    3、第三页面 c.html

                - 到访问的上一个页面
                        history.back();
                        history.go(-1);

                - 到访问的下一个页面
                        history.forward();
                        history.go(1);

            ** window
                - 窗口对象
                - 顶层对象（所用的bom对象都是在window里面操作的）

                ** 方法
                    - window.alert() 页面弹出一个框，

                    - window.confirm("显示的内容")   确认框  返回值是true false

                    - window.prompt(text,defaultText)   输入的对话框

                    - window.open() 打开一个新的窗口
                        * open("打开的新窗口的地址url","","窗口特征，比如宽度高度");
                        ** 创建一个按钮，点击这个按钮，就会打开一个新的窗口

                    - window.close()    关闭窗口    
                        * 弹出是否关闭的框，兼容性差

                    - 定时器
                        ** setInterval("js代码"，毫秒数)
                            * window.setInterval("alert('1');",1000);
                            * 表示每隔一秒执行一次alert

                        ** setTimeout("js代码"，毫秒数)
                            * 在毫秒数之后执行代码，只执行一次

                        ** clearInterval()  清除设置的定时器
                            var id=setInterval("alert('a');",3000);
                            clearInterval(id);

                        ** clearTimeout()   清除设置的定时器
                            var id=setTimeout("alert('a');",3000);
                            clearTimeout(id);
17、js的dom对象
        ** 文档对象模型
        **  文档：超文本文档 html、xml
            对象：提供了属性和方法
            模型：使用属性和方法操作超文本标记型文档

        ** 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

        **想要对标记型文档进行操作，首先需要 对标记型文档里面的所有内容封装成对象。

        ** 解析过程
            根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
            —— document 对象 ：整个文档
            —— element 对象 ：标签对象
            —— 属性对象
            —— 文本对象

            —— Node节点对象：这个对象是这些对象的父对象
                *** 如果在对象里找不到想要的方法，这时候就要到Node对象里面去找
        **dom模型有三种
            1.将html文档封装成对象
            2.在1的基础上添加新的功能，例如：对于事件和css样式的支持
            3.支持xml 1.0的一些新特性

        ** DHTML：是很多技术的简称
            - html：封装数据
            - css：使用属性和属性值设置样式
            - dom：操作html文档（标记型文档）
            - JavaScript：专门指的是js的语法语句（ECMAScript）

18、document对象
        * 表示整个文档

        ** 常用方法
                *** write()方法
                    1）向页面输出变量（值）
                    2）向页面输出html代码
                    - var str="abc";
                    document.write(str);
                    document.write("<hr/>");

                *** getElementById();
                    通过id得到元素（标签）
                    <input type="text" id="nameid" name="name1" value="val"/>
                    //使用getElementById得到input标签
                    var input=document.getElementById("idname");
                    //得到input里面的value值
                    alert(input.value);
                    alert(input.name);
                    //向input里设置一个值value
                    input.value="bbb";

                *** getElementsByName();
                    通过标签的name的属性值得到标签,
                    返回的是一个集合（数组）
                    <input type="text" id="nameid" name="name1" value="aaaa"/>
                    <input type="text" id="nameid" name="name1" value="bbbb"/>
                    <input type="text" id="nameid" name="name1" value="cccc"/>
                    <input type="text" id="nameid" name="name1" value="dddd"/>
                    //使用getElementsByName()得到标签
                    var input = document.getElemmentsByName("name1");
                    //alert(input.length);
                    //遍历数组
                    for(var i=0;i< input.lenth;i++){
                        var input1=input[i];
                        alert(input1.value);
                    }
                *** getElementsByTagName("标签名称");
                    通过标签名称得到元素

                    <input type="text" id="nameid" name="name1" value="aaaa"/>
                    <input type="text" id="nameid" name="name1" value="bbbb"/>
                    <input type="text" id="nameid" name="name1" value="cccc"/>
                    <input type="text" id="nameid" name="name1" value="dddd"/>
                    //使用getElementsByTagName()得到标签
                    var input = document.getElemmentsByTagName("input");
                    //alert(input.length);
                    //遍历数组
                    for(var i=0;i< input.lenth;i++){
                        var input1=input[i];
                        alert(input1.value);
                    }