JavaScript知识点

最新推荐文章于 2024-07-14 15:54:59 发布

帅帅不秃头

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量654

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/sshhzyq/article/details/121605886

版权

一、JavaScript简介

JavaScript是基于对象和事件驱动并具有安全性的客户端脚本语言。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、基础语法

1.引入js的方式

//1.内部
<script>
//代码
</script>
//2.外部
 <script src="**.js">//在**.js里面书写js代码
 </script>
// 1.引入的顺序就是执行的顺序
// 2.script可以放在html的任何位置
//3.
 <script src="js/1.js">
        alert("haha!!!")//这里的代码是不会执行的
  </script>

2.基础语法

js变量声明

var:变量的作用域方法的内部和外部，如果不使用var声明该变量为全局变量

   ES6 新增
   let ： 声明变量，作用域在代码块内部；
   const ：声明常量

 var a ;//变量声明没有赋值就是undefined

 var b = 100;//number类型
 var c = 100.1;//number类型
 var d = "100";//String类型  单引号和双引号都是一样的
 var f = '100';//String类型
//Undefined类型：只有一个值，是undefined的，变量声明没有赋值时为undefined的
//Null类型：只有一个值null，它表示一个空对象引用(指针)，
//而 typeof 操作符检测 null 会返回 object。
// Boolean 类型有两个值(字面量)：true 和 false。所有的非空字符串转为boolean类型时都是true
        alert(typeof null);
        alert(typeof undefined);
        alert( undefined == null);//undefined是派生自null
        alert( undefined === null);//undefined是派生自null
        alert(a)

number类型
1.浮点数值的范围在：Number.MIN_VALUE ~ Number.MAX_VALUE 之间。
2.通过 Number.POSITIVE_INFINITY 和 Number.NEGATIVE_INFINITY 得到 Infinity(正无穷)，Infinity(负无穷)的值
3.要想确定一个数值到底是否超过了规定范围，可以使用 isFinite()函数，如果没有超过，返回 true，超过了返回 false。
4.有 3 个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。
Number()：Number("")是0
parseInt()： parseInt("")是NaN  识别进制 8 10 2进制
arseFloat()：浮点型

alert(0.1+0.2);
alert(Number.MIN_VALUE);
alert(Number.MAX_VALUE);
var box = 100e1000;
alert(isFinite(box));
var a = "aa";
var b = "bb";
alert(isNaN(a))//true
alert(isNaN(b))//true
alert(Number(a)==Number(b))

for in 语句

for (var index in student){
            console.log(index);
            console.log(student[index]);//访问对象属性值得第二种方式,特殊的属性可以使用该方式访问
        }

        alert(student.name);
        alert(student._);
        alert(student[" "]);
        alert(student["name"]);


        document.write("<h1>hello world!!!</h1>");

数组：循环变量为 下标
  对象：循环变量为 属性名
  遍历对象里面的属性
 var obj={name,"htf",age:.....,"_":}

3.弹窗

1.警告框 alert()

2.确认框confirm()

function fn(){
    var flag=confirm("确认要关闭窗口吗？")

    if(flag){
        window.close();
    }else{

        alert("11");
        }

}

3.输入框prompt()


        function fn() {
            var flag = confirm("确认要关闭窗口吗？")

            if(flag){
                window.close();
            }else{
                alert("haha!!");
            }
        }

        //输入窗

        function f1() {
            var num  = prompt("请输入科目的数量？");
            var totalScore=0;
            if(isNaN(num)){
                alert("输入的科目数量有误！");
            }else{

                for(var i = 0 ;i<parseInt(num);i++){
                    //要求：输入每一次成绩时 ，3次错误机会
                    var count=1;
                    while(true){
                        if(count<=3){
                            var score = prompt("请输入第"+(i+1)+"门课的成绩：");
                            if(isNaN(score)){
                                alert("输入的成绩有误！")
                                count++;
                                continue
                            }else{
                                totalScore=totalScore+parseFloat(score);
                                break;
                            }
                        }else{
                            alert("成绩三次输入有误！")
                            return;
                        }
                    }
                }
                alert(num+"门课的总成绩为："+totalScore);
            }
        }

