JavaScript入门
1-1 为什么学习JavaScript
一、你知道,为什么JavaScript非常值得我们学习吗?
1. 所有主流浏览器都支持JavaScript。
2. 目前,全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。
4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
二、易学性
1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。
2.我们可以用简单命令,完成一些基本操作。
三、从哪开始学习呢?
学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。
任务
小伙伴们,JavaScript很神奇,快来试一试:
按照任务进行操作,看看结果窗口会有什么变化。
1.请在右边编辑器的第12行,输入document.write("hello");,看看结果窗口会有什么变化。
2.请在右边编辑器的第13行,输入document.getElementById("p1").style.color="blue"; ,看看结果窗口会有什么变化。
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热身</title>
</head>
<body>
<p id="p1">我是第一段文字</p>
<p id="p2">我是第二段文字</p>
<script type="text/javascript">
document.write("hello");//输出内容为"hello"。
document.getElementById("p1").style.color="blue";//将第一段文字的颜色设置为蓝色。
</script>
</body>
</html>
1-2 新朋友你在哪里(如何插入JS)
任务
添加<script>标签,使第7行代码运行,结果窗口显示"开启JS之旅!"
1.请在右边编辑器的第6行,输入
<script type="text/javascript">
2.请在右边编辑器的第8行,输入</script>
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插入JS代码</title>
<script type="text/javascript">
document.write("开启JS之旅");
</script>
</head>
<body>
</body>
</html>
1-3 我也可以独立(引用JS外部文件)
任务
注意:在右边编辑器中有html文件和script.js文件
1.index.html文件中的第6行使用
<script src="script.js"></script>
代码引用script.js文件。
2.现在在script.js文件中写入document.write("引用JS文件!");
,JS代码就直接运行了。
代码:
<!DOCTYPE HTML>
<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>
//请写入JS代码
document.write("引用JS文件!");
1-4 找到你的位置(JS在页面中的位置)
任务
我们试一试,在不同位置写入JS代码:
1.在右边编辑器的第7行输入document.write("I love");
2.在右边编辑器的第12行输入
document.write("javascript");
<!DOCTYPE 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>
1-5
<!DOCTYPE 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>
认识语句和符号
任务
现在我们来输入两条语句,在网页中输点内容吧!
1. 第7行输入document.write("Hello");
2. 第8行输入document.write("world");
代码:
<span style="font-weight: normal;"><!DOCTYPE HTML>
<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></span>
<span style="font-weight: normal;"><!DOCTYPE HTML>
<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></span>
任务
1. 在右边编辑器中,使用符号//把第7行document.write()
语句后面的文字变成注释
2. 使用/*和*/把第8、9、10行文字内容变成注释
代码:
<span style="font-weight: normal;"><!DOCTYPE HTML>
<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></span>
<span style="font-weight: normal;"><!DOCTYPE HTML>
<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></span>
1-7 什么是变量
什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。
定义变量使用关键字var,语法如下:
var变量名
变量名可以任意取名,但要遵循命名规则:
1.变量名必须使用字母或者下划线(_)开始。
2.变量名必须使用英文字母、数字、下划线(_)组成。
3.变量名不能使用JavaScript关键词与JavaScript保留字。
变量要先声明再赋值,如下:
var mychar;
mychar="javascript";
var mynum = 6;
变量可以重复赋值,如下:
var mychar;
mychar="javascript";
mychar="hello";
注意:
1. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。
2. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。
任务
定义一个名为mynum变量,并赋值为8。
注意:该任务没有输出结果,只是定义变量和赋值。
var mynum = 8;
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变量</title>
<script type="text/javascript">
var mynum = 8;
document.write(mynum);
</script>
</head>
<body>
</body>
</html>
1-8 判断语句(if...else)
if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法:
if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }
假设我们通过年龄来判断是否为成年人,如年龄大于等于18岁,是成年人,否则不是成年人。代码表示如下:
<scripttype="text/javascript">
var myage = 18;
if(myage>=18) //myage>=18是判断条件
{ document.write("你是成年人。");}
else //否则年龄小于18
{ document.write("未满18岁,你不是成年人。");}
</script>
任务
假设小明数字成绩考试了80分,使用if...else语句判断考试成绩,是否及格(60分以上为及格)。补充右边编辑器的第8、12行代码,完成功能。
1.if(score>=60) 条件成立
2.else条件不成立
代码:
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>if...else</title>
<script type="text/JavaScript">
var score =80; //score变量存储成绩,初值为80
if(score>=60)
{
document.write("很棒,成绩及格了。");
}
else
{
document.write("加油,成绩不及格。");
}
</script>
</head>
<body>
</body>
</html>
1-9 什么是函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。
如何定义一个函数呢?基本语法如下:
function 函数名()
{
函数代码;
}
说明:
1. function定义函数的关键字。
2. "函数名"你为函数取的名字。
3. "函数代码"替换为完成特定功能的代码。
我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字:“add2”,代码如下:
function add2(){
var sum = 3 + 2;
alert(sum);
}
函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:
任务
补充右边编辑器第7和15行,实现如下功能:
网页中有一按钮(名字"点击我"),当点击按钮后调用函数contxt(),弹出对话框"哈哈,调用函数了!"。
1. function定义函数
2. 函数调用,在需要的位置直接写函数。
代码:
<!DOCTYPE HTML>
<html>
<head>
<metahttp-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="点击我" οnclick="contxt()">
</form>
</body>
</html>