JS基础笔记

2017-01-22 本文已影响60人婉卿容若

基础知识

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

调用

js代码书写位置: 可以写在 html 文件中(通常在 head/body 中, html 文件执行按照从上到下顺序,所有根据需求安排位置)
输出内容用""括起，直接输出""号内的内容

<script type="text/javascript">
             document.write(mystr　＋　"开启JS之旅!"); // 输出多项内容，内容之间用+号连接
             document.write(mystr+"<br>"); // 输出HTML标签，并起作用，标签使用""括起来。
        </script>

引用外部 js 文件:其中"script.js"是 js 文件名

<script src="script.js"></script>

基本语法

直接向 HTML 输出流写内容:

document.write("Hello world");

弹框: alert("Hello world");

 function rec(){
    var mychar="I love JavaScript";
    alert(mychar)
  }

JS 中变量命名区分大小写
变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
消息对话框
=> 确认: 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("要努力了!");
    }
  }

打开窗口: 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');
  }

关闭窗口: <窗口对象>.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。

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

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

Math' properties.png

Math' methods.png

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

注意：

返回与 x 最接近的整数。
对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
如果 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
**明年待续吧**
***