维尼少少视频学习JavaScript入门篇学习笔记（重点知识整理）
JavaScript入门篇学习笔记（重点知识整理）
1、输出内容（document.write）
var mystr = "我是"; var mychar = "JavaScript"; document.write(mychar + "<br>"); document.write(mystr + mychar + "的忠实粉丝！");
2、alert 消息对话框
var mychar = "I love JavaScript";
alert(mychar);
3、confirm 消息对话框
function rec() {
var mymessage = confirm("你是女士!");
if(mymessage == true) {
document.write("你是女士!");
} else {
document.write("你是男士!");
}
}
4、prompt 消息对话框
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("要努力了!");
}
}
5、打开新窗口（window.open）
window.open('http://www.imooc.com', '_blank', 'height=600,width=400,top=100,left=0');
6、关闭窗口（window.close）
<script type="text/javascript"> var mywin = window.open("http://www.imooc.com"); mywin.close(); </script>
7、代码练习：
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function openWindow() { var open = confirm("确认新建窗口打开网站吗？"); if(open == true) // 新窗口打开时弹出确认框，是否打开 { var url = prompt("通过输入对话框，确定打开的网址", "http://www.imooc.com"); if(url != null) // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/ { window.open(url, "_blank", 'width=400px,height=500px,menubar=no,toolbar=no'); } //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。 else { alert("再见！"); } } else { alert("再见！"); } } </script> </head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body> </html>
8、通过ID获取元素
<p id="con">JavaScript</p> <script type="text/javascript"> var mychar = document.getElementById("con"); document.write("结果:" + mychar); //输出获取的P标签。 </script>
9、innerHTML 属性用于获取或替换 HTML 元素的内容
var mychar = document.getElementById("con"); document.write("原标题:" + mychar.innerHTML + "<br>"); //输出原h2标签内容 mychar.innerHTMl = "Hello world!"; document.write("修改后的标题:" + mychar.innerHTML); //输出修改后h2标签内容
10、显示和隐藏（display属性）
function hidetext() {
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext() {
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
11、改变 HTML 样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <title>javascript</title> <style type="text/css"> body { font-size: 12px; } #txt { height: 400px; width: 600px; border: #333 solid 1px; padding: 5px; } .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" class="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="改变颜色" onclick="changecolor()"> <input type="button" value="改变宽高" onclick="changewh()"> <input type="button" value="隐藏内容" onclick="hiddentxt()"> <input type="button" value="显示内容" onclick="showtxt()"> <input type="button" value="取消设置" onclick="cancel()"> </form> <script type="text/javascript"> var mm = document.getElementById("txt"); //定义"改变颜色"的函数 function changecolor() { mm.style.color = "pink"; mm.style.backgroundColor = "blue"; } //定义"改变宽高"的函数 function changewh() { mm.style.width = "200px"; mm.style.height = "500px"; } //定义"隐藏内容"的函数 function hiddentxt() { mm.style.display = "none"; } //定义"显示内容"的函数 function showtxt() { mm.style.display = "block"; } //定义"取消设置"的函数 function cancel() { var a = confirm("取消设置？"); if(a == true) { // mm.style.width="600px"; // mm.style.height="400px"; // mm.style.color ="black"; // mm.style.backgroundColor = "white"; // mm.style.display="block"; txt.removeAttribute('style'); //用一句话就可以 } } </script> </body> </html>
