JavaScript-学习笔记（二）

最新推荐文章于 2024-03-08 23:01:16 发布

XiaoChong1998

最新推荐文章于 2024-03-08 23:01:16 发布

阅读量142

点赞数

分类专栏： JavaScript 文章标签： JavaScript 入门

本文链接：https://blog.csdn.net/qq_43473154/article/details/102823116

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript-学习笔记（二）

JavaScript对象（自定义对象与内置对象）

掌握：

javaScript数组定义与使用
理解 JavaScript 中的对象
掌握 JavaScript 中字符串的方法
掌握 JavaScript 中的内置对象

工具：

HBuilder or HBuilderX

一：javaScript数组定义与使用

//数据对象创建：
//语法：
var myarray = new Array();
//如：
var arr0 = new Array();
var array1 = new Array(3);
var array2 = new Array(1,2,”hello”);
var array3 = [true,3.14]
//使用数组的下标访问数组元素：
//语法：
array[index] //---index从0开始计算
//通过数组的length属性显示数字长度
//语法：
array.length

1.1数组元素的遍历与常用方法

//遍历数组方法一：
//语法：
for(var i = 0;i < array.length;i++){
	document.write(array[i]);
}
//方法二：
for(var i in array){
      document.write(array[i]);
}
//join()方法 将数组中的所有元素组合起来，元素由指定的分隔符分隔开来。
//如：array.join(“”);
//reverse()方法 返回一个元素顺序被反转的Array对象;
//sort()方法 返回一个元素已经进行了排序的Array对象;

二：理解 JavaScript 中的对象

使用new 构造对象
使用对象的属性

使用对象的方法

//对象的方法是指对象行为，能完成的功能，使用“.”运算符来使用对象的方法
 Math.random() ; // 1.使用Math对象的random方法
 window.alert(“你好”) ;//2.使用window对象的alert()方法
 “Hello World ”.index(“@”) ; //3.使用字符串的index()方法

2.1使用Object自定义对象

<script type="text/javascript">
<!--
var car = new Object();	//使用new关键字构造一个对象
car.name ="奔驰600";	//给car对象添加属性
car.color = "黑色";
car.pailiang =2.0;
car.run = canRun;  //添加canRun方法
function canRun()
{
  document.write("<br>最高时速250公里");
}
//或者使用下面的方式给car对象添加方法
//car.run=function{ document.write ("<br>最高时速250公里");}
 //使用car对象的属性
 document.write("这是一辆"+car.name+"，颜色是"+car.color+"，排量是"+car.pailiang);
 / /调用car对象的方法
car.run(); 
//-->
</script>

2.2使用function自定义对象

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义的对象的使用</title>
<!--定义Car对象  -->
<!--使用Car生成对象-->
</head> 
<body>
    <script type="text/javascript">
    <!--
    var car = new Car("奔驰600","黑色",2.0);  //构造car对象
    document.write("这是一辆"+car.name+"，颜色是"+car.color+"，排量是"+car.pailiang+"升");
    car.run(); //调用对象的方法
    //-->
    </script>
</body>
</html>

三：掌握 JavaScript 中字符串的方法

3.1String对象构造和属性

<script type="text/javascript">
    // 构造String对象
	// String对象的length属性

<!--
  var str0 = "Hello World!";
  var str1 = "   Hello World!"; //前面有2个空格
  var str2 = "Hello World!   "; //后面有两个空格
  var str4 = "你好，世界!";   //，是全角的 ！是半角的
  document.write("4个字符串的长度分别是："+str0.length+","+str1.length+","+str2.length+","+str4.length);
//-->
</script>

3.2String对象常用方法

