JavaScript入门

一、概述及第一个js程序

1、js概述

什么是动态页面、静态页面？
动态页面：是否产生了交互，交互就是指人与计算机有没有进行信息沟通的功能，比如查询、注册邮箱等等，都是交互。而带有人机交互的称之为动态页面，而没有人机交互的页面称之为静态页面。

什么BOM？什么是DOM？
BOM称之为浏览器对象模型 DOM成为文档对象模型。

2、第一个js程序

两种引用方式，外部引用

<script type="text/javascript" src="index.js>

内部引用

<script>
alert("输出语句");//alert框弹出
console.log("输出语句");//控制台输出
</script>

js是弱类型语言，不区分数据类型，

二、自定义函数与数据类型

1、自定义函数

动态页面和静态页面，是指有没有和用户交互

自定义函数：完成某一功能的代码段，可以重复执行，方便管理和维护
函数声明
function fun1(){
代码片段
return ***;
}

函数表达式
var fun1=function(x){
return x+1;
}
形参和实参
形参：方法
实参：调用

2、数据类型及转换

js数据类型
number string boolean underfine（未定义，已经声明，但是没有赋值） null

特殊类型：
object 对象类型，在js中常见的有window，document，array等
NaN：Number的一种特殊类型，isNaN()，是数字返回false，不是数字返回true

类型转换：
parseInt()
parseFloat()
Number() 数值类型，包括整数和小数
Boolean()

isNaN()
是否是数值或者是否能转化为数值
var str=“123”;
isNaN(str)=flase;==!isNaN(str)

3、其他数据类型转换

var str=x;
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));//优先字符串转数字使用此方法。
注意
1） 如果x是一个整数。则三者转换效果都是同一个整数
2）如果x是字符串，则都输出NaN;
3 ）如果x是以数字开头，字母结尾。转换成int和float类型则字母舍去字母，number转换会失败结果依然是NaN,字母在前面的情况下，全部 都是错误提示NaN
4）如果x是以0开头的数字，0被忽略
5）x存在小数：转成int型则直接把小数点后面的所有舍掉。其它两个则保留小数全部显示
6）如果x是null，“ ”。转int和float则显示Na N，转number为显示0

三、变量与运算符

1、变量作用域

作用域：全局变量、局部变量
局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。
全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。

2、运算符

顺序	符号	描述
1	()	小括号
2	++、–	自加、自减
3	* / %	乘 除 取模
4	+ -	加 减
5	< <= > >=	逻辑运算
6	== !=	等于 不等于
7	&&	逻辑与
8	||	逻辑或
9	？	三目运算符
10	=	赋值

四、程序控制语句

1、程序控制语句

条件判断类控制语句
if( ){ }
else{ }

if( ){ }
else if( ){ }
else{ }
这里不要忘记，如果用else if（条件）这里的条件不要缺少。

2、多条件控制语句

多条件控制语句switch：
注意语法格式，n必须要和case后面的数字相等并且要有冒号，因为n和数值要相等，所以不能直接判断区间
注意使用break跳出switch
default为其余的情况

3、循环语句

//1+3+5...+99=2500,100以内奇数相加直到和大于等于1000.
var i=0;
var sum=0;

for(;i<=100&&sum<=1000;i++){
	if(i % 2 == 0){
		continue;
	}
    sum+=i;
}

/*
while(i<=100&&sum<=1000){
	i++;//i++必须放在if语句之前，否则i=2时，i不会产生变化，
	    //会一直无限循环if语句。for语句不会产生此类问题，因为在每次循环之初i均会产生变化
	    //因为如上原因：i的初始值与for也不一样，i初始值为0，不能为1。for语句可以为0或者1。
	if(i%2==0){
		continue;
	}
	sum+=i;
}
*/
/*
do{
	i++;//i++必须放在if语句之前，否则i=2时，i不会产生变化
	    //会一直无限循环if语句。for语句不会产生此类问题，因为在每次循环之初i均会产生变化
	    //因为如上原因：i的初始值与for也不一样，i初始值为0，不能为1。for语句可以为0或者1。
	if(i%2==0){
		continue;
	}
  	sum+=i;
}while(i<=100&&sum<=1000);
*/
console.log(sum);    

五、函数

1、字符函数

内置函数：
字符类函数：substr(起始位置，截取长度) 作用：截取字符串
substring(起始位置，结束位置) 作用：截取字符串（包括起始位置，不包括结束位置）
charAt(位置索引) 作用：返回位置索引对应的字符串
属性length获得字符串长度
indexOf(fn,index) 作用：从第index个位置（若不输入index则从第0个位置开始）开始寻找fn第一次出现的位置

var arr[] = str.split(a);以字符a为介质，将字符串str分割，以数组的形式返回
str.concat(a);在原字符串的后面追加字符a
arr.concat(a,b,c);在原数组的基础上追加a,b,c三个元素
str.replace(a,b);将字符串str中第一次出现的a替换成b

2、日期函数

日期函数：
对象初始化：var d1=new Date();获取当前时间的对象 var d2=new Data(“2020-1-1 10:58:58”);设置时间对象
函数：
getMonth()获得月份（JS中月份的取值范围为0-11）
getDate()获取几号
getFullYear()获取年份
getHours()获取小时
getMinutes()获取分钟
getSeconds()获取秒
getTime()将日期转换为毫秒
getDay()获得星期几，取值范围为0~6；

