第10章 javascript基础

第10讲JavaScript基础静态网页设计上次回顾•CSS中的边距与填充属性•边框属性•列表属性•光标属性•滤镜静态网页设计本章目标理解什么是JavaScriptJavaScript的特点如何将JavaScript嵌入到HTML中变量，常量静态网页设计4静态网页制作4表单验证页面动态效果演示示例2：树形菜单等演示示例1：注册表单验证什么是JavaScriptJavaScript是一种脚本语言提供用户交互动态更改内容数据验证是从Netscapes的Livescript发展而来的JavaScript和JScript静态网页设计6静态网页制作6JavaScript简介•Netscape公司为了进一步扩充它的浏览器的功能，开发了一种可以嵌入在Web主页中的编程语言。在早期这种语言叫做LiveScript，后来为了利用Sun公司开发的Java语言的功能并借用它的流行性，把它改名为JavaScript。本章首页将JavaScript嵌入网页可以将JavaScript语句插入HTML文档，方式如下：–使用SCRIPT标签将语句嵌入文档–将JavaScript源文件链接到HTML文档中静态网页设计使用Script标签JavaScript代码静态网页设计htmlheadscriptlanguage=JavaScriptalert(欢迎来到JavaScript世界);/script/headbodyp尽情享受学习的快乐!!!/p/body/html脚本代码设置语言运行结果，在IE里浏览。使用Alert方法，可以生成一个对话框使用外部JS文件静态网页设计外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件scriptlanguage=“JavaScript”src=“文件名.js/script使用外部JS文件静态网页设计JavaScript代码(test.htm)htmlheadtitle使用外部文件/titlescriptsrc=test.js/script/headbodyp以上文本是通过访问外部JavaScript文件显示的/p/body/htmldocument.write(喂！你好吗?)JavaScript代码(test.js)运行结果，在IE里浏览。使用document的Write方法可以创建页面内容11静态网页制作11书写JavaScript注意事项•严格区分大小写•每条语句结束后必须打分号（；）•建议每行语句换行书写•script标记对中不可直接出现HTML标记12静态网页制作12变量•变量是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值变量可以理解是在内存中分配的一个小房间，用于保存数据。一个房间只能放一个值，当有新值放入时会履盖原值13静态网页制作13JavaScript语法基础JavaScript的数据类型类型说明字符串类型用引号引起的一串字符数值类型整数或者实数布尔类型逻辑值，有真或假两种空类型代表一个空值对象类型代表JavaScript中的一些对象14静态网页制作14JavaScript语法基础变量的定义•JavaScript中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。声明变量静态网页设计vara;“var”－用于声明变量的关键字“a”－变量名=赋值运算符将左边的值赋给右边的变量a=10;声明变量声明多个变量varx,y,z=10;赋值变量静态网页设计变量名必须以字母或下划线（“_”）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量17静态网页制作17练习1scriptlanguage=javascriptvara=50;varb=100;a=70;a=b;alert(a);/script请判断A,B的值18静态网页制作18Prompt方法•作用：弹出输入框供用户输入框供用户输入•prompt(“提示信息”,”默认值”)•将弹出提示对话框，接受用户的输入。点击确定返回输入的内容，点击取消返回空内容。•返回内容需用变量接收存储。19静态网页制作19练习2•1.声明变量msg并赋初值为0•2.用prompt方法接收用户输入，保存在变量msg中•3.使用alert方法显示出变量msg中的值•4.使用document对象的write方法将变量msg值显示在网页上。20静态网页制作20练习3-计算正方形的周长和面积•1.声明变量i并赋初值为0•2.用prompt方法接收用户输入，保存在变量i中•计算周长4*i保存在变量j中•计算面积i*i保存在变量k中•4.使用document对象的write方法将变量j、k值显示在网页上。21静态网页制作21练习4•用prompt方法接收用户输入圆的半径•计算圆的周长和面积，并输出在网页上总结什么是JavaScriptJavaScript的特点如何将JavaScript嵌入到HTML中网页中嵌入脚本有两种方式：使用Script标签或外部*.js文件JavaScript中声明变量：var变量名静态网页设计单词记忆var声明变量的关键字alert()方法弹出消息框prompt()方法弹出输入框document.write()将内容显示在网页中静态网页设计24静态网页制作24转义字符•整型•浮点型•字符串型字符说明示例\b退格符alert(“这是第一句\b这是第二句”)\f换页符alert(“这是第一局\f这是第二句”)\n换行符alert(“这是第一局\n这是第二句”)\r回车符alert(“这是第一局\r这是第二句”)\t制表符alert(“这是第一局\t这是第二句”)和其他语言一样，js也有转义字符，常用的就是：“\n”