JavaScript基础1

JS三类8种数据类型
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 变量的类型-传统类型</title>

</head>


<body>
<script>
//定义number类型变量
var x=10;
document.write(typeof(x));
var y=10.1;
document.write("<br/>");
document.write(typeof(y));
document.write("<br/>");
//定义string类型
var x = '123';
document.write(typeof(x));
document.write("<br/>");
//定义布尔(boolean)类型
var x =true;
document.write(typeof(x));
</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 变量的类型-复合类型</title>

</head>


<body>
<script>
//定义对象类型
var obj = new Object();
document.write(typeof(obj));
//定义数组类型
var array = new Array();
document.write("<br/>");
document.write(typeof(array));
document.write("<hr/>");
if(array instanceof Array){
    document.write("yes"); //yes
}
document.write("<br/>");
if(array instanceof Object){
    document.write("yes"); //yes
}
document.write("<br/>");
if(obj instanceof Array){
    document.write("yes");
}else{
    document.write("no");
}
//定义Function类型
var f = new Function();
document.write("<hr/>");
document.write(typeof(f));
</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 变量的类型-特殊类型</title>
</head>
<body>
<script>
//定义未知类型
var x;
document.write(typeof(x));
//定义null类型
var x = null;
document.write("<br/>");
document.write(typeof(x));//null是对象类型的
</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 运算</title>

</head>


<body>
<script>
var str = "hello";
var str1 = " world";
document.write(str+str1);
</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 运算-三目运算</title>

</head>


<body>
<script>
var x = 1;
var y = 2;
var z = x>y?x:y;
document.write(z);
</script>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 分支语句 if</title>

</head>


<body>
<script>
var x = 1;
var y = 2;
var z = 3;
if(x>y){
    document.write(x);
}else if(x>z){
    document.write(z);
}else{
    document.write(y);
}

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 分支语句 switch</title>

</head>


<body>
<script>
var day = 8;
switch(day){
    case 1:
      document.write("星期一");
      break;
    case 2:
      document.write("星期二");
      break;
    case 3:
      document.write("星期三");
      break;
    case 4:
      document.write("星期四");
      break;
    case 5:
      document.write("星期五");
      break;
    case 6:
      document.write("星期六");
      break;
    case 7:
      document.write("星期日");
      break;  
    default:
         document.write("未知");

}

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 循环语句  for</title>

</head>


<body>
<script>
for(var i=1;i<=10;i++){
    document.write(i+"<br/>");
}

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 循环语句  for</title>

</head>


<body>
<script>
// 9 * 9
for(var i=1;i<=9;i++){
    for(var m=1;m<=i;m++){
        document.write("&nbsp;&nbsp;"+m+"x"
        +i+"="+i*m);
    }
    document.write("<br/>");
}


</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 循环语句  while</title>

</head>


<body>
<script>
// 9 * 9
var i=1;
while(i<=9){
    var m=1;
    while(m<=i){
        document.write("&nbsp;&nbsp;"+m+"x"+i+"="+m*i);
        m++;
    }
    i++;
    document.write("<br/>");
}


</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 循环语句 do while</title>

</head>


<body>
<script>
var i=5;
/*while(i<4){
    document.write("hello");    
}*/
do{
    document.write("hello");    
}while(i<4);

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 字符串对象</title>

</head>


<body>
<script>
//声明字符串对象
var str = new String("hello");
var str1 = "hello";
//长度(length)
document.write(typeof(str));
document.write("<br/>");
document.write(typeof(str1));
document.write("<br/>");
document.write(str.length);
document.write("<br/>");
document.write(str1.length);



</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 字符串对象 indexOf</title>

</head>


<body>
<script>
//声明字符串对象
var str = "hello";
//判断字母"e"在str中首次出现的位置
// 对象.indexOf(string substr)
document.write(str.indexOf("w"));



</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 字符串对象 大小写转换</title>

</head>


<body>
<script>
//声明字符串对象
var str = "hello";
//将字符串转换成小写
document.write(str.toLowerCase());
//将字符串转换成大写
document.write("<br/>");
document.write(str.toUpperCase());




</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 字符串对象 截取</title>

</head>


<body>
<script>
//声明字符串对象
var str = "hello";
//从第 1 位开始截取,截取长度为1
document.write(str.substr(0,2));
document.write("<br/>");
//从第 1 位开始截取,截取终止为 1
document.write(str.slice(1));



</script>
</body>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 字符串对象 截取</title>

</head>


<body>
<script>
//1、给字符串"hello",将字符串转换为大写输出。
var i="hello";
document.write(i.toUpperCase());



</script>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 日期对象</title>

</head>


<body>
<script>
//获取日期对象
var d = new Date();
//获取当前年份
document.write(d.getFullYear());
//获取当前的月份
document.write("<br/>");
document.write(d.getMonth());
//获取当前的日期
document.write("<br/>");
document.write(d.getDate());
//获取当前的小时
document.write("<br/>");
document.write(d.getHours());
//获取当前的分钟
document.write("<br/>");
document.write(d.getMinutes());
//获取当前的秒数
document.write("<br/>");
document.write(d.getSeconds());

