JavaScript学习

说明

  因为是个人复习java的总结,所以结构稍显杂乱,有些语句过于口语化.
  下面的内容基本都可以通过js的文档了解,链接如下:
  https://www.w3school.com.cn/jsref/index.asp
  对于学完java来学其实没有什么难度,主要就是了解其中一些类使用,还有语法上和java的一些区别,所以嫌我列举的不好的可以查看文档
  接下来会补充一下bootstrap作为前端框架,之前也用过,但是再复习一下.然后就会进入xml,servlet,tomcat的相关内容.

JavaScript

  由ECMAScript(欧洲计算机协会规定的js语法),BOM(浏览器的对象),DOM(文件的对象)

js和html结合的方式

<script type="text/javascript">
	alert("弹出提示框");
</script>

  第一种也就是使用script标签来结合

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

  第二种则是在外部文件写好具体的js代码之后通过script中的加载资源属性来加载js代码.采用这种方式不要和第一种方式结合,第一种方式中的代码不会执行.

js中的原始数据类型

  string,number,boolean,null,undifined五种,但是其实在js中的定义都是通过var来定义的,也就是.

var str = "123";
var num = 123;
var flag = true;
var date = new Date();
var aa;

  也就是上面这样通过var定义所有的变量,但是这样就无法区分.为了区分其中的数据类型,提供了typeof()来检查数据的类型.

typeof(str);

  就可以获得其中数据的具体类型.
  检查类型之后会发现null在js中是Object类型,这是一个bug
  而NaN是number类型的

js的基本语句

  其实java的一些基础语法都支持

var num=10;
if(num==10){
	alter("true");
}else{
	alter("false");
}

  if语句和java中的一样使用,基本运算符也相同.

var str="111";
switch(str){
	case 1:
		break;
	default:
		break;
}

  java在1.7之后才开始在switch中可以使用String,而js则是所有的数据类型都可以用来使用switch

var i=0;
while(i<10){
	i++;
}

  循环语句也一样,for,do-while循环也相同,写一下只是为了注意其中的类型是var不要写成int了.

  基本的运算符在js中和java中实一样的,但是需要注意一点,在js中没有区分整数和小数的,所以对于存在整数和小数转换的运算中不会出现小数消失的问题.

  对于其中的+需要了解,当+运算符的运算数不是number的时候,就会出现自动转换的问题.
  也就是string转number自动转,如果string中不是数字就会变为NaN
  如果数boolean类型转number,就是1,0模式


  对于比较运算符,类型相同的时候是直接比较,比如string就是按位去比较的.
  如果是不同类型,比如说是string则会转换成number然后再进行比较
  对于运算符==其实比较的是值,而===在js中是比较值和类型.
  对于boolean也可以看作是1和0的模式,可以用来做运算.


  另外需要注意逻辑运算符,也就是将其他类型的数据转换成boolean的类型.
  number:0或NaN代表false,其他未true
  string:除了空字符串其他都是true
  null&undefined:都是false
  对象:所有对象都是true
  所以之后的语句中都会直接使用对象作为判断,而不需要判断对象是否为空来防止空指针异常.

  注意null是空指针,而undefined则是没有赋值.

  ? :
  三元运算符和java相同

  直接向页面输出内容,其实就相当于像在编译的html文件中输入内容.然后达到显示的效果,如果在其中添加一些样式或者是script语句都是可以运行的.

document.write("");

js数组

var arr1 = [1,2,"3"];
var arr2 = new Array[3];
var arr3 = new Array(1,2,3);

  可以通过上面三种方式来生成数组,其中可以存储不同类型的元素,不像java需要限定类型.
  并且可以使用length属性获取数组的长度

js的方法

function方法名(参数列表) {
	方法体;
	返回值可有可无;
}

  在script中定义方法,然后就可以通过方法名调用,传入参数和java没什么区别

var f = function(参数列表) {
	方法体;
	返回值可有可无;
}

  这种方式其实就是上面的变式,使用上没什么区别,只是将一个方法赋给变量,实际的方法名变成了变量名,使用的时候仍是通过方法名传参.
  需要注意参数列表不需要设置变量类型.