3、数字函数

数学函数：
Math.round(参数) 对参数进行四舍五入取整
n.toFixed(2) 对n进行四舍五入，并保留两位小数
Math.min(参数1,参数2,…)求取n个参数的最小值（Math.max同理）
Math.abs(参数)求绝对值

六、数组

数组：
实例化创建数组：var arr=new Array();
声明并创建指定长度的数组：var arr=new Array(size);
声明并创建带有默认值的数组：var arr=new Array(2,4,“a”,“y”,8);或var arr=[2,4,“a”,“y”,8];
增强型for循环：for(var i in arr);

七、表单元素设置

1、JS对表单元素进行设置1

document.write()写入在浏览页面

什么是表单？
客户端收用户的信息，然后将数据递交给后台程序操控这些数据
js是做什么的？
设置和获取表单的各种内容
例如：表单初始化
placeholder 提示文字

事件
onclick 点击事件 οnclick=“执行的函数,执行函数2”;
document dom模型 浏览器 .getElementById().value=“999”;
onload 刷新body

单选按钮 有共同的name 设置value为数字或字母
获取名字 documemt.getElementsByName(“name”);
通过checked选项默认

列表框(三级联动)
select
options.add(new Option(“1”,“1”));

onchenge改变事件

2、JS对表单元素进行设置2

通过.getElementsByName(“xb”)获取到的是一个数组,返回的是对应的value值；
xb[0].checked判断第0个位置的单选按钮是否被选中，返回true或false。

单选按钮
1.通过name=“ ”获取标签
var sex=document.getElementsByName(“sex”);
2.sex[0].value;//值,[0]代表数组第一个元素。
3.sex[0].checked;//是否选中
4.单选框中表示默认选中：checked=“checked”
男
图片中的xb即是sex

var xbText; //定义变量
单选按钮的用法；通过判断数组元素赋值
if(xb[0].checked){ //checked用于判断是否选中，若选中则返回1
xbText=xb[0].value; //第一个元素的值保存
}else{
xbText=xb[1].value; //第二个元素的值保存
}
alert(xbText);

3、JS对表单元素进行设置3

<select name="" id=""></select> 列表框标签的使用
yyyy=getElementById(); 获取列表框的属性id
yyyy.options.add(new Option(i,i));(页面显示内容，vlaue)，给列表框中添加选项，新的选项为（name，value），第一个参数表示在页面中显示的具体内容，第二个参数是它的value值,两个一般设置为一样。可以用for循环来设置，省去了一个一个添加的麻烦。

易错点：
yyyy.options.add(new Option(i,i));(值，名字)，
注意，第一个是options，首字母小写，后面是复数！！！
第二个，添加new选项的时候，是“Option”，没有s，首字母大写！！！

4、JS对表单元素进行设置4

如何实现年月日的三级连动
年：默认选中中间年份---------selectedIndex
var year=parseInt(yyyy.getElementById(“yyyy”).length);
yyyy.selectedIndex=Math.round(year/2);
月份变动，天数跟着变动
例如：m=mm.getElementById(“mm”).value;
mm=parseInt(m);
if(mm==2){
dayEnd=28;
}
dd.options.length=0;
initSelect(dd,1,dayEnd);

5、JS对表单元素进行设置5

每删除一个数据，dd.length将会减1并且下标对应的数字会发生变化//就是列表框长度减一
dd.options.remove(1);将第二个元素删除//列表框的下标从零开始
列表框内元素的删除
①全部删除 em.options.length = 0;
②制定元素次序 em.options.remove(1);将第二个元素删除
例：循环删除表单
列表框对象名.length//获取列表框长度
function deleteSelect(){
var dd=document.getElementById(“dd”);
for (var i = dd.length; i > 0; i–) {//既然长度dd.length会改变那么循环从末尾开始即可(大多数循环判断语句不能为变量)
dd.options.remove(0);//由于下标会顶上去所以每次删除0下标的条目
}
}

6、JS对表单元素进行设置6

根据列表框数据，更换对应Logo
在列表中加入onchange事件
改变图片数据为
var img = document.getElementById(“img”);
img.src=“image/Logo”+n+".gif";

7、JS对表单元素进行设置7

单击事件：οnclick=“执行函数1，执行函数2…”
刷新页面就会显示函数功能的事件：οnlοad=“执行函数1，执行函数2，…”（当前页面显示前先执行onload中的内容）
获取单选按钮的值：document.getElementsByName() 利用checked属性（若选中，则checked值为true）和value属性
下拉菜单（三级联动）：通过在body中的onload事件
函数：
var yyyy=document.getElementById(“yyyy”);
yyyy.options.add(new Option(“1”,“1”));（值value，显示的名字）
获取某一下拉列表的长度：yyyy.length；
设置某一下拉元素为默认值：yyyy.selectedIndex=n（要先获取该下拉表单的长度，n是默认值在下拉表单中的位置索引）
删除下拉列表中的元素：dd.options.length=0;将该下拉列表的长度设置为0，效果是删除
onchange事件配合select标签使用，当下拉表单中的元素发生改变时就会触发onchange事件
删除下拉列表中的某一元素：dd.options.remove(n); n为要被删除的元素的位置索引

八、DOM与事件总结