</script>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 日期对象</title>

</head>


<body>
<script>
/*
 * 2、输出当前日期要是输出的格式为:
 YYYY年M月D日 小时:分钟:秒
 */
 //获取日期对象
 var d = new Date();
 //获取年份
 var year = d.getFullYear();
 //获取月份
 var m = d.getMonth()+1;
//获取日期
 var date = d.getDate();
//获取小时
 var h = d.getHours();
//获取分钟
 var min = d.getMinutes();
//获取秒
 var s = d.getSeconds();
 document.write(year+"年"+m+"月"+date+"日"+"小时:"+h+"分钟:"+min+"秒:"+s);

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 日期对象</title>

</head>


<body>
<script>
//获取日期对象
var d = new Date();
//获取当前的星期值

document.write(d.getDay());

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 日期对象</title>

</head>


<body>
<script>
/*
 * 
 3、应用switch分支语句,获取当前的星期值。
 根据当前的星期值。输出今天是星期几。
 */
 //获取日期对象
 var d = new Date();
 var day = d.getDay();
 switch(day){
    case 0:
        document.write("星期日");
        break;
    case 1:
        document.write("星期一");
        break;  
    case 2:
        document.write("星期二");
        break;
    case 3:
        document.write("星期三");
        break;      
    case 4:
        document.write("星期四");
        break;
    case 5:
        document.write("星期五");
        break;  
    case 6:
        document.write("星期六");
        break;
    default:
        document.write("未知");
 }


</script>
</body>
</html>


//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象</title>

</head>


<body>
<script>
document.write(Math.PI);
var x = Math.PI; //3.14...
document.write("<br/>");
document.write(Math.round(x)); //3
document.write("<br/>");
document.write(Math.ceil(x)); //4
document.write("<br/>");
document.write(Math.floor(x)); //3

var y=-1;
document.write("<br/>");
document.write(Math.abs(y)); //1

</script>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象 伪随机数</title>

</head>


<body>
<script>
document.write(Math.random());

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象 伪随机数</title>

</head>


<body>
<script>
//5、利用JavaScript的数学对象,输出10个1~10之间的
//随机数。
var x = Math.random(); //0.1~9.9
x = Math.ceil(x*10);
document.write(x);



</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象 伪随机数</title>

</head>


<body>
<script>
//5、利用JavaScript的数学对象,输出10个1~10之间的
//随机数。
for(var i=1;i<=10;i++){
    var x = Math.random();
    var z = Math.ceil(x*10);
    document.write(z+"<br/>");
}



</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象 max min</title>

</head>


<body>
<script>
/*
 * 
 6、给一个变量,若这个变量大于6则取6,
 若这个变量小于-6,则取-6.否则,取变量本身。
 */
var x = -10;
var y = -6;
document.write(Math.max(x,y));
document.write("<br/>");
document.write(Math.min(x,y));

</script>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数学对象 max min</title>

</head>


<body>
<script>
/*
 * 
 6、给一个变量,若这个变量大于6则取6,
 若这个变量小于-6,则取-6.否则,取变量本身。
 */
var x=12;
/*var z= Math.max(-6,Math.min(6,x));
document.write(z);*/
if(x>6){
    document.write(6);  
}else if(x<-6){
    document.write(-6); 
}else{
    document.write(x);  
}



</script>
</body>
</html>
//------------------------------
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>JavaScript 数组</title>

</head>


<body>
<script>
    //声明数组
    var arr = new Array();
    //数组的长度
    document.write(arr.length); //0
    document.write("<br/>");
    //声明数组
    var arr1 = [];
    //数组的长度
    document.write(arr1.length); //0

    //在声明数组的同时赋初值
    var arr = new Array(2, "hello", 4);
    document.write("<br/>");
    document.write(arr.length); //3
    //在声明数组的同时赋初值
    var arr1 = [2, 3, 4, 7];
    document.write("<br/>");
    document.write(arr1.length); //4
    //输出数组
    document.write("<br/>");
    document.write(arr1); //2,3,4,7
    document.write("<hr/>");
    //在声明数组的同时赋初值
    var arr = new Array(7); //在声明数组是赋初值若仅为一个数值,则为数组的长度
    document.write("<br/>");
    document.write(arr.length); //7
    document.write("<br/>");
    document.write(arr); //,,,,,,
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组</title>

</head>


<body>
<script>
//声明数组
var arr = new Array();
arr[0] = "hello";
arr[1] = "world";
arr[4] = "hello";
//输出数组
document.write(arr)//hello,world,,,hello
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-方法</title>

</head>


<body>
<script>
//声明数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
document.write(arr1.concat(arr2));
document.write("<br/>");
document.write(arr2.concat(arr1));

document.write("<br/>");
document.write(arr1);
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-方法</title>

</head>


<body>
<script>
//声明数组
var arr1 = [1,2,"hello"];
//弹出数组的最后一个元素
/*
 * 
 7、定义一个含有如下元素的数组:
 time team term,弹出最后一个数组元素。
 打印弹出元素后的数组。
 */
