JavaScript笔记整理

date :2019/1/29

hello , javaScript.

javascript用于网页和用户之间的交互,  比如提交的时候,用户验证用户名是否为空的判断.

javascript和DOM结合的实例:

一图胜千言，千言不敌一实例
隐藏文本
		显示文本
		
这是一段可以设置隐藏和显示的文字

语言基础, BOM 和DOM才组成了完整的javascript  通过javascript操作DOM对象的时候才会带来很好的实用效果.

SCript标签:

javaScript代码必须放在script标签内

script标签可以放置在html的任何地方 , 一般建议放置在head头标签内,

执行顺序是从上到下 顺序执行.

使用外部js文件  如同css文件一样,当javascript代码特别多难以维护的时候 可以把javascript剥离出来单独放在一个文件中,在html中引用该文件即可.  准备一个hello.js  内容document.write("aaaa");  注意,不要写script标签  因为在js文件中了 不必特意声明.

变量:

可以使用var来进行变量声明 也可以不使用var来进行变量声明.

var a=10;   a=10;

变量命名的规则.和java差不多    开头可以使用_ $和字母  其他部分也可以使用  var3$a  var3%  等这些都是不合法的.

调试:

用alert进行调试:   如 alert(1);  可以使用专业浏览器火狐的调试 还可以 console.log("end");

基本数据类型:

   声明了但是没有赋值的时候 叫做undefined   

  都是var  x= ???

变量类型判断. 使用typeof来进行判断数据类型.  

类型转换:

toString的类型转换 可以在其中输入2 8 16进行进制的转换.

转换为数字.  parseInt  和parseFloat()

转换为布尔值   Boolean()

关于Number和parseInt的区别   都可以来进行数字的转换, 但是当内容包含非数字的时候 number就会返回NAN (NOT A NUMBER)

parseint看情况 如果数字开头就合法 非数字开头就返回NAN

String和toString的区别  String会返回null  而toString会报错.

 

函数:

阶段性练习:

		
		
		地名:
		
		公司类型:
		
		

		公司名称:
		
		老板姓名:
		
		

		money:
		
		产品:
		
		

		价格计量单位:
		
		生成
		
		

总结其中的技术点:  在设置有重复的函数 $("")获取值的时候 可以先写一个function 然后利用通用的函数来简写化

另外 在input或者textarea标签中填写值的时候 可以写document.getElmentById("").value = result 直接赋值给空

/

事件: 

事件是javascript允许html与用户交互的行为,用户任何对网页进行的操作都可以称之为事件.

事件有很多种  鼠标移动 鼠标单击  键盘点击等

		点击一下

 

运算符:

+运算符的多态       

    当两边都是数字的时候 表现为算术运算符.    1+1=2

    当任意一边是字符串的时候 表现为字符串的连接符.    如1+"2"= 12   

逻辑运算符:

绝对等，绝对不等于

==  === 

与==进行值是否相等的判断不同 ，绝对等 ===还会进行 类型的判断
比如 数字1和 字符串'1'比较，值是相等的，但是类型不同
所以==会返回true,但是===会返回false
绝对不等于!== 与上是一个道理

错误处理:

