什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。

JS完成一个简单的计算器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var d = "";
var a=document.getElementById("txt1").value;
//获取第一个输入框的值
var b=document.getElementById("txt2").value;
//获取第二个输入框的值
var c=document.getElementById("select").value;
//获取选择框的值
switch(c)
{
case "+":
//d = a + b;
d = parseInt(a)+parseInt(b);
break;
case "-":
d = a-b;
break;
case "*":
d = a*b;
break;
default:
d = a/b;
}
document.getElementById("fruit").value = d;

}
</script>
</head>
<body>
计数器:<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value='=' onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果-->
<input type='text' id='fruit' />
</body>
</html>

info 注意:获取元素的值设置和获取方法为:

例:赋值:document.getElementById(“id”).value = 1;

取值:var = document.getElementById(“id”).value;

info 注意:在函数中为了运算,需要将传递到函数中的文本内容采用parseInt()

或者是parseFloat()函数将文本转换为整型Int或者是浮点Float数字;

什么是对象

JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性方法

对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;

对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;

JavaScript 提供多个内建对象,比如 String、Date、Array 等等,使用对象前先定义,如下使用数组对象:

访问对象属性的方法

1
objectName.propertyName

访问对象的方法:

1
objectName.methodName()

Date日期对象

定义一个时间对象

1
var Udate=new Date();

自定义初始值

1
2
var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

返回/设置年份方法

1
get/setFullYear()
1
2
3
4
5
var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。

返回星期方法

getDay() 返回星期,返回的是0-6的数字,0 表示星期天。如果要返回相对应“星期”,通过数组完成,代码如下:

1
2
3
4
5
6
7
8
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是:"+ weekday[mynum]);//输出星期几
</script>

返回/设置时间方法

get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

如果将目前日期对象的时间推迟1小时,代码如下:

1
2
3
4
5
6
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间:"+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间:" + mydate);
</script>

如果是两个小时以上,则只需在第一个60前面再*2即可

String 字符串对象

访问字符串对象的属性length:

1
2
var mystr="Hello World!";
var myl=mystr.length;

使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写:

使用 String 对象的 toLowerCase() 方法来将字符串大写字母转换为小写:

返回指定位置的字符

1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一(string.length-1)。

2.如果参数 index 不在 0 与 string.length-1 之间,该方法将返回一个空字符串。

1
2
3
4
<script type="text/javascript">
var mystr="I love JavaScript!"
document.write(mystr.charAt(2));
</script>

info 注意: 一个空格也算一个字符。

返回指定的字符串首次出现的位置

1
stringObject.indexOf(substring, startpos)

说明

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

2.可选参数,从stringObject的startpos位置开始查找substring,如果没有此参数将从stringObject的开始位置查找。

3.如果找到一个 substring,则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意

1.indexOf() 方法区分大小写。

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

例如:

1
2
3
4
5
6
<script type="text/javascript">
var str="I love JavaScript!"
document.write(str.indexOf("I") + "<br />");
document.write(str.indexOf("v") + "<br />");
document.write(str.indexOf("v",8));
</script>

以上结果:

1
2
3
0
4
9

字符串分割split()

1
stringObject.split(separator,limit)

注意:如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

举例:

1
2
3
var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

运行结果:

1
2
www,imooc,com
www,imooc

提取字符串substring()

1
stringObject.substring(startPos,stopPos)

同理,stopPos不选的话返回的子串会一直到字符串对象的结尾。

注意:

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

  2. 如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。

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

  4. 举例:

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

运行结果**:**

1
2
JavaScript
love

以上笔记来自于慕课网,白嫖的感觉是真好!加油