前端学习笔记3-1 javascript

本篇介绍js的基础知识、基本语法、及简单函数。

1. JS基础知识

js由网景+sun共同开发，js是单线程的。
基本特点：
1. 脚本语言：js是一种解释性的脚本语言，c、c++等语言先编译后执行，而js可以直接执行。
2. 基于对象：js是一种基于对象的脚本语言，可创建对象，也可使用现有对象。
3. 简单：js采用弱类型的变量类型。
4. 跨平台：js值依赖浏览器，和操作系统无关。
5. 嵌入式：
JS使用场景
1. 嵌入动态文本于html页面，对浏览器时间做出响应。
2. 读写html元素。
3. 在数据被提交服务器之前验证数据。
4. 检测访客的浏览器信息。
5. 控制cookies，包括创建和修改。
6. 基于node.js技术进行服务器端编程。
JS的组成：
1. ECMAscript(ECMA) : 解释器。
2. DOM ： 在js中就是document object model 文档 对象 模型
3. BOM ： browser object model 浏览器 对象 模型。
三者兼容性：
ECMA：提供功能单一简单，几乎不存在什么兼容问题。
DOM: 兼容性一般，兼容性一般可解决。DOM操作最常用。
BOM：几乎完全不兼容。

2. JS的使用

1. js代码写在script标签里面之间。
   
<script type="text/javascript">
/* js代码 */
</script>

2. js也可直接写在.js文件里面，然后在将该文件引入html里面。
   
<script src="js/myscript.js" type="text/javascript"></script>

3. js可以放在html里面任何位置，但是解析顺序从前到后。
4. js由js语句组成(基本格式)，一个语句结束通常加“;”。
5. 注释：单行注释: // 多行注释：/* 注释代码 */ 。
6. 定义变量方法：var 变量名。
   取名规则：
   
   1. 变量名必须使用字母或下划线_或美元符$开始。
   2. 不能用js关键词或js保留字。
   3. js大小写敏感，要区分大小写。
   4. 变量要先声明再赋值，可重复赋值。
      var myArr = [“a”,”b”,”c”];
      myArr = [“1”,”2”,”3”,”4”];
7. 定义函数方法：function 函数名 () { /* 函数代码 */ };
   function myFn(){alert(“我的函数”);}
   函数定义好后不会自动执行，需要使用时在所需位置调用，写调用函数。比如：
   oDiv.onclick = function () { myFn(); }; 这种没有名字的函数称为匿名函数。
   或者：oDiv.onclick = myFn;

3. 简单的函数

3-1 弹框函数

1. 警告弹框：alert(“弹框内容”); 弹窗包含一个确定按钮。如下：

   

2. 确认弹框：conf irm(“确认弹框上显示的内容”); 弹框包含提示信息和确定/取消按钮，确定返回1，取消返回0；如下：
   

3. 输入对话框：prompt(“请输入你的名字”,”123”); prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值。点确定返回框内输入内容。取消返回null；如下：
   

3-2 输出内容

1. document.write("要输出的内容"); 将内容输出到页面。2. console.log("要输出内容"); 将内容输出到控制台，常用来调试。注：    document.write()尽量不要写在window.onload = function(){}里面，如果写在里面，新写的内容会把页面原本内容给覆盖掉，    因为window.onload时候，文档流已经关闭，这时候调用document方法会重新开一个文档流，    这时候往里面写内容，是在新文档流里面写，写完之后新文档流会替换掉旧得文档流，    所以会看到页面原本内容被清空，只剩下write方法里的内容展示在页面中。

3-3 常见流程控制函数

3-3-1 判断

if (条件) {    /* 要执行的代码1 */}else if () {    /* 要执行的代码2 */}else {    /* 要执行的代码3 */}else if可写多个(多重判断)，也可不写(2选1的判断：if...else...)

3-3-2 三目运算

a <= 5? alert(5):alert(0);这是2选一的一种判断。判断a是否小于等于5，如果是，那执行？后的代码即弹窗5；如果不是，那执行:后的代码即弹窗0.

3-3-3 多种选择switch

switch (num){    case 1: //当num值为1时执行下面的代码        alert("num的值为1");        break;    case 2:  //当num值为2时执行下面的代码        alert("num的值为1");        break;    .....    default:  //当num值为其他情况时执行下面的代码        alert("num的值为其他");}

3-3-4 for循环

// 强制按循环条件循环for (初始化变量; 循环条件;循环迭代 ){    循环代码；}for (var i = 0;i < 5;i++){    console.log(i);}上述代码输出分别为：0，1，2，3，4。当i=0时，执行里面代码，执行完毕，i++，i=1；然后再执行里面代码...依次执行直到i的值不小于5时停止。

3-3-5 for in 循环

// 循环循环对象的可枚举属性(和for循环有点不同)for(var k/i in obj/arr) {循环代码;};例：    var obj = {        'a' : 'aaa',        'b' : 'bbb',        'c' : 'ccc'    };    for(var k in obj) { // k为定义的变量，用于在obj中循环        console.log(k); // a,b,c（定义的变量k代表键值）        console.log(obj[k]); // aaa,bbb,ccc     };    var arr = ['a','b','c'];    for(var i in arr) {        console.log(i); // 0,1,2 （数组中定义的的变量i代表下标）        console.log(arr[i]); // a,b,c    }注：for循环和for in循环的区别：    var a = [];    a[0] = '00';    a[2] = '22';    a[4] = '44';    for(var i = 0; i < a.length; i++) {        console.log(a[i]); // 00,undefined,22,undefined,44        // for循环强制按条件循环，没值得也会循环。    };    for(var k in a) {        console.log(a[k]); // 00,22,44        // for in循环只循环可枚举的值，undefined没列举。    };

3-3-6 退出循环break

for(){    if(特殊条件){        alert(1);        break; //中断停止整个循环        alert(2);    }    循环代码;}当遇到特殊条件时，停止整个循环，break后面的代码将不再被执行，同时整个循环也不再执行。上述代码会弹出1，不会弹出2。

3-3-7 继续循环continue

for(){    if(特殊条件){        alert(3);        continue;//中断本次循环，但不会阻止整个循环进行。        alert(4);    }    循环代码;}当遇到特殊条件时当前循环执行特殊条件里面的代码。但是在这个特殊条件的代码中continue之后的部分不会执行。但是整个循环仍会继续进行。上述代码会弹出3，不会弹出4。例：for(var i = 0;i < 10;i++){    if(i==5){        alert(5);        continue;        alert("五");    }    if(i==6){        alert(6);        break;        alert("六");    }    if(i==7){        alert(7);        continue;        alert("七");    }}上述代码会弹出5，6。continue不中断整个循环，所以6会弹出来。因为continue、break之后代码不执行，所以五、六不会弹出，而且break终止整个循环，所以7和七也不会弹出。

3-3-8 反反复复while

while (条件){  需要执行的代码}只要条件为true，就一直执行里面的代码。var i = 0;while (i<5){ //i自增1，但是只要i<5就输出一次i;    console.log(i);    i++;}//结果为输出0,1,2,3,4

3-3-9 来来回回 do…while…

do{  需要执行的代码}while (条件);先执行代码，然后判断条件是否为真，如果为真，那么再去循环执行do里面的代码。var i = 0;do{    console.log(i);    i++;}while(i < 0);结果仍然会输出0；