作为一个刚步入javaWeb的新手，不知道要用到哪些知识点，更不知从何下手，于是就跑去找有关js的资料，把js从头到尾地学，这篇博文就来谈谈第一次做Javaweb项目需要用到哪些js技术。
js内容广泛、太多太杂，你从头到尾都要学完，要猴年马月才能学完呀，项目什么时候才可以动手啊。在js这方面，我是自学过来的，有着这方面的经验。这里我给大家阐述一下：
var//定义变量，就靠这一个就可以了（不会吧不会吧，这年头变量还要定义的吗，说的就是java） var a = 1;//数字 var b = '字符';//字符 var c = 1.1;//数字 var d = "字符";//字符 //结论：自动识别类型，不用刻意去定义，什么都可以装alert//弹窗，可以用来在弹窗中显示信息，我一般都是用来显示成功、失败之类的信息，也常用来测试代码，跟java中的syso用法一样 alert(123); alert("字符串");
function//在项目中，js是用来提供函数和方法的，这些都是有一定规律性的，掌握这一个基本上都够用了，将函数什么的写在括号里面就可以了 //定义一个方法 function 方法名(){ }
js通过给h5设定的id名，进行识别元素 <p id="thing"></p>
document.getElementById("id")//获取元素，*这个很重要
在js中多是靠这个来获取元素的
var thing = document.getElementById("thing"); /*将thing元素装到thing变量里面，后面要使用当前元素时，可以直接拿thing来使用，省去再次编写document.getElementById("thing")*/
结合上面所述展示一个实际操作：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ var thing = document.getElementById("thing");//获取元素 alert(thing);//输出thing里面装的值 } </script> </head> <body> <p id="thing" onclick="b1()">hello ,dscn</p> </body> </html>6.innerHTML//该元素里面的内容，当前元素里面所有的东西
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ var thing = document.getElementById("thing").innerHTML;//获取元素里面的内容 alert(thing);//输出thing里面装的值 } </script> </head> <body> <p id="thing" onclick="b1()"><span>hello ,dscn</span></p> </body> </html>通过该方法还可以修改里面的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ document.getElementById("thing").innerHTML="<input type='text' value='修改后' />"; } </script> </head> <body> <div id="thing"> <input type="button" value="修改" onclick="b1()"/> </div> </body> </html>调用前：
调用后：
7.value//跟innerHTML有着相当大的区别，这个是获取当前元素value里面的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ var thing = document.getElementById("thing").value;//获取元素 alert(thing);//输出thing里面装的值 } </script> </head> <body> <input id="thing" type="button" value="hello,dscn" onclick="b1()"/> </body> </html>通过该方法可以修改value值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ document.getElementById("thing").value="修改后"; } </script> </head> <body> <input id="thing" type="button" value="hello,dscn" onclick="b1()"/> </body> </html>调用前：
调用后：
8. 通过js修改当前元素的css样式*
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ document.getElementById("thing").style.color="red"; } </script> </head> <body> <input id="thing" type="button" value="修改" onclick="b1()"/> </body> </html>调用前：
调用后：
这里有个规律，修改css样式时，均可这样写js
比如：
document.getElementById("thing").style.color="red";//字体颜色改为red document.getElementById("thing").style.display="none";//隐藏 document.getElementById("thing").style.fontSize="18px";//字体大小改为18px document.getElementById("thing").style.backgroundColor="white";//背景颜色改为白色 document.getElementById("thing").style.width="100%";//宽度改为100% document.getElementById("thing").style.height="100vh";//高度改为100vh以上等等，还有很多，都可以这样写，用来修改当前元素的css样式。
9.if//判断
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 下面是js代码块 --> <script> // 定义一个方法，当点击p标签的时候调用b1()该方法 function b1(){ var thing = document.getElementById("thing").value; if (thing=="修改") { thing="判断成功"; document.getElementById("thing").value=thing; } else{ thing="判断失败"; document.getElementById("thing").value=thing; } } </script> </head> <body> <input id="thing" type="button" value="修改" onclick="b1()"/> </body> </html>原来效果：
成功效果：
失败效果：
这个跟java里面的if是差不多的，经常用在非空判断上，常用的符号有==（相等）、===（从各种意义上完全相等）、&&（和）、||（或）、!=等；
10.鼠标事件
？？？鼠标事件不是通过h5识别的吗，不关我js的事呀，事件想要什么效果，我（js）给你一个方法就是咯。
结尾：
刚写javaweb时，手足无措，不知道该怎么做，就想着把需要的东西都学会才开始，学不完的，知识是永远学不玩得，掌握所需的内容才是重中之中，其他时间再来补充没有用到的知识。自学的时候，先思考要实现成什么样子，再来思考如何去实现，不会的知识就上网搜索，走一步看一步，一步一步得走才是自学的最好方式——因为你懂得了如何使用和所需知识。
差不多就是这些了，可能还有一些我没记住写出来的，也有一些我不知道的，可以在评论里面写出来哦，我会加在这篇博文里面的，编写不易，如果本人的博文对你有所帮助的话，希望给我点个赞，这就是对我最好的认可。
