为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript进阶篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • 算术操作符 比较操作符 逻辑操作符 "="赋值符号

    如果同级的运算是按从左到右次序进行,多层括号由里向外


    查看全部
  • jq1=  numa>numb    ;

    jq2=  numa!=numb    ;

    document.write("numa大于numb的分数吗?"+jq1+"<br>")

    document.write("numa不等于numb的分数吗?"+ jq2);

    结果只有布尔类型  TRUE 或者 FALSE


    查看全部
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>声明变量</title>

    <script type="text/javascript">

    1、变量声明:  var 变量名;

       var mynum;

       var mynum,mystr;


    2、变量赋值

       var mynum=5;

       var mynum="一二三";

       

    3、创建数组

       var myarray=new Array();

       var myarray= new Array(8);   //存储8个数据


    4、使用数组元素

       document.write("第二人的姓名是:"+myarr[1]);


    5、了解数组数量(长度length)

      var mystr=[11,22,33,44,55];

      document.write(mystr.length);  //   输出等于5


    6、二维数组的定义:myarray[ ][ ]

      var myarr=new Array();  //先声明一维 

       for(var i=0;i<2;i++)   //一维长度为2

       {   

       myarr[i]=new Array();  //再声明二维 

       for(var j=0;j<3;j++)   //二维长度为3

       {   

       myarr[i][j]=i+j;       // 赋值,每个数组元素的值为i+j

       }

     }

     

    7、switch语句

       switch(表达式)

       {

        case值1:

          执行代码块 1

           break;

       }

           

       var myweek =3;//myweek表示星期几变量

       ?(myweek)

       {

        case 1:

        case 2:

        document.write("学习理念知识");

        break;

       }

       

    8、定义函数

        function  函数名( )

        {

         函数体;

        }

        

        

    9、有参数的函数

        function 函数名(参数1,参数2)

        {

         函数代码

        }

        /*xxxxxxxxxxxxxxxxxxxxxxxxxx*/

       function add2(x,y)

        {

       sum = x + y;

       document.write(sum);

       return sum;          //返回值

        }

        add2(1,2);

        add2(3,1);       //函数的调用

        

    10、事件

        单击事件:<input name="点击我" type="button" value="点击我" onClick="openwin()"/>  //openwin()为函数

        

        鼠标经过事件:<input name="确定" type="button" value="确定" onmouseover="message()"/>

        

        鼠标移开事件:<a href="http://www.imooc.com" onmouseout="message()">点击我</a>

        

        光标聚集事件:<form><select name="career"  onfocus="message()"> 

                      <option>学生</option> 

                      </select></form>   

                      //文本框的时候

        失焦事件:用户:<input name="username" type="text" value="请输入用户名!" onblur="message()" > //文本框

        

        内容选中事件:<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea> 

                          //选中内容时会弹出

                          

        文本框内容改变事件:<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>

                          //内容修改后会弹出

                          

        加载事件:<body onload="message()">欢迎学习JavaScript。</body>  //加载完成后会弹出

        

        卸载事件:<script type="text/javascript">   

                  window.onunload = onunload_message;   

                     function onunload_message(){   

                     alert("您确定离开该网页吗?");   

                     }                     //当关闭页面的时候会弹出

                

    11、对象

        访问对象属性的语法:objectName.propertyName(mynum.length)

        访问对象的方法:objectName.methodName()   (var request=mystr.toUpperCase(); //使用字符串对象方法)

        

    12、日期对象

        var Udate=new Date();

        document.write(Udate);            //输出日期

        

        返回/设置年份方法:var mydate=new Date(); 

                           var myyear=mydate.getFullYear();   //获取年份

                           mydate.setFullYear(2019);          //修改年份

                           

        返回星期发法:var mynum=mydate.getDay();

        

        返回/设置时间的方法:var mydate=new Date();

                             document.write("当前时间:"+mydate+"<br>");

                             mydate.setTime(mydate.getTime() + 60 * 60 * 1000);  //推辞一小时

                             

        返回指定位置字符:(stringObject.charAt(index))

                          <script type="text/javascript">

                          var mystr="I love JavaScript!"

                          document.write(mystr.charAt(2));    //返回第二个位置的字符

                          

        返回指定字符串首次出现的位置:(stringObject.indexOf(substring, startpos))

                        var str="I love JavaScript!"

                          document.write(str.indexOf("I") + "<br />");

                          document.write(str.indexOf("v") + "<br />");

                          document.write(str.indexOf("v",8));   //8为开始索引的位置

                    

        字符串分割:stringObject.split(separator(分割的字符),limit(分割的次数))

                   var mystr = "www.imooc.com";

                   document.write(mystr.split(".")+"<br>");

                   document.write(mystr.split(".", 2)+"<br>");

                   document.write(mystr.split("", 5));      //空格的话就全部都要分割

                   

        提取字符串:stringObject.substring(startPos(一个非负整数开始的位置),stopPo(结束的位置)) 

                    var mystr="I love JavaScript";

                    document.write(mystr.substring(7));

                    document.write(mystr.substring(2,6));    //当开始比结束小,会交换两个参数

                    

        提取指定数目的字符串:(stringObject.substr(startPos(起始位置),length(长度))) 

                              var mystr="I love JavaScript!";

                              document.write(mystr.substr(7));

                              document.write(mystr.substr(2,4));    //输出love,是下标,从0开始

                              

    13、Math对象

        向上取整:Math.ceil(x)

                 document.write(Math.ceil(0.8) + "<br />")   //输出1

        

        向下取整:Math.floor()

                 document.write(Math.floor(0.8)+ "<br>")     //输出0

                 

        四舍五入:Math.round(x)

                 document.write(Math.round(1.6)+ "<br>");    //输出2

                 document.write(Math.round(0.49)+ "<br>");   //输出0

                 

        随机数:Math.random();

                 document.write(Math.random());              //输出0到10的随机数

                 

    14、数组对象

        数组的连接:arrayObject.concat(array1,array2,...,arrayN)

                   var mya1= new Array("hello!")

                   var mya2= new Array("I","love");

                   var mya3= new Array("JavaScript","!");

                   var mya4=mya1.concat(mya2,mya3);      //连接2 3数组赋值给mya4

                   document.write(mya4);     

                   

        指定分隔符连接数组:arrayObject.join(分隔符)

                   var myarr = new Array(3)

                   myarr[0] = "I";

                   myarr[1] = "love";

                   myarr[2] = "JavaScript";

                   document.write(myarr.join("."));

                   

        颠倒数组元素顺序:arrayObject.reverse()

                   var myarr = new Array(3)

                    myarr[0] = "1"

                    myarr[1] = "2"

                    myarr[2] = "3"

                    document.write(myarr + "<br />")

                    document.write(myarr.reverse())     //原先为123 输出为321颠倒了

                    

        选定元素:arrayObject.slice(start,end)

                    var myarr = new Array(1,2,3,4,5,6);

                     ocument.write(myarr + "<br>");

                     document.write(myarr.slice(2,4) + "<br>");   //输出 2  4 下标位置的数字  3 4

                     document.write(myarr);

                    

        数组排序:arrayObject.sort(方法函数)

                 <script type="text/javascript">

                  function sortNum(a,b) {

                       return a - b;

                      //升序,如降序,把“a - b”该成“b - a”

                 }

                  var myarr = new Array("80","16","50","6","100","1");

                  document.write(myarr + "<br>");

                 document.write(myarr.sort(sortNum));   //按从小到大的顺序

                   // 若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。

                   // 若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。

                   // 若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

    </script>

        

    </script> 

        

    </script>

    </head>

    <body>

    </body>

    </html>


    查看全部
    0 采集 收起 来源:让你认识JS

    2018-11-01

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>声明变量</title>

    <script type="text/javascript">

    1、变量声明:  var 变量名;

       var mynum;

       var mynum,mystr;


    2、变量赋值

       var mynum=5;

       var mynum="一二三";

       

    3、创建数组

       var myarray=new Array();

       var myarray= new Array(8);   //存储8个数据


    4、使用数组元素

       document.write("第二人的姓名是:"+myarr[1]);


    5、了解数组数量(长度length)

      var mystr=[11,22,33,44,55];

      document.write(mystr.length);  //   输出等于5


    6、二维数组的定义:myarray[ ][ ]

      var myarr=new Array();  //先声明一维 

       for(var i=0;i<2;i++)   //一维长度为2

       {   

       myarr[i]=new Array();  //再声明二维 

       for(var j=0;j<3;j++)   //二维长度为3

       {   

       myarr[i][j]=i+j;       // 赋值,每个数组元素的值为i+j

       }

     }

     

    7、switch语句

       switch(表达式)

       {

        case值1:

          执行代码块 1

           break;

       }

           

       var myweek =3;//myweek表示星期几变量

       ?(myweek)

       {

        case 1:

        case 2:

        document.write("学习理念知识");

        break;

       }

       

    8、定义函数

        function  函数名( )

        {

         函数体;

        }

        

        

    9、有参数的函数

        function 函数名(参数1,参数2)

        {

         函数代码

        }

        /*xxxxxxxxxxxxxxxxxxxxxxxxxx*/

       function add2(x,y)

        {

       sum = x + y;

       document.write(sum);

       return sum;          //返回值

        }

        add2(1,2);

        add2(3,1);       //函数的调用

        

    10、事件

        单击事件:<input name="点击我" type="button" value="点击我" onClick="openwin()"/>  //openwin()为函数

        鼠标经过事件:<input name="确定" type="button" value="确定" onmouseover="message()"/>

        鼠标移开事件:<a href="http://www.imooc.com" onmouseout="message()">点击我</a>

        光标聚集事件:<form><select name="career"  onfocus="message()"> 

                      <option>学生</option> 

                      </select></form>                               //文本框的时候

        失焦事件:用户:<input name="username" type="text" value="请输入用户名!" onblur="message()" > //文本框

        内容选中事件:<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea> 

                          //选中内容时会弹出

        文本框内容改变事件:<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>

                          //内容修改后会弹出

        加载事件:<body onload="message()">欢迎学习JavaScript。</body>  //加载完成后会弹出

        卸载事件:<script type="text/javascript">   

                  window.onunload = onunload_message;   

                     function onunload_message(){   

                     alert("您确定离开该网页吗?");   

                     }                     //当关闭页面的时候会弹出

        

    </script> 

        

    </script>

    </head>

    <body>

    </body>

    </html>


    查看全部
  • Javascript 区分大小写

    查看全部
    0 采集 收起 来源:让你认识JS

    2018-11-01

  • 认识DOM

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

    先来看看下面代码:

    将HTML代码分解为DOM节点层次图:

    HTML文档可以说由节点构成的集合,DOM节点有:

    1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

    2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

    3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

    节点属性:

    遍历节点树:

    以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

    DOM操作:

    注意:前两个是document方法。


    查看全部
    0 采集 收起 来源:认识DOM

    2018-11-01

  • 定义函数

    如何定义一个函数呢?看看下面的格式:

    function  函数名( ) {      函数体; }

     

    function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。

    我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字:“add2”,代码如下:

    <script type="text/javascript">   function add2(){     sum = 3 + 2;     alert(sum);   }   add2(); </script>


    查看全部
    0 采集 收起 来源:定义函数

    2018-11-01

  • 函数调用

    函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。

    第一种情况:在<script>标签内调用。

     <script type="text/javascript">     function add2()     {          sum = 1 + 1;          alert(sum);     }   add2();//调用函数,直接写函数名。 </SCRIPT>

    第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

    <html> <head> <script type="text/javascript">    function add2()    {          sum = 5 + 6;          alert(sum);    } </script> </head> <body> <form> <input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件,直接写函数名 </form> </body> </html>

     

    注意:鼠标事件会在后面讲解。


    查看全部
    0 采集 收起 来源:函数调用

    2018-11-01

  • 有参数的函数 上节中add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式: function 函数名(参数1,参数2) {     函数代码 } 注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。 按照这个格式,函数实现任意两个数的和应该写成: function add2(x,y) {   sum = x + y;   document.write(sum); } x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。 例如,add2(3,4)会求3+4的和,add2(60,20)则会求出60和20的和。

    查看全部
    0 采集 收起 来源:有参数的函数

    2018-11-01

  • %为求余运算,即2%10=2;10%2=0;10%3=1.

    ++a相当于a+1,--b相当于b-1.

    查看全部
    0 采集 收起 来源:编程练习

    2018-11-01

  • 屏幕分辨率的高和宽

    window.screen 对象包含有关用户屏幕的信息。
    1. screen.height 返回屏幕分辨率的高
    2. screen.width 返回屏幕分辨率的宽
    注意:
    1.单位以像素计。
    2. window.screen 对象在编写时可以不使用 window 这个前缀。
    我们来获取屏幕的高和宽,代码如下:

    <script type="text/javascript">   document.write( "屏幕宽度:"+screen.width+"px<br />" );   document.write( "屏幕高度:"+screen.height+"px<br />" ); </script>


    查看全部
  • screen对象

    screen对象用于获取用户的屏幕信息。

    语法:

    window.screen.属性

    对象属性:


    查看全部
    0 采集 收起 来源:screen对象

    2018-11-01

  • Navigator对象

    Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

    对象属性:

    查看浏览器的名称和版本,代码如下:

    <script type="text/javascript">    var browser=navigator.appName;    var b_version=navigator.appVersion;    document.write("Browser name"+browser);    document.write("<br>");    document.write("Browser version"+b_version); </script>


    查看全部
    0 采集 收起 来源:Navigator对象

    2018-11-01

  • 这里需要注意的是删除必须要从后面开始删,因为如果从前面开始删的话,删一次数组对于content.childNodes[i]就要从新排序,再删除一个元素时还是从0下标开始删,这样可能就会点击按钮多次。。

    查看全部
  • <script type="text/javascript">


      //通过javascript的日期对象来得到当前的日期,并输出。

      var date=new Date();

      var year=date.getFullYear();

      var month=date.getMonth();

      var day=date.getDay();

      var weekday=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];

      var wek=weekday[day];


      //成绩是一长窜的字符串不好处理,找规律后分割放到数组里更好操作哦

      var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";

      var chengji=scoreStr.split(";");

      var sum=0;

      var jun=0;


      //从数组中将成绩撮出来,然后求和取整,并输出。

      for(var i=0;i<chengji.length;i++){

         var num=chengji[i].slice(3,5);

         sum=parseInt(sum)+parseInt(num);

      }

      jun=Math.round(sum/i);

      document.write(year+"年"+month+"月"+day+"日"+" "+wek+"--班级平均分为:"+jun);

    </script>


    查看全部
    0 采集 收起 来源:编程练习

    2018-10-31

举报

0/150
提交
取消
课程须知
你需要具备HTML、css基础知识,建议同学们也可以想学习下js入门篇,快速认识js,熟悉js基本语法,更加快速入手进阶篇!
老师告诉你能学到什么?
通过JavaScript学习,掌握基本语法,制作简单交互式页面
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!