JavaScript学习笔记

weixin_43529092

已于 2022-04-02 14:38:10 修改

阅读量118

点赞数

分类专栏： js 文章标签： java spring

于 2019-08-13 23:13:05 首次发布

本文链接：https://blog.csdn.net/weixin_43529092/article/details/99490272

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

课程目标

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

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

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

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

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

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

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

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

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

			第一JS程序

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

    <body>
        <scrip  type="text/javascrip" >
			alert("Hello javascrip") ;
        </scrip>
    </body>

把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(flag);

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

创建方法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/(24*3600*1000)); // 计算当前时间离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 可以设置当鼠标单击后产生的事件
请看下面这个例子：

<body>
     <input type="text" id = "userName" name="userName" value = "123"/>
     <input type="button"  id="btn" onclick="show1()"  value="btn" />
    <script type="text/script">  founction show1( ) { ... }  </script>
</body>

//单击按钮后就会执行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"，之后在进行显示输出。

关于单选按钮的用法：

<input type="radio" name = "xb" value="man" checked="checked" >男 //默认设置为男
<input type="radio" name = "xb" value="female" >女

//对于单选按钮组可以选用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对表单元素进行设

	<body  onload="ymd()">	//单击刷新按钮后的事件
	    <from>
	       <selection  name="optionDate" id = "optionDate"> 
	       </selection>
	    </from>
	</body>

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便会开始被激活
具体设置如下：
// 实现年月的动态刷新效果

<selection id="yyyy" name ="yyyy" onchange = "selectYmd()"> </selection> 年// 年份选择框
<selection id="mm" name ="mm" onchange = "selectYmd()"> </selection> 月  //月份选择框

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%4==0)&&(year%100!=0) || (year%400==0) ;
		if (isLeapYear) dayEnd = 29;
    		break;
    	default:
    		dayEnd = 31;
    		break;
    }
    // 将天数置0后重新添加
    dd.options.length = 0;
    InitSelect(dd,1,dayEnd);
}

<!-- 通过选择列表框来更改值的头像的设置 -->
<body onload="initLogo()">
	<img id="logoimg" src="headLogo/1.gif">
	<select id="logo" onchange="selectLogo()"></select>
</body>

在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属性，实现字符串的拼接。
}

/复选框**/

<form>
	<input type="checkbox" name="interest" value="1">
	<label>游泳</label>
	<input type="checkbox" name="interest" value="2">
	<label>爬山</label>
	<input type="checkbox" name="interest" value="3">
	<label>看书</label>
	<input type="checkbox" name="interest" value="4">
	<label>听歌</label>
	<input type="button" value="全选" onclick="checkInterest()" id="btn1">
	<input type="button" value="反选" name="" onclick="checkInterest1()">
</form>

JS中的设置

var flag = true;
function checkInterest(){
	var interest = document.getElementsByName("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; //开关变量
}

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
分类：键盘事件、鼠标事件、表单事件…

事件：
鼠标事件：onclick 、ondblclick
onmouseover、onmoseout、onmousedown
键盘事件：onkeydown、onkeyup、keypress
表单事件：onfoucs、onsubmit、onblur、onchange

DOM模型： Document Object Model (简称DOM)

什么是DOM? 将文档（页面）表现为结构化的表示方法，使每一个页面元素都是可操控，
DOM将网页和脚本以及其他的编程语言联系了起来。

特点：利用js控制页面中的所有元素，使页面更加“聪明”

分类：元素节点、属性节点、文本节点

常用的DOM操作

序号方法描述
1 getElementById 返回带有指定ID的元素
2 getElementsByTagName 返回包含带有指定标签名称的所有元素的节点列表
3 getElementsByClassName 返回包含带有指定类名的所有元素的节点列表
4 getElementsByName 返回相同名称(name)的元素节点列表

通过JS添加事件的方法：
在html页面进行如下设置：

	<body onload="ff2(  )">  <!-- 页面加载，刷新时执行ff2() 函数，然后为btn设置onclick事件。-->
	         <input type="button"  value="按钮1"  id="btn" >	
	</body>

在js中进行如下设置：

	function  ff2() {  getElementById("btn").onclick = function  () {
		         alert("www.immoc.com");
		}
	}

weixin_43529092

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

课程目标JS的重要作用，HTML+CSS+JS之间的关系JS脚本语言程序控制语言JS脚本语言函数、自定义函数JS脚本语言事件响应及处理、表单处理JS脚本语言DOM模型及操作（重要）课程安排序：为什么学JS，能做什么？与CSS和HTML三种技术之间的关系、JS程序设计程序控制语言、（自定义）函数、数组、注释、js调试事件 JS的事件处理，利用时间对表单等进行功能的设...
复制链接

扫一扫

专栏目录