快速认识JavaScript
熟悉JavaScript基本语法
窗口交互方法
通过DOM进行网页元素的操作
学会如何编写JS代码
运用JavaScript去操作HTML元素和CSS样式
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>热身title>head><body><p id="p1">我是第一段文字p><p id="p2">我是第二段文字p><script type="text/javascript">document.write("hello");document.getElementById("p1").style.color="blue";script>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb18030"><title>插入js代码title><script type="text/javascript">document.write("开启JS之旅!");script>head><body>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>引用JS文件title><script src="script.js">script>head><body>body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS代码的位置title><script type="text/javascript">document.write("I love");script>head><body><script type="text/javascript">document.write("javascript");script>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识语句title><script type="text/javascript">document.write("Hello");document.write("world");script>head><body>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>隐藏的注释title><script type="text/javascript">document.write("神奇的JS,快把我们隐藏了!"); // 快快把我变成单行注释/*知道吗
JS可以实现很多动态效果
快来学习吧!*/script>head><body>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>变量title><script type="text/javascript">var mynum = 8;script>head><body>body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>判断语句title><script type="text/javascript">var score =80; //score变量存储成绩，初值为80if(score>80)
{document.write("很棒，成绩及格了。");
}else
{document.write("加油，成绩不及格。");
}script>head><body>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>函数调用title><script type="text/javascript">function contxt() //定义函数{
alert("哈哈，调用函数了!");
}script>head><body><form><input type="button" value="点击我" onclick="contxt()" /> form>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>document.writetitle><script type="text/javascript">var mystr="我是";var mychar="JavaScript";document.write(mychar+"
");document.write(mystr+mychar+"的忠实粉丝!")script>head><body>body>html>
image.png
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>alerttitle><script type="text/javascript">function rec(){var mychar="I love JavaScript";
alert(mychar)
}script>head><body><input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>alerttitle><script type="text/javascript">function rec(){var mychar="I love JavaScript";
alert(mychar)
}script>head><body><input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>confirmtitle><script type="text/javascript">function rec(){var mymessage= confirm("你是女士吗?");if(mymessage==true)
{document.write("你是女士!");
}else
{document.write("你是男士!");
}
}script>head><body><input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>prompttitle><script type="text/javascript">function rec(){var score; //score变量，用来存储用户输入的成绩值。
score = prompt("你的分数是多少？");if(score>=90)
{document.write("你很棒!");
}else if(score>=75)
{document.write("不错吆!");
}else if(score>=60)
{document.write("要加油!");
}else
{document.write("要努力了!");
}
}script>head><body><input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />body>html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>window.opentitle><script type="text/javascript">function Wopen(){window.open('http://www.123.com','_blank','height=600,width=400,top=100,left=0');
}script>head><body><input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >body>html>
image.png
语法：
window.open([URL], [窗口名称], [参数字符串])
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
window.close(); //关闭本窗口
.close(); //关闭指定的窗口
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>close()title><script type="text/javascript">var mywin=window.open("http://www.123.com");
mywin.close();script>head><body>body>html><html><head><title> new document title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> // 新窗口打开时弹出确认框，是否打开function openWindow(){var wep;var op;
wep = confirm("是否打开新网页？");if(wep==true)
{
op = prompt("默认网址为：","http://www.123.com/");if(op!=null)window.open(op,'_blank','width=400,height=500,menubar=no,toolbar=no');
}else
alert("操作结束！！");
}// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com///打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。script> head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> body>html>HTML代码分解为DOM节点层次图:
image
通过ID获取元素
document.getElementById(“id”)
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>document.getElementByIdtitle>head><body><p id="con">JavaScriptp><script type="text/javascript">var mychar= ;document.write("结果:"+mychar); //输出获取的P标签。document.getElementById("con")script>body>html>innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>innerHTMLtitle>head><body><h2 id="con">javascriptH2><p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。p><script type="text/javascript">var mychar= ;document.write("原标题:"+mychar.innerHTML+"
"); //输出原h2标签内容document.getElementById("con")document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
mychar.innerHTML="Hello world";script>body>html>改变 HTML 样式
语法:
Object.style.property=new style;
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>style样式title>head><body><h2 id="con">I love JavaScriptH2><p> JavaScript使网页显示动态效果并实现与用户交互功能。p><script type="text/javascript">var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor ="#ccc";
mychar.style.width="300px";script>body>html>显示和隐藏(display属性)
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>displaytitle><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>JavaScripth1> <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。p> <form><input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> form>body> html>className 属性设置或返回元素的class 属性。
获取元素的class 属性
<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><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascripttitle><style type="text/css">body{font-size:12px;}#txt{height:400px;width:600px;border:#333 solid 1px;padding:5px;}p{line-height:18px;text-indent:2em;}style>head><body><h2 id="con">JavaScript课程H2><div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。h5><p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。p><p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。p><p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。p>div><form><input type="button" value="改变颜色" > <input type="button" value="改变宽高" ><input type="button" value="隐藏内容" ><input type="button" value="显示内容" ><input type="button" value="取消设置" >form><script type="text/javascript">//定义"改变颜色"的函数
obj.style.color
obj.style.backgroundColor//定义"改变宽高"的函数
obj.style.width
obj.style.height//定义"隐藏内容"的函数
obj.style.display="none";//定义"显示内容"的函数
obj.style.display="block";//定义"取消设置"的函数
confirm()script>body>html>若本号内容有做得不到位的地方(比如：涉及版权或其他问题)，请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
这是一个有质量，有态度的公众号
点关注，有好运
文章不错，点个赞吧! 
扫一扫
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
