JavaScript入门

Posted on Edited on Views: Valine:
Symbols count in article: 217 Reading time ≈ 1 mins.

js概述

JS是一种脚本语言

第一个js程序

js调试：①alert弹框调试②console.log(flag)控制台输出调试

自定义函数

2个创建方法，第二个方法不建议使用

1
2
3
var fun1 = function(x){
return x+1;
}

数据类型及转换

字符函数

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
str="520134199804061223"; 
截取str的部分数字
str.substr(开始索引为0,截取长度)；
str.substr(6,4) ;----1998
截取str的部分数字
str.substring(开始索引为0,结束的位置)；取前不取后，后索引+1；
str.substring(6,10);-----1998


charAt(从1开始，截取长度)根据位置获取字符串的值 
str.charAt(16);-----2

获取str的长度str.length。
str.length;------18

查找str里面第一次出现1的位置索，引从0开始
indexOf(1)；-----3
从编号为4的位置开始查找1出现的位置
indexOf(1,4);-----6

以逗号为标记将str转为数组
var str="aa,ttt.123,gg,aa.bb";
var arr=str.split();
console.log(arr);
往str后面添加字符串
str.concat(",11",",55",",66");
往arr后面添加字符
arr.concat(",11",",55",",66");
将第一个一个aa替换为imooc
str.replace("aa","imooc");

编程练习1

编写程序，完成如下功能：

1、定义字符串hello，imooc！

2、取出子串imooc并输出

3、定义日期，值为2019-5-1

4、分别输出年月的值

5、求一组数20，41，15，8的最大值和最小值并输出

运行效果如下：

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
<!DOCTYPE html>
<html>
<head>
    <title>运算符</title>
</head>
<body>
<script type="text/javascript">
	//定义字符串hello，imooc！
    var str="hello,imooc!";

	//取出子串imooc并输出
	console.log(str.substring(6,11));

	//定义日期，值为2019-5-1
	var date=new Date("2019-5-1");

	//分别输出年月日的值
	console.log(date.getFullYear());
	console.log(date.getMonth()+1);

	//求一组数20，41，15，8的最大值和最小值并输出
	console.log("最大值为："+Math.max(20,41,15,8));
	console.log("最小值为："+Math.min(20,41,15,8));
	
</script>
</body>
</html>

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
实例化创建,不指定长度
var arrayObj=new Array();
指定长度为5
var arrayObj=new Array(5);

创建带有默认值的数组
var arrayObj=new Array(2,3,"a","b",8);
隐士创建
var arrayObj=[2,3,"a","b",8];

遍历数组
console.log(arrayObj[0]);输出数组的第一个数
console.log(arrayObj[5]);----undefined
for(var i in arrayObj){
console.log(arrayObj[i]); 
}
var i=0;
var n=arrayObj.length;
for (i;i<n;i++) {
console.log(arrayObj[i])
}

JS对表单元素进行设置

1
2
3
表单是在客户端手机用户信息，然后将数据传给后台input
document.getElementById("userName").value 
onload()页面加载事件，刷新body ，在页面刷新的时候首先执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
单选按钮<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
必须分组即设置name属性才能实现单选功能！！！
设置value属性向后台传递数据

var gender=document.getElementsByName("gender");
var genderText;
if(gender[0].checked){
genderText=gender[0].value;
}else if(gender[1].checked){
genderText=gender[1].value;
}
alert(genderText);
document.getElementsByName(""); 获取到的是一个数组
//gender[0].checked第一个gender被选中
//gender[0].value;第一个gender的值

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
*编程练习 //利用js编写年，月，日的选择框
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id="yyyy"></select>年
<select name="mm" id="mm"></select>月
<select name="dd" id="dd"></select>日
</form>
</body>
</html>
//index.js--------------------
function ymd(){
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
}
/*给列表框赋值,传递表单元素，开始值，结束值*/
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<body onload="ymd()">
<form action="">
<!--如果年份里没有添加onchange="selectYmd()"若先选择年份，
则不会出现2月份有29天的情况

因为onchange="selectYmd()"只在月份上执行了
年份上没有执行 ，所以改变年以后，
不执行onchange="selectYmd()"函数-->
<select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
<select name="mm" id="mm" onchange="selectYmd()"></select>月
<select name="dd" id="dd"></select>日
</form>
</body>
//三级联动 2月对应天数，大月对应天数31，小月对应天数30
function ymd(){

var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");

var date=new Date();
var year=parseInt(date.getFullYear());

initialSelect(yyyy,1999,year);
initialSelect(mm,1,12);
initialSelect(dd,1,31);

//获取年份列表框的长度
var n=yyyy.length;
console.log(n);
//列表框选中某一个条目
yyyy.selectedIndex=Math.round(n/2);

//将某个列表框的条目设置为0，删除天列表框
//dd.options.length=0;

}

function initialSelect(obj,start,end){
for (var i=start;i<=end;i++) {
obj.options.add(new Option(i,i));
}
}
//为月份列表框添加onchange事件
//onchange="selectYmd()"
function selectYmd(){
var yyyy=document.getElementById("yyyy");

var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var m=parseInt(mm.value);
var dayEnd;
if(m==4 || m==6 || m==9 || m==11){
dayEnd=30;
}else if(m==2){
dayEnd=28;
//处理2月的闰年问题
y=parseInt(yyyy.value);
if((y%4==0 && y%100!=0) || (y%400==0) ){
dayEnd=29;
}
}else {
dayEnd=31;
}
//删除列表框
dd.options.length=0;
//添加列表框
initialSelect(dd,1,dayEnd);
}
//闰年是公历中的名词。闰年分为普通闰年和世纪闰年。
//普通闰年:能被4整除但不能被100整除的年份为普通闰年。
//（如2004年就是闰年，1900年不是闰年）；
//世纪闰年:能被400整除的为世纪闰年。
//（如2000年是世纪闰年，1900年不是世纪闰年）；

1
2
3
4
5
6
7
function deleteSelect(){
var dd=document.getElementById("dd");
//此处多更改尝试删除列表框
for (var i=0;i<dd.length;i++) {
dd.options.remove(i);
}
}

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
var flag=true;
function checkInterest(){
//获取复选框
var interest=document.getElementsByName("interest");
//获取了多个复选框后，interest就是一个数组了
for (var i=0;i<interest.length;i++) {
//选中复选框
interest[i].checked=flag;
}
if(flag){
document.getElementById("btn1").value="全不选";
}else{
document.getElementById("btn1").value="全选";
}
flag=!flag;//flag为开关变量

}
function checkInterest1(){
//获取复选框
var interest=document.getElementsByName("interest");
//获取了多个复选框后，interest就是一个数组了
for (var i=0;i<interest.length;i++) {
//反选
interest[i].checked=!interest[i].checked;
//console.log(interest[i].value);得到复选框的值
}

-------------本文结束感谢您的阅读-------------