您现在的位置是：首页 > 技术学习 > javascript 网站首页 技术学习 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("我的函数");
}
// 函数定义好后不会自动执行，需要使用时在所需位置调用，写调用函数。比如：
document.body.onclick = function () { 
    myFn(); 
};     // 这种没有名字的函数称为匿名函数。
// 或者：
document.body.onclick = myFn;

3. 简单的函数

3-1 弹框函数

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

2. 确认弹框：confirm("确认弹框上显示的内容");
   弹框包含提示信息和确定/取消按钮，确定返回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*/) {
    /* 要执行的代码1 */
} else if (/*条件1*/) {
    /* 要执行的代码2 */
} else {
    /* 要执行的代码3 */
}
// else if 可写多个(多重判断)，也可不写(2选1的判断：if...else...)

3-3-2 三元运算

条件 ? 为真时 : 为假时

var a = 4;
a <= 5 ? alert(5) : alert(0);
// 这是2选一的一种判断。
// 判断a是否小于等于5，如果是，那执行 ？后的代码即 alert(5)；
// 如果不是，那执行 : 后的代码即 alert(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);
// 虽然 i < 0 为 false 但是结果仍然会输出0；

 
个人CSDN博客