var add = new Function("参数列表",方法体和返回值);

  这种方式不大常用,不如前面两种方式来的明晰和熟悉.

js的全局变量和局部变量

  其实只要是在script中定义的变量就是全局变量,都可以使用,即使是同个页面的不同scrit
  定义在方法中的变量则是局部变量,有效范围之后方法内.
  其实如果不给变量定义var就可以创造一个全局的变量,即使再方法里,但是这种方式不推荐,不好阅读,也不符合逻辑.

  ie浏览器中自带一个调试,可以用来看js编写出了什么错误没有.按f12
  建议将script标签放在body的后面,因为很可能出现使用js获取html内容的操作,而html是自上而下加载的,如果执行了js却还没加载标签就会出错.

js的String对象

var str = "abc";

  创建文档

bold()

  加粗方法

fontcolor()

  设置字符串的颜色

fontsize()

  设置字符串的大小

link()

  将字符串显示成超链接

sub()

  设置为下标

sup()

  设置为上标
  其实就是一些和html标签属性相关的方法,具体的可以去查文档.

str1.concat(str2)

  连接字符串

charAt()

  就是获取字符串指定位置的字符,超出范围就什么都不打印

indexOf()

  返回字符串的位置,如果不存在就返回-1

split()

  切分字符串
  这些就是和java中相似的方法,具体就查文档,很多方法基本和java中的相似.

Array的方法

concat()

  实现数组的连接

join()

  使用指定的字符来分割字符串

push()

  可以向数组末尾添加元素,返回数组新的长度,但是需要注意如果添加的是一个数组,会把数组当作一个整体的字符串添加进数组.

pop()

  删除最后的元素

reverse()

  用来打乱数组顺序.
  基本上和java的一些方法没什么区别,具体见文档

Date对象

  获取的时间信息也是带时区信息等的一个格式.

toLocalString()

  可以将时间转换成年月日时间的格式

getFullYear()

  可以获取年

getMonth()

  注意获得的月份是0-11,所以需要增加一下

getDay()

  获取当前的星期,从0-6

getDate()

  获取的是当前的日

getTime()

  获取的是1970/1/1至今的毫秒数,在缓存时用于命名十分好用,计算相距多少日期时十分好用
  也基本是和java一样的

js的Math

  其中的方法是静态方法,也就和java一样直接用类调用

Math.ceil()

  向上舍入

Math.floor()

  向下舍入

Math.round()

  四舍五入

random()

  0-1之间的随机数,可以搭配上面的方法实现指定范围的随机数

pow(a,b)

  次方方法

js的全局函数

  也就是不属于其中任何类的对象,可以直接使用方法名调用的方法.

eval()

  执行js的方法,也就是传入的参数字符串是一条js命令时,执行这个命令

encodeURL()

  可以对字符串进行URL编码,但是不会对一些特殊符号和数字以及字母进行编码,这样编码是为了传递一些如汉字等信息.

decodeURL()

  可以将字符进行解码
  还有对于上面两个方法的进阶版,也就是能够编码更多字符的encodeURIComponent(),decodeURIComponent()

isNaN()

  可以用来判断字符串是否为NaN,其实也就是不是数字的字符串.传入数字返回false,输入不是数字是true

parseInt()

  类型转换成int

RegExp正则表达式对象

[a][ab][a-zA-Z0-9_]

  表示单个字符
  有几个简便的缩写,具体的需要去文档上看

\d

  表示单个字符[0-9]

\w

  表示单个字符[a-zA-Z0-9_]


  量词符号
  ?表示出现0次或1次
  *表示出现0次或者n次
  +出现1次或者多次
  {m,n}表示m<=数量<=n,还可以缺省,也就是少写一个参数,表示最多几次和最少几次
  正则表达式使用的时候一般都会加入开始和结束符号,也就是说

var reg = new RegExp("^\\w{6,12}$");
var reg = new RegExp("正则表达式");	//注意字符串的转译问题

  或者

