首页 > 分享 > 第12讲静态网站项目设计与开发.pptx

第12讲静态网站项目设计与开发.pptx

花匠小妙招
2026-01-05 00:14

静态网站项目设计与开发授课老师：何王科静态网站项目设计与开发课程教学信息授课专业互联网营销授课班级计网1401班计网1402班课次第12讲授课时间10月18日星期星期日节次1~2授课地点知行楼513机房授课教师何王科教学日志教学日志教学文件课程标准授课计划教学设计静态网站项目设计与开发教学任务JavaScript基础知识目标：htmlcss基础知识能力目标：熟练运用DIV+CSS布局重点：JavaScript函数JavaScript运算符JavaScript比较和逻辑运算符难点：JavaScript对象教学方法：案例法、演示法、讨论法、任务驱动法课堂类型：讲授课教具：多媒体、VMare、XP、windows2003、Packettracert、GNS3导入课程首先说一下我们这节课的知识点JavaScript对象JavaScript函数JavaScript运算符JavaScript比较和逻辑运算符JavaScript对象JavaScript中的所有事务都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。属性和方法属性是与对象相关的值。方法是能够在对象上执行的动作。JavaScript对象举例：汽车就是现实生活中的对象。汽车的属性：=Fiatcar.model=500car.weight=850kgcar.color=white汽车的方法：car.start()car.drive()ar.brake()JavaScript中的对象在JavaScript中，对象是数据（变量），拥有属性和方法。当您像这样声明一个JavaScript变量时：vartxt="Hello";您实际上已经创建了一个JavaScript字符串对象。字符串对象拥有内建的属性length。对于上面的字符串来说，length的值是5。字符串对象同时拥有若干个内建的方法。JavaScript中的对象属性：txt.length=5方法：txt.indexOf()txt.replace()txt.search()提示：在面向对象的语言中，属性和方法常被称为对象的成员。

创建JavaScript对象JavaScript中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。你也可以创建自己的对象。本例创建名为"person"的对象，并为其添加了四个属性：创建JavaScript对象<body><script>person=newObject();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";document.write(person.firstname+"is"+person.age+"yearsold.");</script></body>创建新JavaScript对象有很多不同的方法，并且您还可以向已存在的对象添加属性和方法。访问对象的属性访问对象属性的语法是：objectName.propertyName

本例使用String对象的length属性来查找字符串的长度：varmessage="HelloWorld!";varx=message.length;在以上代码执行后，x的值是：12访问对象的方法您可以通过下面的语法调用方法：objectName.methodName()这个例子使用String对象的toUpperCase()方法来把文本转换为大写：varmessage="Helloworld!";varx=message.toUpperCase();在以上代码执行后，x的值是：HELLOWORLD!JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。<head><script>functionmyFunction(){alert("HelloWorld!");}</script></head><body><buttononclick="myFunction()">点击这里</button></body>JavaScript函数语法函数就是包裹在花括号中的代码块，前面使用了关键词function：functionfunctionname(){这里是要执行的代码}当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由JavaScript在任何位置进行调用。提示：JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。调用带参数的函数在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号(,)分隔：myFunction(argument1,argument2)当您声明函数时，请把参数作为变量来声明：functionmyFunction(var1,var2){这里是要执行的代码

}变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。调用带参数的函数<body><p>点击这个按钮，来调用带参数的函数。</p><buttononclick="myFunction('BillGates','CEO')">点击这里</button><script>functionmyFunction(name,job){alert("e"+name+",the"+job);}</script></body>上面的函数会当按钮被点击时提示"eBillGates,theCEO"。调用带参数的函数函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：<body><p>请点击其中的一个按钮，来调用带参数的函数。</p><buttononclick="myFunction('HarryPotter','Wizard')">点击这里</button><buttononclick="myFunction('Bob','Builder')">点击这里</button><script>functionmyFunction(name,job){alert("e"+name+",the"+job);}</script></body>带有返回值的函数有时，我们会希望函数将值返回调用它的地方。通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。语法functionmyFunction(){varx=5eturnx;}面的函数会返回值5。带有返回值的函数函数调用将被返回值取代：varmyVar=myFunction();myVar变量的值是5，也就是函数"myFunction()"所返回的值。即使不把它保存为变量，您也可以使用返回值：document.getElementById("demo").innerHTML=myFunction();"demo"元素的innerHTML将成为5，也就是函数"myFunction()"所返回的值。带有返回值的函数<body><p>本例调用的函数会执行一个计算，然后返回结果：</p><pid="demo"></p><script>functionmyFunction(a,b){returna*b;}document.getElementById("demo").innerHTML=myFunction(4,3);</script></body>带有返回值的函数在您仅仅希望退出函数时，也可使用return语句。返回值是可选的：functionmyFunction(a,b){if(a>b){return;}x=a+b}如果a大于b，则上面的代码将退出函数，并不会计算a和b的总和。局部JavaScript变量在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。全局JavaScript变量在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。JavaScript变量的生存期JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。向未声明的JavaScript变量来分配值如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：carname="Volvo";将声明一个全局变量carname，即使它在函数内执行。JavaScript运算符运算符=用于赋值。运算符+用于加值。JavaScript运算符运算符=用于给JavaScript变量赋值。算术运算符+用于把值加起来。y=5;z=2;x=y+z;在以上语句执行后，x的值是7。JavaScript算术运算符算术运算符用于执行变量与/或值之间的算术运算。给定y=5，下面的表格解释了这些算术运算符：运算符描述例子结果+加x=y+2x=7-减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数(保留整数)x=y%2x=1++累加x=++yx=6--递减x=--yx=4JavaScript赋值运算符赋值运算符用于给JavaScript变量赋值。给定x=10和y=5，下面的表格解释了赋值运算符：运算符例子等价于结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0用于字符串的+运算符+运算符用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用+运算符。txt1="Whatavery";txt2="niceday";txt3=txt1+txt2;在以上语句执行后，变量txt3包含的值是"Whataveryniceday"。用于字符串的+运算符要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：txt1="Whatavery";txt2="niceday";txt3=txt1+txt2;或者把空格插入表达式中：txt1="Whatavery";txt2="niceday";txt3=txt1+""+txt2;在以上语句执行后，变量txt3包含的值是："Whataveryniceday"对字符串和数字进行加法运算x=5+5;document.write(x);x="5"+"5";document.write(x);x=5+"5";document.write(x);x="5"+5;document.write(x);规则是：如果把数字与字符串相加，结果将成为字符串。JavaScript比较和逻辑运算符比较和逻辑运算符用于测试true或false。比较运算符比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定x=5，下面的表格解释了比较运算符：运算符描述例子==等于x==8为false===全等（