JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
2022-05-12 473
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1.1 JavaScript 概述
1.1.1 JavaScript 简介
JavaScript 诞生于 1995 年，主要是进行用户输入的合法性验证
在 1995 年之前，Web 页面的一些验证工作都是由服务器端的语言来实现，这就要求用户输入的数据必须先通过网络传输到服务器端，服务器端进行相应的处理后，再将结果反馈给客户端
1.1.2 JavaScript 的概念和执行原理
JavaScript 是一种轻型的、解释性的脚本语言，是一种由浏览器内的解释器执行的程序语言
当客户端向服务器端请求页面时，服务器端将整个页面包含 JavaScript 的脚本代码发送到客户端，浏览器从上往下逐行读取并解析其中的 HTML 或脚本代码
1.1.3 JavaScript 脚本代码的位置
通常可以在 3 个地方编写 JavaScript 的脚本代码
<script></script> 标签中直接编写脚本程序代码
脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
HTML 文件混合方式
示例：
<body> <script type="text/javascript"> document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>"); </script> </body>
AI 代码解读
JS 文件引用方式：
创建 JavaScript 文件，命名为demo1.js html页面，在 <script> 标签中引用 JavaScript 文件<body> <script src="../js/demo1.js" type="text/javascript"></script> </body>
AI 代码解读
HTML 代码嵌入方式
将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
<body> <a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a> </body>
AI 代码解读
1.1.4 实践练习
1.2 JavaScript 核心语法
1.2.1 变量
变量有三种使用方式:
先声明再赋值 如：var message; message="hi";
同时声明和赋值变量 如：var message="hi";
不声明直接赋值 如：message="hi";
变量可以不经声明而直接使用，但是这种方法很容易出错，因此不推荐使用。对变量的输出测试可以采用 alert() 弹出对话框的方式
变量命名规则:
第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
其他字符可以是字母、下划线、美元符号或数字
区分大小写
不能与关键字同名，如 while、for 和 if 等
示例：
<body> <script type="text/javascript"> var x=2; var y=3; var z=x+y; alert("x="+x+",y="+y+",z="+z); </script> </body>
AI 代码解读
1.2.2 数据类型
JavaScript 中有 5 种简单数据类型，也称为基本数据类型
undefinednullbooleannumberstring另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型
示例：
<body> <script type="text/javascript"> var str="message"; document.write(typeof str+"<br/>"); var other; document.write(typeof other+"<br/>"); var numb=10.0; document.write(typeof numb+"<br/>"); var date=new Date(); document.write(typeof date+"<br/>"); var bool=1<2; document.write(typeof bool); </script> </body>
AI 代码解读
1.2.3 JavaScript 注释
JavaScript 与很多语言一样，如 Java、C# 都支持同样的注释形式
单行注释：//多行注释： /* 注释内容 */示例：
// 声明并初始化一个变量 var v = 5; /* 使用 for 循环输出 Hello5 次 */ document.write("Hello!<br/>"); document.write("Hello!<br/>"); document.write("Hello!<br/>"); document.write("Hello!<br/>"); document.write("Hello!<br/>"); /* 这些注释不会显示在页面上， 但是可以通过页面的源代码查看到 */
AI 代码解读
1.2.5 实践练习
1.3 顺序结构和选择结构
1.3.1 顺序结构
顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行
示例：
<body> <script type="text/javascript"> document.write(" 程序开始执行……<br/>"); document.write(" 程序正在执行中……<br/>"); document.write(" 程序执行完毕……<br/>"); </script> </body>
AI 代码解读
1.3.2 选择结构
选择结构：需要根据特定的条件执行不同的语句JavaScript中选择结构使用if语句和switch语句if 语句有 3 种形式：单分支、双分支和多分支1、if单分支语句：
if( 条件表达式 ) { 语句或语句块 }
AI 代码解读
示例：
<body> <script type="text/javascript"> var undf; if(typeof undf=="undefined") { undf="Hello World ！ "; } document.write(" 名称是："+undf); </script> </body>
AI 代码解读
2、if 双分支语句
if( 条件表达式 ) { 语句或语句块 1 } else{ 语句或语句块 2 }
AI 代码解读
示例：
<script type="text/javascript"> var x=-4,y; if(x>0){ y=x; }else{ y=-x; } document.write(x+' 的绝对值是：'+y); </script>
AI 代码解读
如何用“变量 = 布尔表达式？语句 1: 语句 2”的条件表达式来简化上述示例中的代码？
3、if 多分支语句
if( 条件表达式 1){ 语句或语句块 1 } else if( 条件表达式 2){ 语句或语句块 2 }...... else if( 条件表达式 n){ 语句或语句块 n } else{ 语句或语句块 n+1 }
AI 代码解读
示例：
Date 是 JavaScript 的内置对象，通过它可以获取时间
<body> <script type="text/javascript"> var time=new Date(); // 创建 Date 对象 var hour=time.getHours(); // 当前小时 if(hour<=11){ document.write(" 早上好 "); }else if(hour<=18){ document.write(" 下午好 "); }else{ document.write(" 晚上好 "); } </script> </body>
AI 代码解读
4、switch 语句
switch（表达式）{ case 取值 1：语句或语句块 1; break; case 取值 2：语句或语句块 2; break; ...... case 取值 n：语句或语句块 n; break; default: 语句或语句块 n+1; break; }
AI 代码解读
示例：
var time=new Date(); var week=time.getDay(); var weekstr; switch(week){ case 1: weekstr=" 一 "; case 2: weekstr=" 二 "; case 3: weekstr=" 三 "; case 4: weekstr=" 四 "; case 5: weekstr=" 五 "; document.write(" 今天是星期 "+weekstr+", 努力工作吧！ "); break; default: document.write(" 今天是周末，放松一下吧！ "); break; }
AI 代码解读
1.3.3 实践练习
1.4 循环结构
1.4.1 while 循环语句
JavaScript中，循环结构有 while 循环、do-while 循环和 for 循环
1、while 循环语句
while（条件表达式）{ 语句或语句块 }
AI 代码解读
示例：
<table border="1" width="100%"> <tr align="center"> <td> 摄氏温度 </td> <td> 华氏温度 </td> </tr> <script type="text/javascript"> var f; // 华氏温度 var c=0; // 摄氏温度 var count=1; // 条目 while(count <= 10 && c <= 250){ f=c*9/5.0+32; // 转换关系 document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>"); c=c+20; count++; } </script> </table>
AI 代码解读
2、do-while循环语句
do{ 语句或语句块 }while( 条件表达式 );
AI 代码解读
示例：
<script type="text/javascript"> var i=1; var num=1; do{ i++; num=num*i; }while(i<5); document.write("i="+i+",num="+num); </script>
AI 代码解读
3、for循环语句
for( 初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式 ){ 语句或语句块 }
AI 代码解读
示例：
<table border="1" width="100%"> <tr align="center"> <td> 摄氏温度 </td> <td> 华氏温度 </td> </tr> <script type="text/javascript"> var f;// 华氏温度 for(var c=0,count=1;count<=10&&c<=250;c=c+20,count++){ f=c*9/5.0+32; // 转换关系 document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>"); } </script> </table>
AI 代码解读
1.4.4 break 语句和 continue 语句
JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环
示例：
var i=1; var sum=0; while(i<=20){ if(i%2!=0){ i++; continue; // 是奇数就结束本次循环，开始下一次循环 } sum=sum+i; if(sum>30){ document.write(" 当加到："+i+" 时，累加和已经超过 30"); break; // 累加和超过 30，跳出循环 } i++; }
AI 代码解读
1.4.5 实践练习
总结：
JavaScript是由浏览器的解释器解释执行的程序语言
JavaScript脚本在客户端执行，从而间接地提升了Web服务器的性能
JavaScript的变量是采用弱类型的形式 JavaScript中有五种简单数据类型
JavaScript用typeof操作符来检测给定变量的数据类型
JavaScript的运算符有算术运算符、赋值运算符、比较运算符和逻辑运算符
JavaScript的流程控制语句有顺序结构、选择结构和循环结构。
JavaScript中选择结构有if和switch。循环结构有while、do…while和for
相关知识
JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
“项目二HTML网页编程基础：制作、JavaScript应用、样式表美化”
前端开发综合指南：HTML、CSS和JavaScript详解
11 个基于 JavaScript 的图表插件推荐
网页设计与网站建设
javaScript基础语法
javascript dom 编程艺术pdf javascript dom编程艺术pdf下载网盘
如何选择最佳的顶级免费JavaScript图表库？
《数据可视化实战：使用D3设计交互式图表（第2版）》电子书在线阅读
数据可视化实战：使用D3设计交互式图表（第2版）
网址: JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】 https://m.huajiangbk.com/newsview2499704.html
| 上一篇: 使用Adobe LiveCycl |
下一篇: MATLAB的交互式界面 简易设 |
