您的位置：360文档中心› JS第01章JavaScript基本语法

JS第01章JavaScript基本语法

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

赋值
count = 5;
“var” － 用于声明变量的关键字
“count” － 变量名[命名规则]
同时声明和赋值变量
声明多个变量
var count = 10;
var x, y, z = 10;
12
共三十六页
运算(yùn suàn)符号
• 运算符对一个或多个(duō ɡè)变量或值（操作数）进行运算，并返回一个 新值
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释。 例如： /*
helloWorld.html 2007-9-29 第一个JavaScript程序 */
22
共三十六页
练习(liànxí)
1、用一个变量表示月份（取值1-12），判断该月份的天数（分别用if语句和switch语句实现，不考 虑(kǎolǜ)闰年）。 2.利用循环输出h1——h6六种样式的“湖南外贸职业学院”。（分别用while和for实现） 3、利用JS输出9*9乘法表。
break;
... default :
JavaScript语句3; }
17
共三十六页
switch示例(shìlì)
<HTML> <HEAD> <TITLE>脚本的基本结构</TITLE> <SCRIPT language="javascript">
var count=2;
switch(count) { case 1:
• 灵活运用高级语法－自定义函数function
4
共三十六页
回顾(huígù)HTML与CSS-1
文档结构 常用的HTML标签有哪些？表格
<html>
<table>
<h请ead说></说heaind>put元素(yuán sù)的TYPE属<tr>性有哪些值
<body></body>
<td></td>
{
var count=document.myForm.txtCount.value ;
var count=0;
document.write("淘宝网欢迎您！");
for(i=0;i<5;i++)
document.write("<H2>淘宝网欢迎您！</H2>");
</SCRIPT>
</HEAD>
<BODY>
<H1> BODY部分的内容</H1>
如何使用JavaScript实 现此部分内容？
</BODY>
</HTML>
8
共三十六页
什么(shén me)是JavaScript
• 脚本的执行(zhíxíng)原理
2
发送请求IE
客户端请求含JS的页面
1
IE
用户输入
解析HTML标签和 JavaScript脚本
返回响应
3
从服务器端下载含 JavaScript的页面
应用
服务器
9
共三十六页
JavaScript的基本(jīběn)语法
document.write ("<font color=\"#FF0000\">变量为1，红色显示(xiǎnshì)</font>"); break;
case 2:
document.write ("<font color=\"#00FF00\">变量为2，绿色显示</font>"); break;
<HTML> <HEAD>
<TITLE>脚本的基本结构(jiégòu)</TITLE> <SCRIPT language="javascript">
var count=0; document.write("淘宝网欢迎您！"); for(i=0;i<5;i++) document.write("<H2>淘宝网欢迎您！</H2>"); </SCRIPT> </HEAD> <BODY> <H1> BODY部分的内容</H1> </BODY> </HTML>
共三十六页
本章(běn zhānɡ)任务
制作淘宝网购物
简易(jiǎnyì)计算器 页面
3
共三十六页
本章(běn zhānɡ)目标
• 掌握脚本的基本结构(Script标签) • 简单记忆基本语法
– 变量(biànliàng)的定义与赋值 – 数据类型与转换parseFloat等 – 运算符和控制语句同Java
1、在页面中放置一个文本框和一个按钮，让 用户(yònghù)输入次数后点击按钮才显示
2、把循环显示的代码放置到函数中，当点击按钮 时，才调用函数显示HelloWorld
经过分析，该如何解决上面问题？
使用自定义函数
26
共三十六页
如何(rúhé)使用函数
• 创建函数
function showHello( )
default:
document.write ("<font color=\"#0000FF\">变量为其他，蓝色显示</font>"); }
</SCRIPT>
</HEAD>
<BODY>
<H1> BODY部分的内容</H1> </BODY>
</HTML>
18
共三十六页
逻辑(luó jí)控制语句
• for、while循环(xúnhuán)语句
for(初始化; 条件; 增量)
{
语句集;
}
while(条件) {
语句集;
}
Do {
语句集;
}}while(条件);
19
共三十六页
while示例(shìlì)
<HTML> <HEAD> <TITLE>脚本的基本(jīběn)结构</TITLE>
<SCRIPT language="javascript"> var count=1; while(count<7) {
• 根据所执行的运算，运算符可分为以下类别： – 算术运算符
+、-、 * 、 / 、%、++、--、-(求反)
– 比较运算符
==、!=、>、>=、<、<=
– 逻辑运算符 &&、||、！
13
共三十六页
运算符示例(shìlì)
<HTML>
<HEAD> <TITLE>脚本的基本结构(jiégòu)</TITLE>
大家想想上面JavaScript代码与我们学过的Java、C#语言有相似的地方吗？
10
共三十六页
JavaScript的基本(jīběn)语法
数据类型与变量
类型转换
基本语法
运算符与表达式
注释
流程控制语句
11
共三十六页
变量(biànliàng)的声明和赋值
定义(dìngyì)变量
var count;
<form>
radio button
</form>
<inpucth/e>ckbox <seleicmt>a<g/eselect> <textarea></textarea>
body正文中常见标记
框架集与框架
a
img
<frameset>
h1
p
hr
br
<frame>
ul
ol
li
<frame>
</frameset>
浮点值34.45
24
共三十六页
什么(shén me)是函数
• 函数的含义：类似于C#或Java中的方法， 是执行特定任务(rèn wu)的语句块。
如何希望点击某个按钮后才显示“HelloWorld”，
并能输入显示的次数，怎么办？
演示示例3：调用函数输出“HelloWorld”
25
共三十六页
什么(shén me)是函数
} </SCRIPT> </HEAD> <BODY> <H1> BODY部分的内容</H1> </BODY>
</HTML>
21
共三十六页
注释(zhùshì)
单行注释以 // 开始(kāishǐ)，以行末结束
例如：
<SCRIPT language=“javascript”> //表示JavaScript代码的开始
5
共三十六页
回顾(huígù)HTML与CSS-2
请简述样式规则的构成与几种(jǐ zhǒnɡ)选择器的作用.
请列举常用的CSS属性
样式规则:
选择器名称{CSS属性名称:属性值 ; 名:值 ; ……}
选择器:
标记选择器
类选择器
IDC选S择S属器性
锚fo伪nt类-si选ze择f器ont-weight
</HEAD> <BODY> <H1> BODY部分的内容</H1> </BODY> </HTML>
14
共三十六页
逻辑控制(kòngzhì)语句
• if条件 语句 (tiáojiàn)if(条件) { //JavaScript代码; } else if(条件) { //JavaScript代码; } Else { //JavaScript代码; }
演示示例1：注册表单验证
页面(yè miàn)动态效果
演示示例2：层的切换 和 树形菜单等
7
共三十六页
什么(shén me)是JavaScript
查看完整源代码
<HTML>
<HEAD>
<TITLE>脚本(jiǎoběn)的基本结构</TITLE>
<SCRIPT language="javascript">
<BODY>
<H1> BODY部分的内容</H1> </BODY> </HTML>
16
共三十六页
逻辑(luó jí)控制语句
• switch多分支(fēnzhī)语句
switch (表达式) { case 常量1 :
JavaScript语句1; break; case 常量2 : JavaScript语句2;
<SCRIPT language="javascript"> var count=0; document.write(count++); document.write("<br />");
document.write(15%6);
document.write("<p>"+15%6+"</p>");
</SCRIPT>
document.write ("<font color=\"#00FF00\">变量为2，绿色显示</font>");
} else
{ document.write ("<font color=\"#0000FF\">变量为其他(qítā)，蓝色显示</font>");
}
</SCRIPT>
</HEAD>
JavaScript基本(jīběn)语法
《JavaScript及网页(wǎnɡ yè)特效制作》第一章
共三十六页
预习(yùxí)检查
• 大家已学HTML，为什么要学习JavaScript？ • 如何编写JavaScript程序？ • JavaScript与Java基本(jīběn)语法的异同？
2
font-style color
上t下ex文t-选ali择gn器line-height
border-style
border-width border-color
background-color background-image
margin
padding
6
共三十六页
为什么要学JavaScript
表单验证(yànzhèng)
document.write("<h"+count+">湖南外贸职业学院</h"+count+">"); count++; } </SCRIPT> </HEAD> <BODY> <H1> BODY部分的内容</H1> </BODY> </HTML>
20
共三十六页
for示例(shìlì)
<HTML>
23
共三十六页
类型转换
• parseInt (String)
将字符串转换(zhuǎnhuàn)为整型数字
如: parseInt (“86”)arseFloat(String)
将字符串转换为浮点型数字
如: parseInt (“34.45”)将字符串“34.45”转换为
15
共三十六页
If示例(shìlì)
<HTML> <HEAD> <TITLE>脚本的基本结构</TITLE>
<SCRIPT language="javascript"> var count=4; if(count==1)
{
document.write ("<font color=\"#FF0000\">变量为1，红色显示</font>"); } else if(count==2) {
<HEAD> <TITLE>脚本的基本结构(jiégòu)</TITLE>
<SCRIPT language="javascript"> for(count=1;count<7;count++)
{ document.write("<h"+count+">湖南外贸职业学院</h"+count+">");
相关文档
最新文档