第9讲_Javascript基础_1
- 格式：pps
- 大小：818.50 KB
- 文档页数：31
Company name WEB 前端开发技术HTML JavaScriptCSS WEB 前端开发技术第9讲JavaScript （1）计算机科学与技术系计算机科学与技术系Web 前端开发技术主要内容掌握JavaScript 语言的基本语法理解JavaScript 语言的作用和执行方式掌握在网页中使用客户端脚本的方法Web前端开发技术9.1 JavaScript基础计算机科学与技术系JavaScript简介最初LiveScript,Netscape公司开发，弥补了HTML只能提供静态资源的缺陷，将静态网页变成动态网页。
JavaScript是一种面向对象、基于事件驱动的轻量级、解释性脚本语言，类似于C、VB，但不需要编译。
JavaScript语言特点（1）安全性（Browser无法访问本地硬盘数据/写入到数据库）；（2）易用性（脚本、无严格数据类型）；（3）动态交互性（JS可以直接对用户提交的信息作出回应）；（4）跨平台性（支持JS的Browser）。
Web 前端开发技术9.1.1 JavaScript起步计算机科学与技术系一个实例<!--程序9-1 --><html><title>这是我的第一个JavaScript程序</title><body><script type="text/javascript">document.write("欢迎进入JavaScript学习之旅!");</script></body></html>计算机科学与技术系Web 前端开发技术9.1.1 JavaScripte 位置与运行基本语法：<script>在页面中的位置：（1）<head>;(2)<body>;(3)单独的js 文件;(4)直接在事件处理代码中。
如：<body onclick=“alert(‘这是行内调用);”><script type=“text/javascript”src=“外部JS 文件”>…</script>JavaScript 程序本身不能独立存在，它是依附于某个HTML 页面，在浏览器端运行的。
计算机科学与技术系<!--JavaScript 基础edu_9-1_js_format.html --><html><head><title>JavaScript 基础</title><script type="text/javascript" src="demo.js"> </script><script type="text/javascript"><!--function show(){document.write("这是事件调用JS");}//--></script></head>引入外部JS头部插入JS计算机科学与技术系<body > <p>这是普通的HTML 页面内容！</p><script type="text/javascript">/* 这是直接调用JS*/document.write("这是直接调用JS");</script><p>Hello,</p><comment>这是外部调用JS 文件</comment><script type="text/javascript"> sayName();</script><p onclick="show();" style="background:#00ff00 ">事件调用！</p><p onclick="alert('这是行内调用！');">hello</p><a href="javascript:alert('Hello World!!');">这是行内调用--简约化</a></body></html>主体插入JS引用外部JS事件调用JS 简约化使用J SWeb前端开发技术9.2 JavaScript程序计算机科学与技术系JavaScript脚本语言的基本构成是由语句、函数、对象、方法、属性等来实现编程的，在程序结构上同样是有顺序、分支和循环三种基本结构。
● 1.语句和语句块●2函数● 3.常用系统函数● 4.消息对话框● 5.注释Web前端开发技术9.2.1 语句和语句块计算机科学与技术系1. 语句JavaScript 语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。
dcument.write("欢迎进入JavaScript学习之旅!“);语句类型变量声明语句var x=3；输入输出语句alert(“这是输出”)；表达式语句xyz=“asdfsfadf”；程序流向控制语句if (){} else{}；返回语句return x;Web 前端开发技术9.2.1 语句和语句块(续)计算机科学与技术系2. 语句块语句块就是用“{”和“}”封闭起来的若干条语句。
3. 代码代码就是由若干条语句或语句块构成的执行体。
<script type="text/javascript">var color=‖red‖;if(color==‖red‖) {document.write("现在颜色是红色!");alert("现在颜色是红色!");}</script>Web前端开发技术9.2.2 函数计算机科学与技术系JavaScript函数包括：内部函数、系统对象定义的函数、用户自定义函数。
用来完成特定功能，并可以复用。
1. 函数的构成一般是由若干条语句构成的。
基本语法：function 函数名(参数1, 参数2, ... 参数N) {函数体；}语法说明：(1) 可以没有参数，但括号必须保留、以及包含在大括号内的由若干条语句构成的函数体。
(2)不能在其他语句或其自身中嵌套function语句，也就是说，每个函数声明都是独立的。
计算机科学与技术系Web 前端开发技术形参与实参传递9.2.2 函数(续)<script type="text/javascript">function changecolor(color){var div1=document.getElementById("divcolor");div1.style.background=color;} </script><body><table border=1><caption>点击颜色块改变DIV 背景色</caption><tr><td bgcolor="red" onclick="changecolor('red');">red</td><td bgcolor="blue" onclick="changecolor('blue');">blue</td><td bgcolor="green" onclick="changecolor('green');">green</td>…</tr> </table><div id="divcolor" style="width:450px;height:100px;background:#99;"> </div></body>计算机科学与技术系(3)函数名（参数），形参是用来接收函数调用者传递过来的实参。
(4)调用实参与形参要一一对应，主要表现在类型、顺序、数量、内容要一致。
(5)由于js是弱类型脚本语言主，函数的参数没有类型检查和类型限制，要求编程者自查。
(6)每一个函数体内都内置地存在着一个对象arguments，它是一个类似数组的对象，通过它可以查看函数当前有几个传递来的参数（并非定义的形式参数），各个参数的值是什么。
计算机科学与技术系●用return返回函数的计算结果return的作用有两点：●结束程序的执行;●返回一个结果。
return 语句后可以返回一个具体的值、简单的变量、复杂的表达式、无值均可。
计算机科学与技术系function compute(radius){ var area=0;area=pi * radius*radius;return area;}function show(){//利用document对象，获得页面中半径文本框中的输入值varradius=document.getElementById('radi us').value;//调用compute函数计算对应的面积var area=compute(radius);//将计算出的面积值显示到面积文本框中document.getElementById('area').valu e=area;return;//此句可以不要}带返回值的return语句不带返回值的return语句返回值无值返回计算机科学与技术系脚本全局变量 picompute局部变量 area,radiusshow局部变量 area,radius5. 函数变量的作用域局部变量函数内声明的变量称为“局部变量”。
生命周期局限在函数内。
全局变量函数之外声明的变量称为“全局变量”。
这些变量的生存期从声明它们之后开始，在页面关闭时结束。
计算机科学与技术系1. 返回字符串表达式中的值：eval（字符串表达式）例：result=eval(“8+9+5/2”);返回值：表达式的值或“undefined”。