4.输出方式

console.log();//输出到控制台
document.write();//页面输出
//弹窗输出
alert();
confirm();
prompt()

5.String类型

1.charAt(index)  返回在指定位置的字符
2.indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置
3.substring([start，end)) :截取字符串 slice([start，end))
3.substr([start，count)) :截取字符串
4.split(str)：分割字符串

 var str = "lishuaiqi";
        console.log(str.indexOf("u"));//第一个出现的下标
        console.log(str.indexOf("n",4));
        console.log(str.charAt(6));//下标为6的字符
        console.log(str.substr(1,5));//(从几开始，截取几个)
        console.log(str.substring(1,5);
        console.log(str.slice(1,5));
        console.log(str.split("n").join("n"));


        var arr = ["1",2,{name:'lsq'},["1",2,3]];//字面量的方式创建数组
        var arr1 = new Array(3);//参数为数组的长度
        var arr4 = new Array();//参数为数组的长度

        console.log(arr4.length);//4
        console.log(arr.length);//4
        console.log(arr1.length);//3


        var arr2=new Array("1",2,3);//参数为数组的元素
        console.log(arr2.length);//3
        console.log(arr2[2]);//3
        arr2[2]=5;//3
        arr2[5]="zhangsan";//
        console.log(arr2);
        console.log(arr2.length);//6
        console.log(arr2[4]);//undefined

6.array

var arr = [4,1,7,3,9,2,11,22,33,44,55];

        console.log(arr.sort(fn));


        // 默认按照字符串排序
        // 定义下面的方法，将方法的名字当做参数传进去
        function fn(a,b) {
            return b-a;
        }//降序
         function fn(a,b) {
            return a-b;
        }//升序

7.变量

 let ： es6 新增了块级作用域 let声明的变量作用域在代码块内部

        var a = 1; //用var声明有变量提升的作用，提示指的位置的提升  var a  ; a=1

        b=2;//全局变量

        function f1() {
            b=2;//全局变量
            var c=1;
        }

8.数组

1.数组添加和移除元素

 var arr=["奥特曼","21","前端小白"];

1）push():在数组末尾添加一个元素；返回值为新数组的长度

  document.write(arr.push("河南"));
  document.write(arr+"<br>");

2）pop(): 在末尾移除一个元素  返回值为移除的那个元素

    document.write(arr.pop("河南"));
    document.write(arr+"<br>");

3）shift()：在开头移除一个元素 返回值为移除的那个元素

document.write(arr.shift("河南"));
document.write(arr+"<br>");

4）unshift()：在开头添加一个元素 返回值为新数组的长度

document.write(arr.unshift("河南"));
document.write(arr+"<br>");

  5）reverse():逆序

document.write(arr.reverse());

  6）sort(): 默认是按照字符串排序，需要自定义一个方法，将方法的名字当做参数来传递；

 7）concat():数组拼接,参数可以是数组，也可以是数组的元素
 8）slice(start，end):分割数组，[start，end),调用后原来的数组不会发生改变
 9）splice()方法：功能非常的强大，你可以实现元素的删除 替换 插入

     var arr=["李帅奇","21","java小白"];
        var arr1=[1,23,44,"a","2",1];

       //concat()方法

        console.log(arr.concat(arr1))
        console.log(arr.concat("a","2",1))
        console.log(arr);

        // slice()方法

        console.log(arr1.slice(1,4))
        console.log(arr1);



        // splice的删除功能
        // splice(start,deleteCount)

        console.log(arr1.splice(2,2));
        console.log(arr1)


        //splice的替换功能  arr1=[1,23,44,"a","2",1];
        //splice(start,deleteCount,"要插入的元素")

        console.log(arr1.splice(3,1,"b","c"));
        console.log(arr1.splice(3,1,arr));
        console.log(arr1)

        
        // splice的插入功能  arr1=[1,23,44,"a","2",1];
        //splice(start,deleteCount=0,"要插入的元素")
      
        console.log(arr1.splice(3,0,"b","c"));

        console.log(arr1)

2.逆序输出

 var str = "I Love You!";
 console.log(str.split("").reverse().join(""));

9.function

方法的声明：使用function关键字，在js中放发也是一个类型Function类型

 function 方法名字（参数列表）｛
       方法体
       [return 返回值]
｝

   //无参方法
        function f1() {
            alert("哈哈")
        }

        f1();
        alert(typeof f1);
        //有参方法
        function f2(name,age) {
            alert("姓名："+name+"年龄："+age)
        }
        f2("李帅奇","20");
        //匿名方法，将方法赋给一个变量
        var f3=function () {
            alert("f3")
        };
        f3();
        //通过构造方法创建方法 Function  ,retrun 之前都是参数列表

        var fn=new Function("a","b","var c = a+b; alert(134); return c");
        alert(fn);
        alert(typeof fn);

        console.log(fn(1,2));


        //匿名方法的自我执行
        (function (a,b) {
            alert(a+b);
        })(1,2);

          /*
           *
           * arguments对象:每个方法内部都有一个arguments对象
           *
           **/
        function f7() {
            var a =1;
            function f3() {
                alert("123")
            }

            //Set 方法
            var f4 =function (b) {
                a = a +b;
            };

            //get方法
            f6 = function () {
                return a;
            };

            return f4;
        }

        var f5 = f7();

        f5(1);
        alert(f6());
        f5(2);
        alert(f6());
        f5(3);
        alert(f6());
        f5(4);
        alert(f6());

10.Math对象的属性

alert(Math.E);		
     alert(Math.LN10);
     alert(Math.LN2);
     alert(Math.LOG2E);
    alert(Math.LOG10E);
    alert(Math.PI);
     alert(Math.SQRT1_2);
     alert(Math.SQRT2);	

    /*
    * Math.min()用于确定一组数值中的最小值。
    * Math.max()用于确定一组数值中的最大值。
    * */
     alert(Math.min(2,4,3,6,3,8,0,1,3));				//最小值
     alert(Math.max(4,7,8,3,1,9,6,0,3,2));			//最大值


    /*
    *
    *    Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
    *    Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
    *    Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；
    *
    * */

     alert(Math.ceil(25.9));						//26
     alert(Math.ceil(25.5));						//26
     alert(Math.ceil(25.1));						//26
    
     alert(Math.floor(25.9));						//25
     alert(Math.floor(25.5));						//25
     alert(Math.floor(25.1));						//25
    
     alert(Math.round(25.9));						//26
     alert(Math.round(25.5));						//26
     alert(Math.round(25.1));						//25


    alert(Math.ceil(-25.9));	 -25 -25.9 -25		//-25
    alert(Math.ceil(-25.5));						//
    alert(Math.ceil(-25.1));						//
    
     alert(Math.floor(-25.9));						//-26
     alert(Math.floor(-25.5));						//
     alert(Math.floor(-25.1));						//

    /*
    *
    * round()：当是负数时，不要管正负号，五舍六入
    *
    *
*/
    alert(Math.round(-25.9));						//-26
    alert(Math.round(-25.5));						//-25
    alert(Math.round(-25.50000001));						//-26
    alert(Math.round(-25.45));						//-25
    alert(Math.round(-25.1));						//-25


    /*
    *
    * 随机数random方法  0  0.00000001
    *   Math.random()方法返回介于0到1之间一个随机数
    *
    *   function getRandom(from,to) {
    *       return Math.floor(Math.random()*(to-from+1)+from)
    *   }
    *
    *
    * */

    //产生一个5到10的随机数  from ---- to
    Math.floor(Math.random()*(5+1)+5)


    //10 --- 17    7-11
    function getRandom(from,to) {
        return Math.floor(Math.random()*(to-from+1)+from)
    }

    for(var i =0;i<100;i++){
       console.log(getRandom(7,11))
    }

11.data

    var date = new Date();

    console.log(date);//现在时间
    console.log(date.getFullYear())//年
    console.log(date.getMonth())//0-11月
    console.log(date.getDate())//日
    console.log(date.getDay())//0-6 星期
    console.log(date.getHours())//小时
    console.log(date.getMinutes())//fen
    console.log(date.getSeconds())//秒
    console.log(date.getMilliseconds())//毫秒
    console.log(date.getTime())//距离时间戳已经过去多少毫秒
    console.log(date.getTime())
    var timestamp = date.getTime();


    var time = new Date(1238343426765);
    console.log(time)

    //创建一个指定时间点的date对象
    //var date1 = new  Date("8/8/2008");
    var date1 = new  Date(1218124800000);

    //alert(Date.parse("8/8/2008"))
    //alert(Date.parse("8/8/2008"))
    date1.setHours(8)
    date1.setMinutes(8)
    date1.setSeconds(8)
    alert(date1);

时间练习

网页显示现在时间，随着时间更新

 /*
    *
    * window对象的一个方法；
    *   setInterval(fn,time):间歇调用
    *  innerHTML:获取和设置元素的HTML内容
    *  innerText:获取和设置元素的文本内容（不包含html标签）
    *
    * */

    var h2 = document.getElementById("time");
    f1();

    function f1(){
        var time = new  Date();

        var year=time.getFullYear();
        var month=time.getMonth()+1;
        var date=time.getDate();
        var day=time.getDay();
        var hour=time.getHours();
        if(hour<10){
            hour=""+0+hour;
        }
        var min=time.getMinutes();
        if(min<10){
            min="0"+min;
        }
        var sec=time.getSeconds();
        if(sec<10){
            sec='0'+sec;
        }

        var apm='AM';
        if(hour>12){
            hour = hour-12;
            if(hour<10){
                hour=""+0+hour;
            }
            apm='PM';
        }

        switch (day) {
            case 0: day="星期日";
                break;
            case 1: day="星期一";
                break;
            case 2: day="星期二";
                break;
            case 3: day="星期三";
                break;
            case 4: day="星期四";
                break;
            case 5: day="星期五";
                break;
            case 6: day="星期六";
                break;
            default :day="时间错误";
        }

        var str = year+"年"+month+"月"+date+"日"+"&nbsp;"+hour+"点"+min+"分"+sec+"秒&nbsp;"+apm+"&nbsp;"+day;
        h2.innerHTML = str;
    }

    setInterval(f1,1000)

function clock_12h()
{
    var time=new Date();
    var year=time.getFullYear();
    var month=time.getMonth()+1;
    var date=time.getDate();
    var day=time.getDay();
    var hour=time.getHours();
    if(hour<10){
        hour="0"+hour;
    }
    var min=time.getMinutes();
    if(min<10){
        min="0"+min;
    }
    var sec=time.getSeconds();
    if(sec<10){
        sec='0'+sec;
    }
    var apm='AM';
    if(hour>12){
       hour=hour-12;
        apm='PM';
    }
switch (day){
    case 0: day="星期日";
        break;
    case 1: day="星期一";
        break;
    case 2: day="星期二";
        break;
    case 3: day="星期三";
        break;
    case 4: day="星期四";
        break;
    case 5: day="星期五";
        break;
    case 6: day="星期六";
        break;
    default :day="时间错误";
}
    var str="<h2>"+year+"年"+month+"月"+date+"日"+"&nbsp;"+hour+":"+min+":"+sec+"&nbsp;"+apm+"&nbsp;"+day+"</h2>"
    document.getElementById("myclock").innerHTML="<h2>你好，现在时间为：</h2>"+str;
    setTimeout("clock_12h()",1000);
}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
/*setInterval("clock_12h()",1000);*/
    setTimeout("clock_12h()",1000);

12.正则对象

1.创建正则表达式的两种方式
  1）通过构造方法的
  2）字面量的形式
      i: 忽略大小写
      g: global  全局匹配
      m: 多行匹配

    var reg1=new RegExp("i","ig");
    alert(typeof reg1);
    var reg2=/aaa/ig;
    alert(typeof reg2)

2. test()：匹配到返回true 匹配不到返回false

match()：返回匹配到的内容组成的数组
replace("被替换的子串","要替换成为的内容")：替换字符串
search(pattern)：返回字符串中pattern开始位置
split(pattern)：返回字符串按指定pattern拆分的数组

   var reg=new RegExp("i","ig");
   var str="LiSHUAiqi";
   console.log(reg.test(str)); console.log(reg.exec(str));
   console.log(str.match(reg));
   console.log(str.search("qi"))

13.BOM

1.window

    console.log(window);
    console.log(history);
    console.log(location);

history对象的方法
    back():后退一次
    forward():前进
    go(num): 前进或后退 num次 , 正数为前进，负数为后退。

function back() {
    //后退
    history.back();
}

location对象的方法 ：通过location对象可以得到地址栏相关的内容
          host         设置或返回主机名和当前URL的端口号
          hostname     设置或返回当前URL的主机名、
          href         设置或返回完整的URL
          reload()     重新加载当前文档
          replace()    用新的文档替换当前文档

 host: "localhost:63342"
        hostname: "localhost"
        href: "http://localhost:63342/JS/1206/5_location.html?_ijt=1nptaf6no2qreqpq5uo0em3qve"
        origin: "http://localhost:63342"
        pathname: "/JS/1206/5_location.html"
        port: "63342"
        protocol: "http:"
    console.log(location);

    function refresh() {
        location.reload();//重新加载当前页面

    }

    function go() {
        //location.href="https://www.baidu.com";//第一种方式跳转  直接给href属性赋值
        location.replace("https://www.baidu.com");//第一种方式跳转  通过replace方法()
    }


    
        channelmode=yes|no|1|0	//是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
        directories=yes|no|1|0	//是否添加目录按钮。默认是肯定的。仅限IE浏览器
        fullscreen=yes|no|1|0	//浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
        height=pixels	//窗口的高度。最小.值为100
        left=pixels	//该窗口的左侧位置
        location=yes|no|1|0	//是否显示地址字段.默认值是yes
        menubar=yes|no|1|0	//是否显示菜单栏.默认值是yes
        resizable=yes|no|1|0	//是否可调整窗口大小.默认值是yes
        scrollbars=yes|no|1|0	//是否显示滚动条.默认值是yes
        status=yes|no|1|0	//是否要添加一个状态栏.默认值是yes
        titlebar=yes|no|1|0	//是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
        toolbar=yes|no|1|0	//是否显示浏览器工具栏.默认值是yes
        top=pixels	//窗口顶部的位置.仅限IE浏览器
        width=pixels	//窗口的宽度.最小.值为100
      function fn() {
        open("https://www.baidu.com","百            度","width=1000,height=400,top=200,left=400,scrollbars=no,resizable=no")

    }

clearInterval(timeId)： 停止间歇调用 ，timeId为启动时方法的返回值
clearTimeout(timeId)： 停止setTimeout

 setTimeout(function () {
        alert("haha");
    },2000)



    //下面的代码 相当于 setInterVal()
    fn();
    function fn() {
        console.log(new Date());
        setTimeout(fn,1000);
    }

 /*
    *
    * document: 整个的页面对象，页面中的所有内容，都可通过document对象的属性或者方法获取到；
    *
    * */
    console.log(document);
    console.log(document.body);//获取body元素
    console.log(document.forms);//获取页面中所s有 form表单元素组成的集合
    console.log(document.links);//获取页面中所有 超链接 a元素组成的集合


    /*
    *
    * 获取script标签中所有内容
    *
    * */
    console.log(document.all[12].innerHTML);
    console.log(document.scripts[0].innerHTML);


    /*
    * dom:通过js实现页面中标签的
    * 获取页面元素的集中方式：
    *   document.getElementById
    *   document.getELementsByTagName; 标签名
    *   document.getELementsByClassName; class名字
    *   document.getELementsByName;    name属性
    *
    * */

14.节点

   var d1 = document.getElementById("d1");
   /*
   *
   * 把 div当做节点去对待；
   *
   * */
   console.log(d1);
   console.log("--------------------");
   //元素节点
   console.log(d1.nodeName);
   console.log(d1.nodeValue);
   console.log(d1.nodeType);

   console.log("--------------------");
   //
    var attr = d1.getAttributeNode("id");
   console.log(attr.nodeName);
   console.log(attr.nodeValue);
   console.log(attr.nodeType);

   console.log("--------------------");
   var textNode = d1.childNodes[0];
   console.log(textNode.nodeName);
   console.log(textNode.nodeValue);
   console.log(textNode.nodeType);

15.事件的绑定方式

//1.直接在元素上面添加事件属性
<div onclick="事件触发要执行的js代码"></div>
<div onclick="fn()"></div>
//2.先选中元素在添加事件
var d1 = document.getElementById("d1");
d1.onclick=fn;
//3. 添加事件监听,绑定多次每次都触发。
var d2 = document.getElementById("d2");
d2.addEventListener("事件类型（不要带on）",fn事件处理的函数，捕获or冒泡)

16.类型事件


    <style >
        div{
            width:200px;
            height:200px;
            background: skyblue;
            margin-bottom: 20px;
        }

        .c1{
            border: 1px salmon solid;
        }
    </style>

    <script >

        /*
        *
        * js的延迟加载：页面中所有元素的内容加载完成之后，才执行；
        *
        * */
        window.onload=function () {
            var input = document.getElementsByTagName("input")[0];
            input.onfocus=function () {
                alert("获取焦点时触发");
            }
        }

        window.onunload=function () {
            alert("确定要离开此页面吗？");
        }



        window.onresize=function () {
            console.log(1111);
        }

    </script>
</head>
<body >
<div id="d1">
    <input type="text" value="zhansan">
</div>

<form id="f1" action="#">
    <input type="text" value="zhansan">
    <button type="reset">重置</button>
    <button type="submit">提交</button>
</form>

<a href="https://www.baidu.com">百度</a>


<script >
    /*
    *
    * onblur:失去焦点时触发
    *
    **/
    var input = document.getElementsByTagName("input")[0];
    input.onblur=function () {
        var value = input.value;
        if(value.length>5){
            alert("输入内容有误！！！");
            input.setAttribute("class","c1");
        }
    }

    /*
    *
    * onchange:内容发生改变，并失去焦点时触发
    *
    **/
    var input = document.getElementsByTagName("input")[0];
    input.onchange=function () {
        alert("您改变了input的内容！！！");
    }


    /*
   *
   * onfocus:获取焦点时触发
   *
   **/
    var input = document.getElementsByTagName("input")[0];
    input.onfocus=function () {
        alert("获取焦点时触发");
    }


    /*
    *
    * onkeydown :当按键被按下时
    * onkeypress : 当按键被按下然后松开时
    * onkeyup : 当按键被松开时
    *
    **/

    var input = document.getElementsByTagName("input")[0];
    var i = 0
    input.onkeydown=function (e) {
        console.log("onkeydown");
        console.log(e);

    }

    input.onkeypress=function (e) {
        console.log("onkeypress");
        console.log(e);
    }
    input.onkeyup=function () {
        console.log("onkeyup");
    }

    /*
    *
    * onmouseover和onmouseout 鼠标移入和移出(子元素也会触发)
    *
    *
    **/
    var div = document.getElementById("d1");
    div.onmouseover=function () {
        console.log("onmouseover");
    }

    div.onmouseout=function () {
        console.log("onmouseout");
    }


    div.onmouseenter=function () {
        console.log("onmouseenter");
    }

    div.onmouseleave=function () {
        console.log("onmouseleave");
    }


    /*
    *
    * 表单的重置和提交事件
    *
    **/
    document.forms[0].onreset=function () {
        alert("重置触发！！");
    }

    document.forms[0].onsubmit=function () {

        if(true){
            alert("用户名不符合规则！！！");
            document.getElementsByTagName("input")[1].focus();

            return false;//阻止表单提交，让此事件处理方法返回false；
        }
        alert("提交触发！！");
        return false;//阻止表单提交，让此事件处理方法返回false；
    }


    /*
   *
   * onselect:当选择一个表单对象时
   *
   **/
    var input = document.getElementsByTagName("input")[1];
    input.onselect=function () {
        alert("onselect");
    }




</script>

</body>
</html>