JavaScript笔记之进阶篇

最新推荐文章于 2024-06-07 13:26:13 发布

jiaody111

最新推荐文章于 2024-06-07 13:26:13 发布

阅读量179

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/weixin_42139212/article/details/84846917

版权

JAVA 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JS区分大小写。

1.变量

变量名：

必须以英文字母，下划线_ 或者美元符号$ 开头，不能使用JS保留字或关键字，区分大小写。

变量声明并赋值：

var 变量名1 = 变量1的值 //可同时声明多个变量，变量值的类型任意（可以是数值型，字符串，布尔型等）

自加和自减运算符：

mynum = 10;

mynum++; //mynum的值变为11

mynum--; //mynum的值又变回10

2.数组

创建数组：

var myarray = new Array(数组长度)

注释：1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

给数组元素赋值：

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

或者var myarray = [66,80,90,77,59];//直接输入一个数组

注释：数组存储的数据可以是任何类型（数字、字符、布尔值等）

数组长度可变：

通过arr.length可以获取数组长度，但是由于数组长度可变，当重新定义数组长度或者给比原数组长度大的元素赋值时，数组随之变化。

var arr=[98,76,54,56,76]; // 包含5个数值的数组

document.write(arr.length); //显示数组的长度5

arr[15]=34; //增加元素，使用索引为15,赋值为34

alert(arr.length); //显示数组的长度16

二维数组：

定义方式一：

var myarr=new Array(); //先声明一维

for(var i=0;i<2;i++){ //一维长度为2

myarr[i]=new Array(); //再声明二维

for(var j=0;j<3;j++){ //二维长度为3

myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j } }

定义方式二：

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];

myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。

数组连接concat:

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

用法：arrayObject.concat(array1,array2,...,arrayN)

将array1,array2。。。连接到arrayObject后

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

//运行结果是
//1,2,3,4,5
//1,2,3

join()

把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

用法：arrayObject.join(分隔符) //如果省略分隔符，默认按照" , " 隔开。

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

//运行结果是：I.love.JavaScript

reverse()

将数组中元素倒序

用法：arrayObject.reverse()

slice()

从已有的数组中返回选定的元素。

用法：arrayObject.slice(start,end)

注释：

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2. 该方法并不会修改数组，而是返回一个子数组。

3. 可使用负值从数组的尾部选取元素。

4.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

3.函数

函数调用：

函数调用方式1：

在<script>标签内调用

function add2()

{ sum = 1 + 1; alert(sum); }

add2(); //调用函数，直接写函数名

</script>

函数调用方式2：

在<body>中调用

<body>

<form>

<input type="button" value="click it" οnclick="add2()"> //按钮,onclick点击事件，直接写函数名

</form>

</body>

函数有返回值：

当定义的函数有返回值return时，使用document.write(返回值)可实现输出。

4.事件响应

鼠标点击事件onclick

 <form>
    <input name="点击我" type="button" value="点击我" onclick="openwin()"/>
 </form>

value中是按钮中要显示的文字，onclick中是点击按钮跳转的链接（函数）

鼠标经过事件onmouseover

鼠标滑过（按钮）时，触发onmouseover事件，并执行对应的程序

<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>

鼠标移开事件onmouseout

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

<script type="text/javascript">
  function message(){
    alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
  <a href="http://www.imooc.com" target="_blank" onmouseout="message()">点击我</a>
</form>
</body>

当鼠标滑过“点击我”后离开时，进入message()模块。

聚焦onfocus和失焦onblur

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

<body>
请选择您的职业：<br>
  <form>
    <select name="career" onfocus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>

当点击选择框中的文字时，会触发onfocus函数，执行message（）函数中的语句。

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

<script type="text/javascript">
  function message(){
    alert("请确定已输入密码后，在移开!"); }
</script>    
</head>
<body>
  <form>
   用户:<input name="username" type="text" value="请输入用户名！"  onblur="message()">
   密码:<input name="password" type="text" value="请输入密码！" >
  </form>
</body>

内容选中事件onselect

 <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5"  onselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>

当鼠标选中“请写入个人简介，不少于200字！”时，会触发onselect，并执行message()函数。

加载事件onload

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload="message()">
  欢迎学习JavaScript。
</body>

5.String字符串

charAt(index)

返回index位置的字符串

indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。

用法：stringObject.indexOf(substring, startpos)

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。

从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。

如果找到一个 substring，则返回 substring 的第一次出现的位置。

如果要检索的字符串值没有出现，则该方法返回 -1。

split()

将字符串分割为字符串数组，并返回此数组。

用法：stringObject.split(separator,limit)

从separator开始分割stringObject，limit是分割次数（可选，默认分割无数次）。

substring()

用于提取字符串中介于两个指定下标之间的字符。

用法：stringObject.substring(startPos,stopPos)

返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。

如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

<script type="text/javascript">
  var mystr="I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2,6));
</script>

运行结果是：

JavaScript

love

substr()

用法：stringObject.substr(startPos,length)

从字符串中提取从 startPos位置开始的指定数目的字符串。

如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

如果startPos为负数且绝对值大于字符串长度，startPos为0。

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

运行结果是：

JavaScript!

love

6.Math函数

Math中的函数都是静态的，不需要new，可直接调用。

ceil()

对一个数进行向上取整。（比原数大1）

document.write(Math.ceil(0.8) + "<br />") //结果是1

document.write(Math.ceil(-5.1) + "<br />") //结果是-5

floor()

对一个数进行向下取整。（比原数小1）

document.write(Math.floor(3.5)+ "<br>") //结果是3

document.write(Math.floor(-5.1)+ "<br>") //结果是-6

round()

把一个数字四舍五入为最接近的整数。对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)

