首页 > 代码库 > JavaScript 学习

JavaScript 学习

参考资料:http://www.w3school.com.cn/js/index.asp 


一、教程

    js是一种轻量级的编程语言,可插入html页面中,并由浏览器执行。

    (1)简介

<script>
    document.write("<h1>标题一</h1>");
    function al(){
//        alert("button clicked.");
//        document.getElementById("aa").innerHTML = "<h2>O(∩_∩)O哈哈~</h2>";
        if(isNaN(document.getElementById("num").value)){
            alert("not num");
        }
    }
    function am(){
        document.getElementById("aa").style.color = "#006060";
    }

</script>
<input type="text" name="num" id="num" />
<input type="button" value="http://www.mamicode.com/submit" onclick="al()" />
<input type="button" value="http://www.mamicode.com/submit" onclick="am()" />
<div id="aa"></div>

    (2)实现

// <script>标签, 在html中,使用 。type="text/javascript",不用添加。JS是现代浏览器以及HTML5中的默认脚本。

// 向html中,输入文本
document.write("<h1>This is a heading.</h1>");
// JS 函数和事件

<script>
    function myFunction(){
// 一定要注意id名字!!! 将demo写成dome了 ...
        document.getElementById("demo").innerHTML="My First JS Function.";
    }
</script>
<div id="demo"> ... </div>
<button type="button" onclick="myFunction()">Try it.</button>

    (3)语句

// 浏览器会按照编写的顺序来执行每条语句。
// js对大小写敏感

    (4)注释

// 第一种注释方法
/*
第二种注释方法
*/

    (5)变量

// 变量
var x = 2;
var y = 3;
var z = x + y;

// 声明(创建)JS变量
var carname;

// 一条语句,多个变量
var name="Gates", age=56, job="CEO";

// Value = undefined;
var carname; // carname的值将是 undefined

    (6)数据类型

        字符串,数字,布尔,数组,对象,Null,Undefined

        JS拥有动态类型。相同的变量,可用作不同的类型。

var x ;
var x = 6;
var carname = "Bill Gates"; var carname = ‘Bill Gates‘;
var x = true; var y = false;

// 数组
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
// 或者使用
var cars = new Array("Audi", "BMW");

// 对象
// 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式(name: value)来定义。属性由逗号分隔
var person = {
    firstname   : "Bill",
    lastname    : "Gates",
    id          : 5566
};
// 对象属性的访问
person.lastname; person["lastname"]

// 声明变量类型
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

    (7)对象

        JS中所有事物都是对象:字符串,数字,数组,日期等待

        在JS中,对象时拥有属性和方法的数据。

        属性:与对象有关的值。方法:能够在对象上执行的动作。

// 访问对象的属性
objectName.propertyName

// 访问对象的方法
objectName.methodName

    (8)函数

        函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块。

function functionname(){
    // 执行代码 ...
}

// 调用带参数的函数
function myFunction(var1, var2){
    // 执行代码 ...
}

<button onclick="myFunction("Bill Gates", "CEO")">点击这里</button>

// 带有返回值的函数
function myFunction(){
    // 执行代码 ...
    return x;
}

// 变量的生存期
// 局部变量会在函数运行以后被删除
// 全局变量会在页面关闭后被删除

    (9)运算符

        +,-,*,/,%,++,--

        =,+=,-=,*=,/=,%=

    (10)比较

// 比较运算符
==        等于
===       全等(值和类型)
!=, >, <, >=, <= 

// 逻辑运算符
&&        and
||        or
!         not

// 条件运算符
variablename = (condition)?value1:value2;

    (11)If...Else

if (条件1){
    // ...
}
else if (条件2){
    // ...
}
else {
    // ...
}

    (12)Switch

switch(n){
case 1:
    // ...
    break;
case 2:
    // ...
    break;
// ...
default:
    // ...
}

    (13)For

for (var i=0; i<cars.length; i++){
    document.write(cars[i] + "<br>");
}

    (14)While

while (条件){
    // ...
}


do{
    // ...
}
while(条件);

    (15)Break

        break语句跳出循环。continue用于跳过循环中的一个迭代。

    (16)错误

try     // 语句测试代码块的错误
catch   // 语句处理错误
throw   // 语句创建自定义错误 

try{
    // 在这里运行代码
} catch(err){
    // 在这里处理错误
}

// 简单示例
function mm(){
    try{
        alelrt("welcome guest!"); // alert() 
    } catch(err){
        alert(err.message);
    }
}

    (17)验证















JavaScript 学习