var reg2 = /^\w{6,12}$/;

  在创建完对象之后就可以使用test()来测试是否符合正则表达式.基本上都是使用第二种模式.这个正则表达的就是6-12位字母数字或下划线.

关于事件的绑定

  也就是对于标签触发什么事件之后会自动触发js语句,然后就能实现一些点击效果等.

"light" src="" οnclick="script中的方法或者直接写js代码">

  这是第一种方式来绑定事件,也就是将事件绑定在某个标签上,但是这样做的耦合度比较高不容易维护.

funuction fun(){}
var click = document.getElementById("light");
click.onclick = fun;

  这种方式则是通过js的DOM获取html中的标签,然后调用方法.这种方式比较好,但是需要注意js的代码需要写在body之后,避免出现还没有加载标签的尴尬.
  DOM的一些使用会在下面详解,这里就是获取了对应id的标签

BOM

  就是浏览器对象模型,也就是将浏览器的各个部分封装成对象,可以对浏览器进行一些操作.
  Windows
  窗口对象,也就是地址栏以下的整个窗口体.
  其中的方法可以不创建对象调用,甚至可以不使用window.调用,可以直接使用方法名调用.因为一个窗口其实就是一个窗口对象,就不需要创建窗口.比如说

alert()

  弹出带有信息和确认按钮的警告框

confirm()

  带有一段信息以及确认和取消按钮的对话框,点击确认会返回true,取消返回false,所以可以用于进行一些判定的操作

prompt("提示信息")

  显示可提示用户输入的对话框,返回值可以拿到用户输入的内容

open()

  可以用来创建窗口对象,也就是弹出一个新的窗口,很容易被拦截

close()

  关闭窗口,那个窗口调用这个方法就会关闭哪个窗口.所以在创建窗口的时候可以给新窗口赋值,然后进行关闭.

var id1 = setTimeout(方法名,毫秒数)
var id2 = setTimeout("js代码;",毫秒数)

  其实就是定时器,在指定毫秒数之后执行方法或者直接传入js代码,只执行一次.

claearTimeout(定时器返回值);

  取消单次定时器

var id3 = setInterval(方法名,毫秒数);

  传入参数和返回值和上面一样,只是这个方法是循环等待执行.

claearInterval(id3);

  取消循环定时器


  其实navigator,location,history,screen都是windows下的对象
  另外下面要提的DOM对象也可以通过window获取一个只读的引用

  Navigator
  浏览器对象,也就是整个浏览器,基本都是返回一些使用的浏览器的信息,基本没什么用
  Screen
  显示器屏幕对象,整个显示器,就是返回屏幕一些信息,也基本没什么用
  History
  历史记录对象

  Location
  地址栏对象,就是地址栏的框

reload()

  其实就是刷新当前页面,或者说重新加载当前页面的

href

  是其中的一个属性,可以设置并返回当前的URL,这就意味着如果是单纯当属性来用,可以用来获取当前的网址,但是如果对其进行重新赋值,那就会重置当前URL,就会跳转其他页面.

DOM

  就是将标记语言文档的各部分封装成对象

  标记在DOM中表现未如下的结构,需要记忆,明白添加元素的时候添加在哪个部分.

核心DOM

  Document文档对象
  其实其中最主要的就是获取标签的一些方法

getElementById()

  根据id获取元素对象,id一般唯一

getElementByTagName()

  根据元素的名称获取元素,返回的是一个元素数组

getElementByClassName()

  根据元素的class获取元素,返回的是一个元素的数组

getElementByName()

  根据元素的name获取元素,返回的是一个元素数组

createAttribute (name)

  可以用来创建一个属性节点,其实就是上面的结构图,可以创建里面各个节点的对象,还有createElement(),createComment(),createText()方法

Element元素对象

removeAttribute()

  可以用来删除属性

setAttribute()

  可以用来设置属性,一般是用来和createAttribute()配合使用的,创建属性节点之后可以对其进行设置,从而达到修改上面结构目录的效果.

Attribute元素对象