//document.write(arr1.pop());
document.write("<br/>");
document.write(arr1); // 1,2,hello
document.write("<br/>");
document.write(arr1.push("world"));
document.write("<br/>");
document.write(arr1);
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-方法</title>

</head>


<body>
<script>
/*
 * 
 7、定义一个含有如下元素的数组:
 time team term,弹出最后一个数组元素。
 打印弹出元素后的数组。
 */
var arr = ["time","team","term"];
//弹出最后一个数组元素
arr.pop();
//大于弹出元素后的数组
document.write(arr);
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-方法</title>

</head>


<body>
<script>
var arr = ["time","team","term"];
document.write(arr);
document.write("<br/>");
document.write(arr.sort());//

document.write("<hr/>");

var arr1 = [5,6,8,32];
document.write(arr1);
document.write("<br/>");
document.write(arr1.sort());//32,5,6,8
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-遍历</title>

</head>


<body>
<script>
/*
 * 8、试着输出如下数组:
    team,time,term
    要求输出格式:
    key:value 
    例如:
    0:team 
 */
var arr = new Array("tom","jerry","jack","rose");
//遍历数组
for(key in arr){
    document.write(arr[key]+"<br/>");
}
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 数组-遍历</title>

</head>


<body>
<script>
/*
 * 8、试着输出如下数组:
    team,time,term
    要求输出格式:
    key:value 
    例如:
    0:team 
 */
var arr = ["team","time","term"];
for(key in arr){
    document.write(key+":"+arr[key]+"<br/>");
}

</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 自定义函数</title>

</head>


<body>
<script>
//声明一个自定义函数
function adder(a,b){
    return a+b;
}
//调用自定义函数
document.write(adder(2,3));
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 自定义函数</title>

</head>


<body>
<script>
//声明一个自定义函数
var adder = new Function("a","b","return a+b");
//调用自定义函数
document.write(adder(4,3));
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 自定义函数</title>

</head>


<body>
<script>
//声明一个自定义函数-匿名函数
/*
 * 9、试着定义一个匿名函数,功能是计算两个参数的乘积。
 调用函数。将函数计算的结果以对话框形式返回出来。
 */
var adder = function(a,b){
    return a+b;
}
//调用自定义函数
document.write(adder(14,3));
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 自定义函数</title>

</head>


<body>
<script>
//声明一个自定义函数-匿名函数
/*var adder = function(a,b){
    alert(a+b);
}*/

/*function adder(a,b){
    alert(a+b);
}*/

var adder = new Function("a","b","alert(a+b)");



</script>
<!-- 掉用JavaScript函数 -->
<a href="javascript:adder(10,5)">点击</a> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 自定义函数</title>

</head>


<body>
<script>
//声明一个自定义函数-匿名函数
/*
 * 9、试着定义一个匿名函数,功能是计算两个参数的乘积。
 调用函数。将函数计算的结果以对话框形式返回出来。
 */
//声明匿名函数
var multi = function(x,y){
    return x*y;
}
alert(multi(1,2));
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 变量的作用域</title>

</head>


<body>
<script>
//声明一个变量
var a=10; //全局变量

function adder(){
    var b=5; //局部变量
    document.write(a+b);
}
document.write(a); //10
document.write("<br/>");
document.write(b); //is not defined 
document.write("<br/>");
adder(); //15
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<?php 
$a = 10;
function adder(){
    $b = 5;
    echo $a+$b;//undefined
}

echo "b=".$b;
echo "<br/>";
echo "a=".$a;
echo "<br/>";
adder();
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM</title>

</head>


<body>
<a href='http://www.baidu.com'>百度</a>
<script>
//获取JavaScript对象
var aobj = document.getElementsByTagName("a");
document.write(aobj.length);
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM</title>

</head>


<body>
<a href='http://www.baidu.com' name='alink'>百度</a>
<script>
//获取JavaScript对象
var aobj = document.getElementsByName("alink");
document.write(aobj.length);
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM</title>

</head>


<body>
<a href='http://www.baidu.com' name='alink' id="alink1">百度</a>
<script>
//获取JavaScript对象
var aobj = document.getElementById("alink1");
document.write(aobj.length); //undefined
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 属性</title>

</head>


<body>
<a href='http://www.baidu.com' name='alink' id="alink1">百度</a>
<br/>
<a href='http://www.sohu.com' name='alink' id="alink2">搜狐</a>
<script>
//获取JavaScript对象
/*
 * 10、应用JavaScript获取
 <img src="图片地址" />
 元素的JavaScript对象。输出对象的src属性值。
 */
var aobj = document.getElementsByTagName("a");
document.write(aobj[1].href);
var aobj = document.getElementsByName("alink");
document.write(aobj[0].href);
var aobj = document.getElementById("alink2");
//aobj数组对象
//获取a链接的href属性的值
document.write(aobj.href);
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 属性</title>

</head>


<body>
<img src="dog.gif" />
<script>
//获取HTML元素的JavaScript对象
var iobj = document.getElementsByTagName("img");
document.write(iobj[0].src);
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值