如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6)。

random（）

返回一个0~1的随机数。

7.Date

<script type="text/javascript">

	var date = new Date();
	document.write(date+"<br/>"); //国际日期
	document.write("北京日期为："+date.toLocaleDateString()+"<br/>"); //标准日期
	document.write("北京时间为："+date.toLocaleTimeString()+"<br/>"); //标准时间
	document.write("当前年份是："+date.getFullYear()+"<br/>"); //获取年份
	document.write("当前月份是："+getMon(date.getMonth())+"<br/>"); 
	//获取当前月，注意月份的取值范围是0——11，要想获取准确月，加1.
	document.write("当前日期是："+date.getDate()+"<br/>"); //在当前月份中的日期
	document.write("当前星期是："+getWeek(date.getDay())+"<br/>");  //返回的数值是0——6，其中0表示星期日。用getWeek函数转换成星期X输出。
	
	function getWeek(num)
	{
		var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
		return weeks[num];
	}
	
	function getMon(num1)
	{
		return num1+1;
	}
</script>

//运行结果是：
Fri Dec 07 2018 09:59:58 GMT+0800 (中国标准时间)
北京日期为：2018/12/7
北京时间为：上午9:59:58
当前年份是：2018
当前月份是：12
当前日期是：7
当前星期是：星期五

使用with(对象名）{

//执行语句

//可以实现不用对象名调用函数

}

var date2 = new Date();
	with(date2)
		{
			var year = getFullYear();
			var month = getMon(getMonth());
			var day = getDate();
			var dat = getWeek(getDay());
			document.write(year+"-"+month+"-"+day+"-"+dat+"<br/>");
	    }
//运行结果是：
//2018-12-7-星期五

8.全局方法parseInt()和Number()对象

Number()

将任何数值型数据转化成数值，parseInt是将字符串转化为数值。

Number():

Boolean值：true和false将分别转换为1和0。

undefined返回NaN。

null值返回0。

另外，使用toString方法可以转换进制。

var num1=Number("Hello World"); //NaN

var num2=Number(""); //0

var num3=Number("000011"); //11

var num4=Number(true); //1

parseInt():

忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或负号，parseInt()就会返回NaN。

用parseInt()转换空字符串会返回NaN。

如果第一个字符是数字字符，parseInt()会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。

例如，"1234blue"会被转换为1234，因为"blue"会被完全忽略。"22.5"会被转换为22，因为小数点不是有效的数字字符。

如果字符串以"0x"开头且后跟数字字符，就会将其当作一个十六进制整数；

如果字符串以"0"开头且后跟数字字符，就会将其当作一个八进制整数；

parseInt()函数第二参数用于指定转换时使用的基数（即多少进制，默认10进制）。

如：parseInt("10",16)//按十六进制解析；parseInt("10",8)//按八进制解析

parseInt("50px");//50

parseInt("a50px") ;//NAN

9.forin语句

对某个对象中的变量进行遍历

<script type="text/javascript">
	var myarr=[1,2,3,4,5];
	for(i in myarr)
		{
			document.write(myarr[i]+"<br/>");
		}
</script>

//运行结果是：
1
2
3
4
5

10.自定义对象

对象调用成员的两种方式：

对象.属性名或者对象["s属性名"]

<script type="text/javascript">

	function Person() //相当于构造器
	{
		document.write("Person run");
	}
	
	var p = new Person(); //创建对象
	//动态给对象添加属性，使用对象. 属性名即可。
	p.name="jiaody";
	p.age=22;
	//如果定义的对象的属性是一个函数，那么该函数被看作是给该对象添加一个方法
	p.show = function()
	{
		document.write(this.name+","+this.age);
	}
	p.show();
        运行结果是：jiaody,22
	
	function Person(name,age)
	{
		this.name = name;
		this.age = age;
		this.setName = function(name)
		{
			this.name = name;
		}
		this.getName = function()
		{
			return this.name;
		}
	}
	
	var p1 = new Person("旺财",20);
	p1.setName("招财");
	alert(p1.getName());
	
	for(x in p1)   //使用forin可以遍历对象中的属性及其对应的属性值
		{
			document.write(x+","+p1[x]+"<br/>");
		}
        运行结果是：
        name,招财
        age,20
        setName,function (name) { this.name = name; }
        getName,function () { return this.name; }
	
	//直接使用{}定义属性和值的键值对方式，每一对键和值之间用：隔开，键值对之间用，隔开
	var map ={
		1:"my",2:"name",3:"you"
	}
	function getKey(num)
	{
		return map[num];
	}
	document.write(getKey(1));
        运行结果是：
        my
  
</script>