try{
				document.write("试图调用不存在的函数f2
");
				f2();
			}catch(e){
				document.write("捕捉到错误的产生
");
				document.write(e.message);
			}

阶段性练习:

	
		
		
	
	
	
	
	
	
	
		

			

				
起始资金
				
 ￥ 
			
			

				
每年收益
				
 %
			
			

			  
复利年数
			  
 年
			
			

			  
每年追加资金
			  
 ￥
			
			

			   

			
			

			  
本金和
			  
 ￥
			
			

			  
利息和
			  
 ￥
			
			

			  
本息和
			  
 ￥
			
		
	

其中设置border-collepse  和padding :5px 

JS数字对象详解:

数字对象123通过toFixed(2) 保留两位小数:123.00
PI 通过toFixed(3) 保留三位小数:3.142 

数字对象123通过toExponential 返回计数法表达 1.23e+2

方法 valueOf() 返回一个基本类型的数字

还可以设置number. minValue    number.maxValue  等  

JS字符串对象详解:

 

关键字	简介	示例代码
new String()	创建字符串对象	示例代码
属性 length	字符串长度	示例代码
方法 charAt charCodeAt	返回指定位置的字符	示例代码
方法 concat	字符串拼接	示例代码
方法 indexOf lastIndexOf	子字符串出现的位置	示例代码
方法 localeCompare	比较两段字符串是否相同	示例代码
方法 substring	截取一段子字符串	示例代码
方法 split	根据分隔符，把字符串转换为数组	示例代码
方法 replace	替换子字符串	示例代码
方法 charAt 方法 concat 方法 substring	返回基本类型	示例代码
	练习	示例代码

 

创建字符串对象 new string(x);

字符串的长度:  ;length 

返回指定位置的字符:     charAt    返回指定位置的字符     charCodeAt返回指定位置字符对应的Unicode码.

字符串的拼接:   concat

子字符串出现的位置  indexOf 返回子字符串出现的第一次位置     lastindexOf返回最后一次出现的位置.

比较两段字符串是否相同  localeCompare

截取一段字符串: substring

根据分隔符,把 字符串转换为数组:      如x.split(" ");      若是x.split(" ",2)  则就是得到数组 并且只保留前两个数组[0][1].

替换子字符串  replace (search, replacement)  找到满足条件的子字符串search ,  替换为replacement 但是默认情况下只会替换第一个子字符串,如果所有的都需要替换, 需要写成  x.replace(/a/g, "o")

或者     var regS = new ReGEXP("a","g");

           var z = x.replace(regS, "o");

JS数组对象详解:

关键字	简介	示例代码
new Array	创建数组对象	示例代码
属性 length	数组长度	示例代码
for for in	遍历一个数组	示例代码
方法 concat	连接数组	示例代码
方法 join	通过指定分隔符，返回一个数组的字符串表达	示例代码
方法 push pop	分别在最后的位置插入数据和获取数据(获取后删除)	示例代码
方法 unshift shift	分别在最开始的位置插入数据和获取数据(获取后删除)	示例代码
方法 sort	对数组的内容进行排序	示例代码
方法 sort(comparator)	自定义排序算法	示例代码
	练习-排序	示例代码
	答案-排序	示例代码
方法 reverse	对数组的内容进行反转	示例代码
方法 slice	获取子数组	示例代码
方法 splice	删除和插入元素	示例代码
	练习	示例代码

创建数组:  new Array();

数组长度:  x.length 

遍历一个数组 :两种方式  1.  传统的 x< array.length  2 .  (i   in x)   i是下标的意思  x[i]这样来显示每个数组的数值.

连接数组: concat来连接数组

通过指定分隔符 返回一个数组的字符串表达.       x.join()     若是x.join("@")   分隔符不是默认的,  而是@    3@1@4

分别在最后的位置插入和获取元素(获取后删除)    push  pop   

分别在最开始的位置插入数据和获取数据(获取后删除)  unshift  shift 

对数组的内容进行排序:   sort

自定义的排序算法

                  sort()默认采用正排序，即小的数排在前面。 如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()。
                 比较器函数:

              function comparator(v1,v2){

           return v2-v1; //v2-v1表示大的放前面，小的放后面

        }

         调用sort函数的时候，把这个比较器函数comparator作为参数传递进去即可

         x.sort(comparator);

JS日期对象详解:

关键字	简介	示例代码
new Date	创建日期对象	示例代码
getFullYear getMonth getDate	年/月/日	示例代码
getHours getMinutes getSeconds getMilliseconds	时:分:秒:毫秒	示例代码
getDay	一周的第几天	示例代码
getTime	经历的毫秒数	示例代码
setFullYear setMonth setDate setHours setMinutes setSeconds	修改日期和时间

 创建日期对象:  new Date();

获取年月日: getfullYear  和getyear的区别  getYear是得到从1900年到现在年份值差值   getmonth   getdate

获取时分秒: Hours Minutes Seconds Milliseconds

一周的第几天:  getDay  获取 基数从0开始  

经历的毫秒数: getTime    从1970年8:00至今的毫秒数

修改日期和时间:   setXXX

MATH对象详解:

关键字	简介	示例代码
属性E PI	自然对数和圆周率	示例代码
方法 abs	绝对值	示例代码
方法 min max	最小最大	示例代码
方法 pow	求幂	示例代码
方法 round	四舍五入	示例代码
方法 random	随机数

随机数:方法 random 取0-1之间的随机数

 一个 0-1 之间的随机数 : Math.random():
0.7497375327632183
十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 
9
6
8
8
5
6
10
8
8
7

后面加个5  使之限定在5    前面乘5数值 因为在0-1之间 乘积也会在0-5之间    

document.write(Math.random());
		document.write("
");
		for(var i = 0; i<10 ; i++){
		document.write(Math.round(Math.random() * 5)+5);
		document.write("
");

 

 JS设计自定义对象:

为已存在的对象,增加新的方法;

Hero.prototype.keng = function(){

XXXXXXXXXXXX

}

就是找到hero的原型   Object

BOM 即 浏览器对象模型(Browser Object Model)

浏览器对象包括 
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)\

返回上一次的操作.    history.back

返回上上次的操作.    history.go(-2)  -1表示上次 -2表示上上次  依次类推  在浏览器后退按钮显示灰色的时候 history.back不起作用 

跳转到另外一个界面:

 


跳转到首页

JS弹出框:

关键字	简介	示例代码
alert	警告框	示例代码
confirm	确认框	示例代码
prompt	输入框

  


请输入用户名

 输入框.

JS 计时器:

setTimeout	只执行一次	示例代码
setInterval	不停地重复执行	示例代码
clearInterval	终止重复执行	示例代码
document.write()	不要在setInterval调用的函数中使用document.write();

 

点击后3秒钟后显示当前时间，并且只显示一次

每隔一秒钟打印一次当前时间  setInterval  是设置间隔  其中第一个参数 是函数名字 不能加() 

每隔1秒钟，打印当前时间
   

   

 



试一下