第1章 准备
- 1-1 为什么学习JavaScript
1)所有主流浏览器都支持JavaScript。
2)全世界大部分网页都使用JavaScript。
3)它可以让网页呈现各种动态效果。
4)做为一个Web开发师,如果你想提供漂亮的网页,令用户满意的上网体验,JavaScript是必不可少的工具。
模板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(标题)</title>
</head>
<body>
(html代码)
<script type="text/javascript">
(js代码)
</script>
</body>
</html>
test.html
<body>
<p id="p1">我是第一段文字</p>
<p id="p2">我是第二段文字</p>
<script type="text/javascript">
document.write("hello");
document.getElementById("p1").style.color="blue";
</script>
</body>
- 1-2 如何插入JS
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(标题)</title>
</head>
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
</html>
- 1-3 引用JS外部文件
我们可以把HTML文件和JS代码分开,并单独创建一个JS文件,其文件后缀通常为.js,然后将JS代码直接写在JS文件中。
test.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="script.js"></script>
</head>
script.js
document.write("引用JS文件!");
- 1-4 JS在页面中的位置
我们可以将JS代码放在html文件中任何位置,但是一般放在网页的head或者body部分。
1)<head>部分
浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
2)<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
document.write("123");
</script>
</head>
<body>
<script type="text/javascript">
document.write("456");
</script>
</body>
</html>
- 1-5 符号
通常在结尾加上一个分号" ; "来表示语句的结束。
虽然分号“ ; ”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。
- 1-6 注释
单行注释,在注释内容前加符号 “ // ”
多行注释以" /* "开始,以" */ "结束
- 1-7 变量
定义变量使用关键字var,变量名可以任意取名,但要遵循命名规则:
1.变量必须使用字母、下划线或者美元符开始。
2.可以使用任意多个英文字母、数字、下划线或者美元符组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量虽然也可以不声明直接使用,但不规范,尽量先声明后使用。
<script type="text/javascript">
var x = 8;
</script>
- 1-8 判断语句 if...else
<script type="text/javascript">
var score =80;
if(score>=60){
document.write("很棒,成绩及格了。");
}else{
document.write("加油,成绩不及格。");
}
</script>
- 1-9 函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入代码的麻烦。
function 函数名()
{
函数代码;
}
test.html
<script type="text/javascript">
function contxt(){
alert("哈哈,调用函数了!");
}
</script>
<body>
<form>
<input type="button" value="点击我" onclick="contxt()" />
</form>
</body>
第2章 常用互动方法
- 2-1 输出内容
第一种:输出内容用" "括起,直接输出" "号内的内容。
document.write("I love JavaScript!");
第二种:通过变量,输出内容
var c = " hello world! ";
document.write( c );
第三种:输出多项内容,内容之间用+号连接。
var c = "hello";
document.write( c+"I love JavaScript" );
第四种:输出HTML标签,标签使用" "括起来。
document.write("< br>"); // 输出一个换行符
- 2-2 alert 消息对话框
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
test.html
<script type="text/javascript">
function f(){
alert("I love JavaScript")
}
</script>
<body>
<input name="x" type="button" onClick="f()" value="点击我,弹出对话框" />
</body>
- 2-3 confirm 消息对话框
语法:confirm(str);
str:在消息对话框中要显示的文本,返回值: Boolean值
通过返回值可以判断用户点击了什么按钮,"确定"时返回true,"取消"时返回false
test.html
<script type="text/javascript">
function rec(){
var mymessage = confirm("你是女士吗?");
if(mymessage==true){
document.write("你是女士!");
}else{
document.write("你是男士!");
}
}
</script>
<body>
<input type="button" onClick="rec()" value="点击我,弹出确认对话框" />
</body>
- 2-4 prompt 消息对话框
语法:prompt(str1, str2);
str1:在消息对话框中要显示的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1.点击确定按钮,文本框中的内容将作为函数返回值
2.点击取消按钮,将返回null
test.html
<script type="text/javascript">
function f(){
var score;
score = prompt("你的分数是多少?");
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不错吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力!");
}
}
</script>
<body>
<input name="abc" type="button" onClick="f()" value="点击我,对成绩做评价"/>
</body>
- 2-5 打开新窗口
语法:window.open([URL], [窗口名称], [参数字符串])
1)URL:在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
2)窗口名称:被打开窗口的名称。
该名称由字母、数字和下划线字符组成。
" _top "、" _blank "、" _self "是具有特殊意义的名称。
_top:框架网页中在上部窗口中显示目标网页
_self:在当前窗口显示目标网页
_blank:在新窗口显示目标网页
相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
3)参数字符串:设置窗口参数,各参数用逗号隔开。
test.html
// 网页https://www.hao123.com将在新窗体中打开,宽为600,高为400,距屏顶100像素,屏左0像素。
<script type="text/javascript">
function f(){
window.open('https://www.hao123.com/','_blank','height=600,width=400,top=100,left=0');
}
</script>
<body>
<input name="giao" type="button" onClick="f()" value="点击我,打开新窗口" />
</body>
2-6 关闭窗口
关闭本窗口:window.close();
关闭指定窗口:<窗口对象>.close();
<script type="text/javascript">
var mywin=window.open("https://www.hao123.com");
mywin.close();
</script>
- 2-7 编程练习
test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浏览器对象</title>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindon()" />
<script type="text/javascript">
function openWindon(){
if(confirm("确定打开新窗口吗?")){
var url = prompt("请输入一个网址","https://www.hao123.com");
window.open( url,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400");
}
}
</script>
</body>
</html>
- 3-1 认识DOM
文档对象模型DOM是定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
将HTML代码分解为DOM节点层次图:
HTML文档可以说是由节点构成的集合,三种常见的DOM节点:
1.元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签
2.文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本
3.属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"
例:< a href="http://www.imooc.com" > JavaScript DOM </a>
- 3-2 通过ID获取元素
1)网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
2)语法:document.getElementById("id")
结果:null或[object HTMLParagraphElement]
test.html
<p id="x">JavaScript</p>
<script type="text/javascript">
var s= document.getElementById("x");
// 输出获取的P标签。
document.write("结果:" + s);
</script>
- 3-3 innerHTML 属性
语法:Object.innerHTML
注意:Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
test.html
<h2 id="du1in9">我是标题</H2>
<script type="text/javascript">
var s = document.getElementById("du1in9");
// 输出原h2标签内容
document.write("原标题:" + s.innerHTML + "<br>");
s.innerHTML = "Hello World";
// 输出修改后h2标签内容
document.write("修改后的标题:" + s.innerHTML);
</script>
- 3-4 改变 HTML 样式
语法:Object.style.property = new style;
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。
test.html
<h2 id="ZBC">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var s = document.getElementById("ZBC");
// 颜色设为红色(red)
s.style.color = "red";
// 背景颜色设为灰色(#CCC)
s.style.backgroundColor = "#ccc";
// 将宽设为300像素(px)
s.style.width = "300px";
</script>
- 3-5 显示和隐藏
语法:Object.style.display = value
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。
test.html
<script type="text/javascript">
function f1(){
var s = document.getElementById("w");
s.style.display="none";
}
function f2(){
var s = document.getElementById("w");
s.style.display="block";
}
</script>
<h1>JavaScript</h1>
<p id="w">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="f1()" value="隐藏内容" />
<input type="button" onclick="f2()" value="显示内容" />
</form>
- 3-6 控制类名
语法:object.className = classname
作用:1.获取元素的class 属性
2.为网页内的某个元素指定一个css样式来更改该元素的外观
test.html
<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>
<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>
第4章 编程挑战
1)编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数。
2)点击相应按钮执行相应操作,点击"取消设置"按钮后,提示是否取消设置,如是执行操作,否则不做操作。
challenge.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" />
<title>style样式</title>
<style type="text/css">
*{ 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="改变颜色" onClick="dcolor()">
<input type="button" value="改变宽高" onClick="dwh()">
<input type="button" value="隐藏内容" onClick="dh()">
<input type="button" value="显示内容" onClick="ds()">
<input type="button" value="恢复原样" onClick="dclear()">
</form>
<script type="text/javascript">
function dcolor(){
var s = document.getElementById("txt");
s.style.color="red";
s.style.backgroundColor="#ccc";
}
function dwh(){
var s = document.getElementById("txt");
s.style.width="400px";
s.style.height="200px";
}
function dh(){
var s = document.getElementById("txt");
s.style.display="none";
}
function dclear(){
if(confirm("确定要取消设置吗?")){
var s = document.getElementById("txt");
s.style.color="#000";
s.style.backgroundColor="#fff";
s.style.width="600px";
s.style.height="400px";
s.style.display="block";
}
}
function ds(){
var s = document.getElementById("txt");
s.style.display="block";
}
</script>
</body>
</html>