JS学习笔记

课程目标

JS的重要作用，HTML+CSS+JS之间的关系
JS脚本语言程序控制语言
JS脚本语言函数、自定义函数
JS脚本语言事件响应及处理、表单处理
JS脚本语言DOM模型及操作（重要）

课程安排

序： 为什么学JS，能做什么？与CSS和HTML三种技术之间的关系、

JS程序设计 程序控制语言、（自定义）函数、数组、注释、js调试

事件 JS的事件处理，利用时间对表单等进行功能的设计

DOM DOM的结构、dom-html、dom-css、dom-事件

综合作业 利用js技术，对页面添加并实现业务功能

javascrip学习入门，简称js，它是一个脚本编程语言。它可以减少网页的规模以及提高网页的访问速度。并可以使页面的功能更加丰富

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

JS需要安装才能使用吗？
不许要，任何浏览器都支持js脚本。

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

	第一JS程序

1、使用在html页面中插入JavaScrip 可以在页面的任何部位插入，更常见的做法是外部单独的一个js文件。
请看下面这个例子：


alert ( “Hello javascrip” ) ;


把JS的程序写在

//一般都会使用这种方式进行引用

JS变量：与其它程序语言相同，是用来临时存储信息。但是也有不同的地方
JS的变量没有数据类型的区分，这句话只对了一半，因为只是在创建的时候不区分数据类型，在赋值的时候是区分数据类型的。
JS种的数据类型称之为弱数据类型
创建方法1 var x = 1;
var x = 2, name = “zhangsan”;
创建方法2 var x;
x = 1;
提示：JS的变量，区分类型，但是没有int之类的关键词。

JS调试 alert弹框调试、Console.log控制台输出调试
作用 观察变量值的变化规律，是否符合程序设计的目的
示例： alert(flag);
console.log(flog);

自定义函数：自定义函数是完成某一功能的代码段，可重复执行，方便管理和维护

创建方法1 这种是函数声明 可以先使用，后定义。
function fun1() { 代码片段 return ***; }
创建方法2 这种叫做函数表达式 必须先定义后使用
var fun1 = function ( x ) { return x+1 };

	数据类型及类型转换

JS当中，虽然定义变量没有区分数据类型，统一用var来定义变量，但是在使用的时候却需要进行数据类型之间的转换。

数据类型： number、string、boolean、underfine、unll
编号 类型 作用
1 number 数字类型，整型浮点型都包括
2 string 字符串类型，必须放在单引号或者双引号中
3 boolean 布尔类型，只有true和false两者值
4 underfine 未定义，一般指的是已经声明，但是却没有赋值的变量
5 null 空对象类型，var a = null ; 和 var = “” 有区别；

特殊类型 object、NaN
类型 作用
1 object 对象类型，在is常见的有window,document,array等
2 NaN 是Number的一种特殊类型，isNaN() ，如果是数字返回flase,不是数字返回true

类型转换：parselnt() parseFloat() Number() Boolean()
作用 强制类型转换、隐式类型转换
示例：founction test1(){
console.log(“start…”)
var x = “a123”;
var flag = isNaN(“123”); //判断是不是数字，是数字返回false，不是则返回true
var n = parseInt(x);
console.log(“n===”+n);
console.log(“flag===”+flag);
}

示例：
str = “123”; //将字符串“123”赋值给str
var str1 = str + 1 ; // 等于将字符串后面拼接了"1"结果变成"1231"
var num = parseInt(“123”) ; // 将字符串123强制转换为整数，变成123。
var num1 = str*1 + 1; // result:124; 将str的值乘以1后自动将字符串转换为数字进行加减操作。
isNaN() //该函数返回一个boolean类型的值，当传入的是数字的时候，返回flase 是字符串的时候返回true;

请看下面这个例子：
example: 1
var str=“123abc”;
console.log(parseInt(str)); //第一行输出：123
console.log(parseFloat(str)); //第二行输出：123
console.log(Number(str)); // 第三行输出：NaN来表示它不是一个数字。

example: 2
var str=“a123”;
console.log(parseInt(str)); //三行全部输出NaN
console.log(parseFloat(str));
console.log(Number(str)); //优先使用Number() 可以很好的显示出程序中的bug。

使用parseInt(“123.94”) // result : 123 ; 不管小数点后面的值是多少，都统一输出整数部分。

如果是null会怎么样呢？
var str = null; 当str =""; //输出结果和赋值null一样。
console.log(parseInt(str)); //前两行输出NaN
console.log(parseFloat(str));
console.log(Number(str)); //输出 0；

