美文网首页
JS基础笔记

JS基础笔记

作者: 婉卿容若 | 来源:发表于2017-01-22 15:28 被阅读60次

    基础知识

    记这个笔记,我把自己当脑残看待

    调用

    1. js代码书写位置: 可以写在 html 文件中(通常在 head/body 中, html 文件执行按照从上到下顺序,所有根据需求安排位置)
      输出内容用""括起,直接输出""号内的内容
    <script type="text/javascript">
                 document.write(mystr + "开启JS之旅!"); // 输出多项内容,内容之间用+号连接
                 document.write(mystr+"<br>"); // 输出HTML标签,并起作用,标签使用""括起来。
            </script>
    
    1. 引用外部 js 文件:其中"script.js"是 js 文件名
    <script src="script.js"></script>
    

    基本语法

    1. 直接向 HTML 输出流写内容:
    document.write("Hello world");
    
    1. 弹框: alert("Hello world");
     function rec(){
        var mychar="I love JavaScript";
        alert(mychar)
      }
    
    1. JS 中变量命名区分大小写

    2. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

    3. 消息对话框
      => 确认: confirm

     function rec(){
        var mymessage= confirm("你的性别是女士?")        ;
        if(mymessage==true)
        {
            document.write("你是女士!");
        }
        else
        {
            document.write("你是男士!");
        }
      }    
    

    => 提问: prompt

     function rec(){
        var score; //score变量,用来存储用户输入的成绩值。
        score = prompt("请输入你的成绩","10");
        if(score>=90)
        {
           document.write("你很棒!");
        }
        else if(score>=75)
        {
           document.write("不错吆!");
        }
        else if(score>=60)
        {
           document.write("要加油!");
        }
        else
        {
           document.write("要努力了!");
        }
      }
    
    1. 打开窗口: window.open([URL], [窗口名称], [参数字符串])

    URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。 窗口名称:可选参数,被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_self"具有特殊意义的名称。 _blank:在新窗口显示目标网页 _self:在当前窗口显示目标网页 _top:框架网页中在上部窗口中显示目标网页 3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。 4.name 不能包含有空格。 参数字符串:可选参数,设置窗口参数,各参数用逗号隔开.

    参数表.jpg
    function Wopen(){
    window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0');
      } 
    
    1. 关闭窗口: <窗口对象>.close(); //关闭指定的窗口
     var mywin=window.open("http://www.imooc.com");
     mywin.close();
    

    DOM(Document Object Model)

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

    三种常见的 DOM 节点:

    • 元素节点: 即标签
    • 文本节点
    • 属性节点
    节点结构(图片来自网络).jpg
    • 通过 ID 获取标签: 获取的元素是一个对象,如果想要对元素进行操作,我们要通过它的属性或方法
    document.getElementById("id");
    
    • innerHTML: 属性, 用于获取或替换 HTML 元素的内容
      语法: Object.innerHTML

    注意:
    1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
    2.注意书写,innerHTML区分大小写。`

    <body>
    <h2 id="con">javascript</H2>
    <p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
    <script type="text/javascript">
      var mychar=  document.getElementById("con")         ;
      document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
      mychar.innerHTML = "Hello World";
      document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
    </script>
    </body>
    

    输出:

    Hello World
    JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。
    原标题:javascript
    修改后的标题:Hello World

    • 改变 HTML 样式: HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
      语法: Object.style.property=new style;
    基本属性表.jpg

    注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

    <body>
      <h2 id="con">I love JavaScript</H2>
      <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
      <script type="text/javascript">
        var mychar= document.getElementById("con");
        mychar.style.color = "red";
        mychar.style.background = "#CCC";
        mychar.style.width = "500px";
     
      </script>
    </body>
    
    • 显示和隐藏(display 属性)
      语法:Object.style.display = value
    value取值.jpg
    <title>display</title>
       <script type="text/javascript"> 
           function hidetext()  
           {  
           var mychar = document.getElementById("con");
           mychar.style.display = "none";
           }  
           function showtext()  
           {  
           var mychar = document.getElementById("con");
           mychar.style.display = "block";
           }
       </script> 
    </head> 
    <body>  
       <h1>JavaScript</h1>  
       <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> 
       <form>
          <input type="button" onclick="hidetext()" value="隐藏内容" /> 
          <input type="button" onclick="showtext()" value="显示内容" /> 
       </form>
    </body> 
    
    • 控制类名(className 属性)
      语法:object.className = classname

    作用:
    1.获取元素的class 属性
    2.为网页内的某个元素指定一个css样式来更改该元素的外观

    <style>
        body{ font-size:16px;}
        .one{
            border:1px solid #eee;
            width:230px;
            height:50px;
            background:#ccc;
            color:red;
        }
        .two{
            border:1px solid #ccc;
            width:230px;
            height:50px;
            background:#9CF;
            color:blue;
        }
        </style>
    </head>
    <body>
        <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <input type="button" value="添加样式" onclick="add()"/>
        <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <input type="button" value="更改外观" onclick="modify()"/>
    
        <script type="text/javascript">
           function add(){
              var p1 = document.getElementById("p1");
              p1.className = "one";
           }
           function modify(){
              var p2 = document.getElementById("p2");
              p2.className = "two";
           }
        </script>
    </body>
    
    • 恢复默认设置
      语法: obj.removeAttribute("style");

    完整实例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
    body{font-size:12px;}
    #txt{
        height:400px;
        width:600px;
        border:#333 solid 1px;
        padding:5px;}
    p{
        line-height:18px;
        text-indent:2em;}
    </style>
    </head>
    <body>
      <h2 id="con">JavaScript课程</H2>
      <div id="txt"> 
         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色" onclick="mColor()" />  
        <input type="button" value="改变宽高" onclick="mWH()" />
        <input type="button" value="隐藏内容" onclick="hiddenContent()" />
        <input type="button" value="显示内容" onclick="showContent()" />
        <input type="button" value="取消设置" onclick="cancelSetting()" />
      </form>
      <script type="text/javascript">
    //定义"改变颜色"的函数
        function mColor(){
        var myH = document.getElementById("txt");
        myH.style.color = "red";
        myH.style.backgroundColor = "#CCC";
    }
    
    
    //定义"改变宽高"的函数
        function mWH(){
         var myH = document.getElementById("txt");
         myH.style.width = "1000px";
         myH.style.height = "800px";
    }
    
    //定义"隐藏内容"的函数
        function hiddenContent(){
         var myH = document.getElementById("txt");
         myH.style.display = "none";
    }
    
    //定义"显示内容"的函数
        function showContent(){
         var myH = document.getElementById("txt");
         myH.style.display = "block";
    }
    
    //定义"取消设置"的函数
        function cancelSetting(){
         var myH = document.getElementById("txt");
         var tip = confirm("是否取消设置")
         if (tip==true){
             myH.removeAttribute("style");
         }
         else{
         }
    }
    
    
      </script>
    </body>
    </html>
    

    事件,交互

    JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
    onclick/onmouseover/onmouseover/onchange/onselect/onfocus/onblur/onload/onunload


    主要事件表.png
    • onclick: 鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。
    <script type="text/javascript">
      function openwin(){
         window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
    </script>
    </head>
    <body>
      <form>
        <input name="点击我" type="button" value="点击我" onclick="openwin()"/>
      </form>
    </body>
    
    • onmouseover:鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。
    <script type="text/javascript">
        function message(){
          confirm("请输入密码后,再单击确定!"); }
    </script>
    </head>
    <body>
    <form>
    密码:<input name="password" type="password" >
    <input name="确定" type="button" value="确定" onmouseover="message()"/>
    </form>
    </body>
    
    • onmouseout: 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
    <script type="text/javascript">
      function message(){
        alert("不要移开,点击后进行慕课网!"); }
    </script>
    </head>
    <body>
    <form>
      <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
    </form>
    </body>
    
    • onfocus: 当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。

    • onblur: onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

    <script type="text/javascript">
      function message(){
        alert("请确定已输入密码后,在移开!"); }
    </script>    
    </head>
    <body>
      <form>
       用户:<input name="username" type="text" value="请输入用户名!" onblur="message()" >
       密码:<input name="password" type="text" value="请输入密码!" >
      </form>
    </body>
    
    • onselect: 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
    <script type="text/javascript">
      function message(){
        alert("您触发了选中事件!"); }
    </script>    
    </head>
    <body>
      <form>
      个人简介:<br>
       <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
      </form>
    </body
    
    • onchange: 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
    <script type="text/javascript">
      function message(){
        alert("您改变了文本内容!"); }
    </script>    
    </head>
    <body>
      <form>
      个人简介:<br>
       <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>
      </form>
    </body>
    
    • onload: 事件会在页面加载完成后,立即发生,同时执行被调用的程序。

    注意:
    1.加载页面时,触发onload事件,事件写在<body>标签内。
    2.此节的加载页面,可理解为打开一个新页面时。

    <script type="text/javascript">
      function message(){
        alert("加载中,请稍等…"); }
    </script>    
    </head>
    <body onload="message()">
      欢迎学习JavaScript。
    </body>
    
    • onunload: 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。
      注意:不同浏览器对onunload事件支持不同。
    <script type="text/javascript">   
         window.onunload = onunload_message;   
         function onunload_message(){   
            alert("您确定离开该网页吗?");   
        }   
    </script>   
    </head>
    <body>
      欢迎学习JavaScript。
    </body>
    

    JavaScript 内置对象

    JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法

    • Date: 日期对象,可以存储任意一个日期,并且可以精确到毫秒数
    var initDate = new Date(); // 初值为当前系统的时间
    var d =  new Date(2017, 1, 13); // 2017.1.13
    var dd = new Date('January 13, 2017');
    
    Date 对象的常用方法.png
    • String: 字符串
      基本方法:
      1.toUpperCase/toLowerCase: 字母大小写转换
      2.stringObject.charAt(index): 返回指定位置的字符
      3.indexOf():返回某个指定的字符串值在字符串中首次出现的位置
      语法:stringObject.indexOf(substring, startpos)
      subString:必需,需要检索的字符串.
      startpos:可选,字符串开始检索的位置.它的合法取值是0-str.length-1.省略时则将字符串的首字符开始检索

    说明:
    1.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 substring。
    2.可选参数,从stringObject的startpos位置开始查找substring,如果没有此参数将从stringObject的开始位置查找。
    3.如果找到一个 substring,则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
    注意:
    1.indexOf() 方法区分大小写。
    2.如果要检索的字符串值没有出现,则该方法返回 -1。

    1. split(): 字符串分割,将字符串分割成数组,并返回此数组
      语法:stringObject.split(separator,limit)
      separator: 必需,从该参数指定的地方分割字符串
      limit: 可选,分割的次数.如设置该参数,返回的子串不会多于这个参数指定的数组,反之,则无限制
      注意:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

    2. substring(): 提取字符串中介于两个指定下标之间的字符.
      **语法: stringObject.substring(startPos,stopPos) **
      startPos: 必需, 一个非负整数,开始位置
      stopPos: 可选,一个非负整数,结束位置.如果省略该参数,那么返回的子串一直到字符串对象的结尾.

    注意:
    1.返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符,其长度为 stop 减start。
    2.如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
    3.如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。

    6.** substr()**: 从字符串中提取从 startPos位置开始的指定数目的字符串。
    注意:stringObject.substr(startPos,length)
    startPos: 必需,要提取的子串的起始位置.必须是数值
    length: 可选, 提取字符串的长度.如果省略,返回从 stringObject的开始位置到stringObject的结尾的字符.

    注意:如果参数startPos是负数,从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
    如果startPos为负数且绝对值大于字符串长度,startPos为0。

    1. Math: 提供数据的数学计算.
      注意:Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
    Math' properties.png Math' methods.png

    ceil( x): 对一个数进行向上取整,返回的是大于或等于x ,并且与 x最接近的整数
    floor(x):对一个数进行向下取整,返回的是小于或等于x ,并且与 x最接近的整数
    round(x): 把一个数字四舍五入为最接近的整数

    注意:

    1. 返回与 x 最接近的整数。
    2. 对于 0.5,该方法将进行上舍入。(5.5 将舍入为 6)
    3. 如果 x 与两侧整数同等接近,则结果接近 +∞方向的数字值 。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6)

    random(): 返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。
    注意:因为是随机数,所以每次运行结果不一样,但是0 ~ 1的数值。

    Array: 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的

    var arr01 = new Array(); // 定义空数组
    var arr02 = new Array(10) ; // 定义长度为10的数组
    var arr03 = [1, "i", "fm"]; // 直接初始化数据  
    
    array' methods.png

    contact():数组连接,用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组

    join(): 指定分隔符连接数组,用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。返回一个字符串,该字符串把数组中的各个元素串起来.
    语法: arrayObject.join(separator)

    separator:可选,指定要使用的分隔符.如果省略该参数,则使用逗号作为分隔符

    reverse(): 颠倒数组元素顺序
    语法: arrayObject.reverse()
    注意:该方法会改变原来的数组,而不会创建新的数组

    slice(): 选定元素,从已有的数组中返回选定的元素.
    语法: arrayObject.slice(start,end)
    start:必需, 规定从何处开始选取.如果是负数的话,它规定从数组尾部开始算起的位置.
    end: 可选,规定从何处结束选取.如果没有指定该参数,那么切分的数组从 start 到数组结束的所有元素.如果这个参数是负的,那么规定是从数组的尾部开始算起.
    返回一个新数组,不会修改原数组

    sort(): 数组排序.
    语法: arrayObject.sort(方法函数)
    方法函数:排序函数,必须是函数

    1.如果不指定<方法函数>,则按unicode码顺序排列。
    2.如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。
    注意: 该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
    若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
    若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
    若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

    实例代码:

    <script type="text/javascript">
    
      //通过javascript的日期对象来得到当前的日期,并输出。
      var today = new Date();
      document.write(today.getFullYear() + "年" + today.getMonth() + 1 + "月" + today.getDate() + "日" + "  ");
      var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
      document.write(weekday[today.getDay()] + "--");
    
      
      
      //成绩是一长窜的字符串不好处理,找规律后分割放到数组里更好操作哦
      var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
      var arr = scoreStr.split(";");
    
      //从数组中将成绩撮出来,然后求和取整,并输出。
      var sum = 0;
      for(var i = 0; i < arr.length; i++){
        var s = arr[i];
        var ss = s.substr(s.indexOf(":") + 1);
        sum = parseInt(sum) + parseInt(ss); 
    
      }
      document.write("班级总分为" + Math.round(sum/arr.length));
    
    </script>
    ```
    
    ***
     ### 浏览器对象
    
    1. window对象: window 对象是 BOM的核心, window对象指当前的浏览器窗口.
    ![window 对象方法.jpg](https://img.haomeiwen.com/i565029/d1ffd860eeb9a735.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 
    
    2. 计时器
        * 一次性计时器: no-repeat
        * 间隔性触发计时器: repeat
        方法:
        * `setTimeout()`: 指定的延迟时间之后执行的代码
        *  `clearTimeout()`: 取消`setTimeout()`的设置
        * `setInterval()`:时间间隔
        * `clearInterval`:取消`setInterval()`的设置
    设置计时器:  
    **语法 :setInterval(代码,延迟时间);**
    代码: 要调用的函数或要执行的代码块
    延迟时间:周期性执行或调用表达式之间的时间间隔,以**毫秒**计
    `返回值: 一个人可以传递给 clearInterval()从而取消对"代码"的周期性执行的值`
    ```
    <script type="text/javascript">
      var attime;
      function clock(){
        var time=new Date();          
        attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
        document.getElementById("clock").value = attime;
      }
      setInterval(clock,1000);
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="clock" size="50"  />
    </form>
    ```
    取消计时器:
    **clearInterval(id_of_setInterval)**
    id_of_setInterval:由 setInterval() 返回的 ID 值。
    ```
    <script type="text/javascript">
       function clock(){
          var time=new Date();                    
          document.getElementById("clock").value = time;
       }
      var myTimer = setInterval(clock,1000);
    </script>
    </head>
    <body>
      <form>
        <input type="text" id="clock" size="50"  />
        <input type="button" value="Stop" onclick="clearInterval(myTimer)" />
      </form>
    </body>
    ```
    计时器setTimeout():
    **语法:setTimeout(代码,延迟时间);**
    代码:要调用的函数或要执行的代码块
    延迟时间:周期性执行或调用表达式之间的时间间隔,以**毫秒**计
    ```
    <script type="text/javascript">
      var num=0;
      function startCount() {
        document.getElementById('count').value=num;
        num=num+1;
        setTimeout(startCount,1000);
      }
     setTimeout(startCount,1000);
    </script>
    ```
    取消计时器:
    ```
    <script type="text/javascript">
      var num=0;
      var i;
      function startCount(){
        document.getElementById('count').value=num;
        num=num+1;
        i=setTimeout("startCount()",1000);
      }
      function stopCount(){
        clearTimeout(i)
      }
    </script>
    </head>
    <body>
      <form>
        <input type="text" id="count" />
        <input type="button" value="Start" onclick="startCount()" />
        <input type="button" value="Stop" onclick="stopCount()"  />
      </form>
    </body>
    ```
    3. History 对象
    history对象记录了额用户曾经浏览过的页面(URL),并且可以实现浏览器前进与后退相似导航的功能
    **注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。**
    **语法: window.history.[属性|方法]**(window可以省略)
    * History 的对象属性: length=> 返回浏览器历史列表中的 URL 数量
    * History 的对象方法:
    >  back() => 加载 history 列表中的前一个 URL
        forward() => 加载 history 列表中的下一个 URL
        go() => 加载 history 列表中的某一个 URL,负值(-n)表示返回前第n 层,正值(n)表示返回后第 n 层
    
    4. Location 对象
    location用于获取或设置窗体的URL,并且可以用于解析URL
    **明年待续吧**
    ***
    

    相关文章

      网友评论

          本文标题:JS基础笔记

          本文链接:https://www.haomeiwen.com/subject/nxitbttx.html