// String对象常用的方法的语法
// String对象indexOf方法和length属性在表单验证中的应用
// String对象的charAt方法
// String对象的字符串截取方法
// 字符串截取方法验证用户名只含数字、字母和下划线
<script type="text/javascript">
function check(){
    var uname  = document.myform.name.value;
    if (uname.length ==0) 
    {
      alert("请输入用户名");
      return false  ; 
    }
    var upwd = document.myform.pwd.value;
    if (upwd.length< 6)  
    {
       alert("密码不能少于6位");
       return  false ;   
    }
    var uemail = document.myform.email.value;
    if (uemail.indexOf("@") == -1)
    {  
      alert("邮箱地址必须包含@符号");
      return false;
    }
    return true ;
 }
function checkName()
{
  var str = document.form1.name.value; //取得用户名的值
  var len = str.length;  //取得字符串的长度
   for (var i = 0; i < len; i++)
   {
    var ch = str.substr(i,1);
    if (ch >= '0' && ch <= '9' || ch >= 'a' && ch <= 'z' || ch >= 'A' && ch <= 'Z' || ch == '_')
     continue;
     else
     {
        alert("含有非法字符"); 
        return false;
     }
  }
  return true ;
}

</script>

四：掌握 JavaScript 中的内置对象

4.1Math对象属性和方法

// Math对象的属性和应用 –求圆的面积
// Math对象的方法
// 使用Math对象的random方法的应用-掷骰子
<script type="text/javascript">
<!--
 var one = two = three = four = five =zero = 0 ;  var shu = 0 ;
 for(var i = 0 ; i < 100000 ; i ++)
 {
    shu =  Math.random()*100000 ; //把数变成大于1的数
	shu = parseInt(shu %6); //对6取模后转成整数
	switch(shu) {
	  case 0 :zero ++;break;
	  case 1 :one ++;break;
	  case 2 :two ++;break;
	  case 3 :three ++;break;
	  case 4 :four ++;break;
	  case 5 :five ++; break;
	}
 }
 document.write("点数1:"+one+"次，占"+one/100000 +"<br>");
 document.write("点数2:"+two+"次，占"+two/100000 +"<br>");
 document.write("点数3:"+three+"次，占"+three/100000+"<br>");
 document.write("点数4:"+four+"次，占"+four/100000 +"<br>");
 document.write("点数5:"+five+"次，占"+five/100000 +"<br>");
 document.write("点数6:"+zero+"次，占"+zero/100000 +"<br>");
//-->
</script>

4.2Date对象属性和方法

// 构造Date对象
// Date对象的属性
// Date对象的方法
//方法				说明
//getDate()		返回 Date 对象中月份中的天数，其值介于 1 至 31 之间
//getDay()		返回 Date 对象中的星期几，其值介于 0 至 6 之间
//getHours()	返回 Date 对象中的小时数，其值介于 0 至 23 之间
//getMinutes()	返回 Date 对象中的分钟数，其值介于 0 至 59 之间
//getSeconds()	返回 Date 对象中的秒数，其值介于 0 至 59 之间
//getMonth()	返回 Date 对象中的月份，其值介于 0 至11 之间
//getFullYear()	返回 Date 对象中的年份，其值为四位数
//getTime()		返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数
<script type="text/javascript">
    var week = new Array("日", "一", "二", "三", "四", "五","六"); 
    var time = new Date();
    var year = time.getYear();	    //获取年份
    var month = time.getMonth()+1;	//获取月份
    var date = time.getDate();		//获取日期
    var day = time.getDay();		    //获取星期
    document.write("今天是" + year + "年" + month + "月" + date + "日星期" + week[day]);				//打印输出
</script>

//动态显示当前时间
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示时钟</title>
    <script type="text/javascript">
    <!--
    function clock()
    {
    var time = new Date();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    hour = hour>=10?hour:("0"+hour);
     minute  = minute >=10 ?minute :("0"+minute);
     second = second >=10 ?second :("0"+second) ;
    document.form1.myClock.value = "现在是" + hour + "时" + minute + "分" + second + "秒";
    setTimeout("clock()",1000);		//定时反复的执行
    }
    //-->
    </script>
</head>
<body onLoad="clock()">
    <form name="form1" method="post" action="">
        <input name="myClock" type="text" style="border-style:none; font-size:14px">
    </form>
</body>
</html>