布尔类型的转换：Boolean(str); //当str的值是null或者是""空的字符串的时候结果是false，当有内容时显示true;
Boolean( 0 ) ; //result: false ; 当是0的时候转换后结果是false,其它值转换结果是true ;

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

比较运算符：用于比较两个值。结果是true或者是false
运算符范围：> >= < <== != 六种比较运算符
示例： x<10为true // x=2;
比较运算符的优先级：略

NEXT:流程控制语句

条件判读语句：if() { } else { }
多条件控制：switch(var) {case var1:…break; case var2: … break; …}
循环语句跟其它编程语言相同，不需要过多的介绍。

NEXT:内置函数
1、字符串内置函数：
substr( cur1,length) //该函数有两个参数，cur1表示起始位置截取的字符串的位置下标，length表示将要截取字符串的长度。
2、substring( cur1,cur2 ) //此函数也是截取字符串的函数，cur1表示开始处位置，cur2表示结束的位置，结束的位置不包含在所要截取的字符串的位置，所以要往下写一位。
3、charAt( args ) //表示从字符串的某一位置处截取一个字符，args表示的是截取的位置处的下标。
4、length的使用，返回字符串的长度。用法： str.length ;
4、indexOf( ) 函数的使用，它是找某个字符在字符串当中第一次出现的位置，并返回它的索引值。
5、indexOf( “A”, 3 ) //表示从下标索引为3的位置开始查找字符"A"第一次出现的位置并返回它的下标索引。

例：var str =“aa,bb,cc,dd,ee,ff”;
var arr = str.split(","); //结果将会返回一个数组；
可以对数组进行索引，如：arr[0];
调用arr.concat( “gg,”,“ff”,“kk” ) ; // result: [ aa,bb,cc,dd,ee,ff,gg,ff,kk]; 会更新数组，将参数加入到数组中。
调用str.concat(“gg”,“ff”,“kk”) ; // result: “aa,bb,cc,dd,ee,ffggffkk”; 将会把参数直接拼接在最后一个元素的末尾。
replace( oldStr,newStr ) ; //replace()函数的用法，只替换第一个符合要求的字符串。

6 日期函数：Date( ) 对日期进行初始化，可以获取当前的系统日期，也可以指定一个日期。
getDate( ) 获取当前天数，是几号的意思。
getDay( ) 是获取当前星期几 （星期天返回0）getMonth( ) 获取当前月份（注意JS当作的月份是从0~11，所以获取月份的后面加1）
getFullYear( ) 获取当前年份 getHours()获取小时 getMinutes() 获取当前分钟 getSeconds() 获取秒
请看下面的例子：
var d1 = new Date();
var d2 = new Date(“2020-1-1”);
console.log(d1.getFullYear());
console.log(d1.getMonth()+1);
console.log(d1.getDate()); //获取几号
console.log(d1.getHours());
console.log(d1.getMinutes());
console.log(d1.getSeconds());
var n = d2.getTime() - d1.getTime();
console.log(n/(2436001000)); // 计算当前时间离2020-1-1的时间还有多少天。
// 自定义函数实现当前时间的格式化：2019-5-13 14:53:45
function fun_fmtDate(){
var d = new Date();
var yyyy,mm,dd,hh,mi,ss;
yyyy = d.getFullYear();
mm = d.getMonth()+1; // 注意：月份需要加1
dd = d.getDate();
hh = d.getHours();
mi = d.getMinutes();
ss = d.getSeconds();

var str = yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
return str;

}

数学函数：Math.round max min abs
1 四舍五入函数：Math.round();
2 保留n位小数点：number.toFixed( n ) ; // 例如：num = 5.7915 num.toFixed(2) 结果是5.79
3、最大值：Math.max(23,45,7,12,52) //返回一组数当中的最大值。
4、最小值：Math.min(23,45,7,12,52) //返回一组数当中的最小值。
提示： min与max函数当参数当中有不能转换为数字的情况下，返回NaN值。

// 数组：Array
//创建一个数组。不指定长度，实例化创建数组
// var arrayObj = new Array();
// 声明或者创建一个数组并且指定长度的数组
// var arrayObj = new Array(5);
// 声明或者创建一个带有默认值的数组；
// var arrayObj = new Array(2,4,“a”,“y”,8);
// 创建一个数组并赋值的简写，又称隐式创建数据
var arrayObj = [2,4,“a”,“y”,8];
// 数组赋值、字符下标、数组遍历
arrayObj[0] //访问0号元素，result:2
arrayObj[10] // 访问10号元素，由于不存在下标为10的元素，因此输出：undefined

//遍历数组
//推荐下面的for … in … 遍历数组
for(var i in arrayObj){
console.log(arrayObj[i]);
}
普通for循环
for(var i = 0;i<arrayObj.length;i++)
{
console.log( arrayObj[i] );
}

