JavaScript学习代码整理(一)

/**

 * Created by wyl on 15-1-23.

 */

function displayDate()

{

    document.getElementById("demo").innerHTML=Date();

}



alert("hello world") //可以在HTML标签中输出一句hello world



function MyFunction()

{

    document.getElementById("demo").innerHTML = "我可以获得一个id之后，改变这个id的信息";

}



document.write ("hello \

worle");



//JavaScript命名一个数组

var cars = new Array("baoshijie", "lanbo", "daben");



// JavaScript声明一个对象



//var person={

//firstname : "John",

//lastname  : "Doe",

//id        :  5566

//};



function GetInfo()

{

    var person = {

        name:"luoting",

        age:20,

        height:170

    }

    document.getElementById("demo").innerHTML=person.name+"The age is:"+person.age+"years old!"



}



//定义一个输出汽车信息的js函数

function getInfo()

{

    var name;

    var age;

    var car = {

        car_name:"baoshijie",

        tar_amount:4,

        car_price:1000000

    }

    name = "wyl";

    age = 23;



    document.getElementById("demo").innerHTML="Name:"+name+"<br>"+"age:"+age+"<br>"+car["car_name"]

    +"<br>"+car.car_price+"<br>"+car.tar_amount;



}



//获取返回一个时间

document.getElementById("name").innerHTML=Date()



//代码将修改自身元素的内容 (使用 this.innerHTML):

this.innerHTML = Date()



function displayDateTime()

{

    document.getElementById("time").innerHTML = Date();

}

//html

//<button click = displayDateTime()>Now is </button>





var carname1="Volvo XC60";

var carname2='Volvo XC60';

var answer1="It's alright";

var answer2="He is called 'Johnny'";

var answer3='He is called "Johnny"';



document.write(carname1 + "<br>")

document.write(carname2 + "<br>")

document.write(answer1 + "<br>")

document.write(answer2 + "<br>")

document.write(answer3 + "<br>")





//输出字符串的长度

var txt = "Hello world"

document.write("<p>"+txt.length+"</p>")

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

document.write("<p>"+txt.length+"</p>")





//JS中一个有别于其它语言的运算符号“===”这个叫做左绝对等于

//!==这个叫做绝对不等于

function test()

{

    var x = 5

    var y = "2"

    document.getElementById("demp").innerHTML= x==='5';

    document.getElementById("demo").innerHTML = y !=="4";



}



function CheckInfo(age)

{

    if (age < 18)

    {

        document.write("too yang!");

    }

    else

    {

        document.write("Yes");

    }



}



function Check()

{

    var age,get_age;

    age = document.getElementById("demo").value;

    get_age = (age<18)?"年龄太小":"年龄太大";

    document.getElementById("hehe").innerHTML = get_age;

}





//  JavaScript编写Switch语句循环

function Compare()

{

    var x;

    var day = new Date().getDay();

    switch (day)

    {

        case 0:

            x = "Today is Sunday!";

            break;

        case 1:

            x = "Today is Monday!";

            break;

        case 2:

            x = "Today is Tuesday!";

            break;

        case 3:

            x = "Today is Wedenday!";

            break;

        case 4:

            x = "Today is Thrsday!";

            break;

        case 5:

            x = "Today is Friday";

            break;

        case 6:

            x = "Today is Saturday!";

            break;

        default :

            x = "Looking forward to weenkend!";

    }

    document.getElementById("demo").innerHTML=x;

}





//  JavaScript编写for语句循环

function ForDemo()

{



    var cars = ["dazhong","baoshijie","kaidilake","QQcar"];

    for (var i= 0, X=cars.length;i<X;i++)

    {

        document.write("car["+i+"]"+"="+cars[i]+"<br>");

    }

//    第二种循环方式For/in

    for (var car in cars)

    {

        document.write("carName:"+car);

    }

}





//  JavaScript编写While语句循环

function WhileDemo()

{

    var i;

    var x = 100;

    var sum = "";

    while(x<0)

    {

        sum+=i;

        x--;

    }

    document.getElementById("demo").innerHTML = sum;

}



//  JavaScript编写Do/While语句循环



function Do_WhileDemo()

{

    var i;

    var x = 100;

    var sum = 0;

    do

    {

        sum += i;

        x--;

    }while(x<0)

    document.getElementById("demo").innerHTML=sum;

}



//Break 语句用于跳出循环；

//continue用于跳出本次循环



function BreakTest()

{

    var x = "";

    for (var i = 0;i<100;i++)

    {

        if(i == 20)

        {

            break;

        }

        x = x +"The number is"+x+"<br>";

    }

    document.getElementById("demo").innerHTML=x;

}





//continue用于跳出本次循环

function ContinueDemo()

{

    var x = ""

    var i =0;

    for(var i = 0;i<100;i++)

    {

        if(i==20)

        {

            continue;

        }

        x = x + i;



    }

}



//JS的标签

function LabelDemo()

{

    cars=["BMW","Volvo","Saab","Ford"];

    list:

    {

        document.write(cars[0] + "<br>");

        document.write(cars[1] + "<br>");

        document.write(cars[2] + "<br>");

        break list;//之后的内容不会输出

        document.write(cars[3] + "<br>");

        document.write(cars[4] + "<br>");

        document.write(cars[5] + "<br>");

    }

}



//你可以使用 typeof 操作符来检测变量的数据类型。

function Typedef()

{

    document.getElementById("demo").innerHTML =

    typeof "john" + "<br>" +

    typeof 3.14 + "<br>" +

    typeof false + "<br>" +

    typeof [1,2,3,4] + "<br>" +

    typeof {name:'john', age:34};

}



//任何变量的值都可以通过undefined来清空

//eg person = undefined

//JavaScript 数据类型

//在 JavaScript 中有 5 中不同的数据类型：

//

//string

//number

//boolean

//object

//function

//3 种对象类型：

//

//Object

//Date

//Array

//2 个不包含任何值的数据类型：

//

//null

//undefined



function isArray(myArray) {

    return myArray.constructor.toString().indexOf("Array") > -1;

}



//Date()对象演示

function getDate()

{

    get_date = new Date();

//    从 Date 对象返回一个月中的某一天 (1 ~ 31)。

    date1 = get_date.getDate();



//getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。

    day2 = get_date.getDay();

//getFullYear()    从 Date 对象以四位数字返回年份。

    day3 = get_date.getFullYear();

//getHours()    返回 Date 对象的小时 (0 ~ 23)。

    day4 = get_date.getHours();

//getMilliseconds()    返回 Date 对象的毫秒(0 ~ 999)。

    day5 = get_date.getMilliseconds();

//getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。

    day6 = get_date.getMinutes();

//getMonth()    从 Date 对象返回月份 (0 ~ 11)。

    day7 = get_date.getMonth();

//getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。

    day8 = get_date.getSeconds();

//getTime()    返回 1970 年 1 月 1 日至今的毫秒数。

    day9 = get_date.getTime()

}



function myFunction()

{

    var str = document.getElementById("demo").innerHTML;

    var txt = str.replace(/microsoft/i,"W3cSchool");

    document.getElementById("demo").innerHTML = txt;

}



//JS中异常捕获

function try_catch()

{

    var txt = "";

    try{

        alaaaert("fuck you!");//这里肯定会跑出异常

    }

    catch(err){

          txt="本页有一个错误。\n\n";

          txt+="错误描述：" + err.message + "\n\n";

          txt+="点击确定继续。\n\n";

          alert(txt);

    }



}





//hrow 语句允许我们创建自定义错误

function myFunction()

{

try

  {

  var x=document.getElementById("demo").value;

  if(x=="")    throw "empty";

  if(isNaN(x)) throw "not a number";

  if(x>10)     throw "too high";

  if(x<5)      throw "too low";

  }

catch(err)

  {

  var y=document.getElementById("mess");

  y.innerHTML="Error: " + err + ".";

  }

}



//JavaScript 调试工具

//在程序代码中寻找错误叫做代码调试。

//调试很难，但幸运的是，很多浏览器都内置了调试工具。

//内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

//有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

//浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

//console.log() 方法

//如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：



function Test()

{

    a = 5;

    b = 6;

    c = a + b;

    console.log(c);

}



//debugger 关键字

//debugger 关键字用于停止执行 JavaScript，并调用调试函数。

//这个关键字与在调试工具中设置断点的效果是一样的。

//如果没有调试可用，debugger 语句将无法工作。

//开启 debugger ，代码在第三行前停止执行。



function debuger()

{

    var x = 5*15;

    debuger();

    document.getElementById("demo").innerHTML = x;

}



//下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validateForm()

{

    var x = document.forms["myForm"]["fname"].value;

    if(x==null || x =="")

    {

        alert("First Name must be filled out!");

        return false;

    }

}

//以上函数在 form 表单提交时被调用:

//<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">

//First name: <input type="text" name="fname">

//<input type="submit" value="Submit">

//</form>



//E-mail 验证

//下面的函数检查输入的数据是否符合电子邮件地址的基本语法

//意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：



function test_email()

{

    var x = document.forms["MyForm"]["email"].value;

    var adops = x.indexOf("@");

    var dotpos = x.lastIndexOf(".");

    if(atpos<1 || dotpos<atpos+2 || dotpos+2 >= x.length)

    {

        alert("Not a Valid e-mail address");

        return false;

    }

}

/*

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">

Email: <input type="text" name="email">

<input type="submit" value="Submit">

</form>

*/

//JS和JSON

function js_json()

{

        var text = '{"employees":[' +

    '{"firstName":"John","lastName":"Doe" },' +

    '{"firstName":"Anna","lastName":"Smith" },' +

    '{"firstName":"Peter","lastName":"Jones" }]}';



    obj = JSON.parse(text);

    document.getElementById("demo").innerHTML =

    obj.employees[1].firstName + " " + obj.employees[1].lastName;

}



/*

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

 */

//下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

//<a href="javascript:void(0)">单击此处什么也不会发生</a>



/*

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

以下实例中，在用户点击链接后显示警告信息：

<p>点击以下链接查看结果：</p>

<a href="javascript:void(alert('Warning!!!'))">点我!</a>

*/

/*

以下实例中参数 a 将返回 undefined :

<head>

<script type="text/javascript">

<!--

function getValue(){

  var a,b,c;

  a = void ( b = 5, c = 7 );

  document.write('a = ' + a + ' b = ' + b +' c = ' + c );

}

//-->

</script>

</head>

 */



/*

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

 */

/*

<html>

<head>

<script type="text/javascript">

<!--

//-->

</script>

</head>

<body>

<p>点击以下链接查看不同效果：</p>

<a href="javascript:void(0);">点我没有反应的!</a>

<br>

<a href="#pos">点我定位到指定位置!</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p id="pos">尾部定位点</p>

</body>

</html>

 */