废话不多说直接开始
JS全名JavaScript，主要应用于Web，是非常重要的一部分
1.JS代码可以插入在几乎html的全部地方，使用方法有两种，一种为直接在html上写(几乎可以忽略不用)，第二种就是引入js文件
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb18030"> <title>插入js代码</title> //可插入 //第一种 <script type="text/javascript"> //一个；视为一个JS语句的结束 document.write("title位置可以插入js"); </script> //第二种 引入文件 <script src="script.js"></script> </head> <body> <script type="text/javascript"> document.write("body位置可以插入js"); //js定义变量用var， //1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。 //2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。 var a = 8; var mychar; mychar="javascript"; mychar="hello"; </script> </body> </html>2.JS的if…else 我个人感觉JS的ifelse和C语言没什么差别
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>判断语句</title> <script type="text/javascript"> var score =80; //score变量存储成绩，初值为80 if(score>=60) { document.write("很棒，成绩及格了。"); } else { document.write("加油，成绩不及格。"); } </script> </head> <body> </body> </html>3.JS函数的调用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>函数调用</title> <script type="text/javascript"> function contxt() //定义函数 { alert("哈哈，调用函数了!"); } contxt(); </script> </head> <body> <form> <input type="button" value="点击我" onclick="contxt()" /> </form> </body> </html>4.JSdocument的使用 document是输出信息
<script type="text/javascript"> document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。 </script> <script type="text/javascript"> var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。 </script> <script type="text/javascript"> var mystr="hello"; document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接 </script> <script type="text/javascript"> var mystr="hello"; document.write(mystr+"<br>");//输出hello后，输出一个换行符 document.write("JavaScript"); </script>5.JSalert的使用 alert是出现提醒框
<script type="text/javascript"> var mynum = 30; alert("hello!"); alert(mynum); </script>6.JSconfirm confirm是选择框 目前我只知道只能选择是和否
<script type="text/javascript"> var mymessage=confirm("你喜欢JavaScript吗?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能强大，要学习噢!"); } </script>7.JSprompt prompt相对来说难一点，用法是prompt(str1, str2);str1是提示文字，str2是文本框内提示文字，
var myname=prompt("请输入你的姓名:"); if(myname!=null) { alert("你好"+myname); } else { alert("你好 my friend."); }8.JS的window开关 open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法： window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。 窗口名称：可选参数，被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_self"具有特殊意义的名称。 _blank：在新窗口显示目标网页 _self：在当前窗口显示目标网页 _top：框架网页中在上部窗口中显示目标网页 3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。 4.name 不能包含有空格。 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。 例子
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.open</title> <script type="text/javascript"> function Wopen(){ window.open( 'http://www.imooc.com', '_blank', 'width=300,height=200,top=100,left=0' ) } </script> </head> <body> <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" /> </body> </html>close()关闭窗口 用法： window.close(); //关闭本窗口 或 <窗口对象>.close(); //关闭指定的窗口 例如:关闭新建的窗口。
注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。
1.文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 2.通过ID获取元素 学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。 语法: document.getElementById(“id”) ; 3.innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。 2.注意书写，innerHTML区分大小写。 我们通过id="con"获取
元素，并将元素的内容输出和改变元素内容，代码如下: 4.改变 HTML 样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。 语法: Object.style.property=new style; 注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>5.显示和隐藏（display属性） 网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>display</title> <script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display="none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display="block"; } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form> </body> </html>6.利用JS修改css
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>className属性</title> <style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body> </html>直接结束，不多逼逼。
