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>
 */