Next: JS对表单元素进行设置（使用频率很高，所以要认真学习）
什么是表单：表单的主要作用是在客户端接受用户的信息，然后将数据递交给后台程序
来控制这些数据
JS做什么？ 设置或获取各种表单元素的值
示例：利用js给列表框等表单元素初始化
onclick 可以设置当鼠标单击后产生的事件
请看下面这个例子：

//单击按钮后就会执行show1()函数体的内容。如果有多个事件，则 οnclick="show1(),show2(),show3()..."; //假设上面的show1规定的内如如下： function show1( ) { document.getElementById("userName").value = "imooc" } //单击btn按钮后，原来文本款的"123"的默认输出内容变更为"imooc"。 在body标签里面添加id可以刷新页面的事件 content... /* 当单击页面刷新按钮的时候进行show2()的函数处理 */ 假如show2的函数如下： function show2( ) { document.getElementById("userName").value = "imooc" } //当进行页面刷新的时候，会执行show2()函数体的内容，将文本框的值修改为"imooc"，之后在进行显示输出。

关于单选按钮的用法：
男 //默认设置为男
女
//对于单选按钮组可以选用ByName来获取对象数组。
function show1() {
var xbText;
var xb = document.getElementByName(“xb”);
if( xb[0].checked ) {
xbTest = xb[0].value;
} else {
xbTest = xb[1].value;
}
alert(xbTest);
}

/7-3 JS对表单元素进行设置***/
//单击刷新按钮后的事件





JS部分的设置：
function ymd ( ){
var setYear = document.getElementById( “yyyy” );
for( var i = 1970; i<=2019;i++ ) {
setYear.options.add( new Option( i,i ) ) ; //这是固定写法。
}
}
/优化后的代码结构/
function ymd(){
//获取id = yyyy的控件
var yyyy = document.getElementById(“yyyy”);
var mm = document.getElementById(“mm”);
var dd = document.getElementById(“dd”);
var date = new Date();
InitSelect(yyyy,1999,date.getFullYear());
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)); //给列表框添加条目
}
}

// 现在程序还存在这样一个问题，月份的天数不一定是相同的，例如2月时候是28天，到三月就变成31天
//所以要实现切换不同的月份的时候，可以实现天数的动态刷新,平年和闰年的问题。
这时候可以使用 onchange 事件，也就是当月份就行切换的时候，onchange便会开始被激活
具体设置如下：
// 实现年月的动态刷新效果
年// 年份选择框
月 //月份选择框

function selectYmd(){
var yyyy = document.getElementById(“yyyy”);
var mm = document.getElementById(“mm”);
var dd = document.getElementById(“dd”);
var m = parseInt(mm.value);
var dayEnd;
switch(m){
case 4:
case 6:
case 9:
case 11:
dayEnd = 30;
break;
case 2:
dayEnd = 28;
var year= parseInt(yyyy.value);
var isLeapYear = (year%40)&&(year%100!=0) || (year%4000) ;
if (isLeapYear) dayEnd = 29;
break;
default:
dayEnd = 31;
break;
}
// 将天数置0后重新添加
dd.options.length = 0;
InitSelect(dd,1,dayEnd);
}

//通过选择列表框来更改值的头像的设置

在js中的设置
function initLogo(){
var logo = document.getElementById(“logo”);
for(var i=1;i<=15;i++){
logo.options.add(new Option(i,i));
}
}

function selectLogo(){
var logo = document.getElementById(“logo”);
var n = logo.value;
var logoimg = document.getElementById(“logoimg”);
logoimg.src=“headLogo/”+n+".gif"; //更改对象的src属性，实现字符串的拼接。
}

/复选框**/

游泳 爬山 看书 听歌 /**************************************************************************************/ JS中的设置 var flag = true; function checkInterest(){ var interest = document.getElementsByName("interest"); //复选框返回的是一个对象数组 for(var i=0;i

function checkInterest1(){
var interest = document.getElementsByName(“interest”);
for(var i=0;i<interest.length;i++){
interest[i].checked = (!interest[i].checked);
console.log(interest[i].value); //获取对象的value值
}
}

注意：如果是通过id获得对象则使用getElementById(“idName”) ;
如果是通过name获取对象则使用：getElementsByName(“Name…”);
注意这里的函数写法，id的中间少了s

---

Next:事件

什么是事件：事件是指被程序发现的行为或者发生的事情，而且它可能会被程序处理
特点：JS的事件，都是以on开头，有onlick\onchange\onload
分类：键盘事件、鼠标事件、表单事件…