Text文本对象

Comment注释对象

Node节点对象

  其实就是上面DOM的结构的所有节点都被认为是一个节点

appendChild()

  可以用来添加子节点

removeChild();

  可以用来删除子节点

replaceChild()

  可以用来替换节点
  需要注意一个问题,也就是在超链接的href中没有设置值的时候会自动跳转到自身.这时候如果使用超链接的点击事件绑定增删节点就会出现,删除之后又马上重新加载当前页面,然后导致效果无法显示.
  有一种方式可以保留超链接的点击功能,但是不会让超链接进行任何的操作,就是在href中使用javascript:void(0);,相当于将超链接的内容变为运行一个没有任何操作的js

paraNode

  是Node对象的一个属性,可以用来获取节点的父节点

this关键字

  如果在超链接的点击方法中传入this作为参数就可以获取到当前的超链接.也就是说也和java差不多,这里获取的是调用的对象.

HTML DOM

  其实就是可以达到标签体的设置和获取,然后使用html元素对象的属性,或者控制样式的功能.

var div = document.getElementById("div");
div.innerHTML = ""

  可以通过标签的这个属性获取标签中的内容,当然也可以像href一样修改,然后达到想要的效果.需要赋值的是一个字符串,注意双引号嵌套单引号
  也可以考虑使用运算符给原本的值添加一些内容.
  这个方式相比于前面通过添加删除Element和Attribute来改变html中的标签方便了很多

div.style.fontSize = "20px";

  也就是通过标签的style可以修改属性.

.div1{}
div.className = "div1"

  这是之前提到的类选择器样式,可以通过改变标签的class实现转换样式为原本设置好的样式的效果.

事件

  其实就是某些组件发生了某些操作,一般通过监听器来实现事件的触发.其实就是上面用到的onclick,可以在按钮或者超链接中设置,从而达到监听的效果,也可以通过document获取对象,然后设置监听,事件触发的具体方式其实就是js代码.

onclick

  单击事件

ondblclick

  双击事件

onblur

  失去焦点,一般用在表单的输入提醒

onfocus

  获取焦点

onload

  加载事件,其实就是一张图片或者一张页面加载完之后进行事件,一般都是给body添加,用来等待整个页面加载完之后进行某些操作

onmousedown

  鼠标按下,定义方法时添加一个形参在方法中,这样就可以获取到具体是哪部分点击了,从左至右为0-2

onmouseup

  鼠标松开

onmouseover

  鼠标放在元素上

onmousemove

  鼠标移动事件

onmouseout

  鼠标移至元素之外

onkeydown

  按键按下,其实这里和鼠标很像,也可以传入形参,用来确认是哪个键,像回车是13

onkeyup

  按键松开

onkeypress

  按键按下并松开

onchange

  域的内容被改变,一般会用在下拉列表中,也就是像选择省市县.

onselect

  文本被选中

document.getElementById("form").onsubmit = function(){
	return false;
}

  确认按钮被点击,可以定义在表单中,用于对表单进行一些检查,避免错误信息的提交,返回false能够阻止表单提交.
  如果采用上面那种方式能够达到限制返回的效果,但是如果使用给表单添加onsubmit的时候需要注意一些事,具体看下面的例子.

<form action="#" id="form" onclick="return checkForm();">
<script>
	function checkForm(){
		return false;
}
</script>

  因为在onsubmit中其实期望的是一个方法调用,而不是一个值,如果直接调用方法,相当于是运行了里面的程序但是没有返回值,只有加了return之后才是将运行的结果返回给onsubmit.而上面的例子可以那么写是因为是给onsubmit赋值了一个方法,运行其中的方法之后,返回的值会传给onsubmit.
  换句话οnsubmit=""其实就是一个事件监听,监听到之后调用字符串里的程序,如果这个程序只是个方法就不会返回值给onsubmit,而是单纯的执行.如果加了return就相当于执行一个return方法运行结果的效果,那么就会将值return给onsubmit.

onreset

  重置按钮被点击

如有错误欢迎读者批评指正!!