使⽤JavaScript制作动态⽹页-1
使⽤JavaScript制作动态⽹页-1
JavaScript是什么
JavaScript是⼀种描述语⾔，基于对象和事件驱
动的脚本语⾔。
1. JavaScript的特点
脚本语⾔（⼀种轻量级的编程语⾔）
⼀种解释性语⾔（⽆需预编译）
被设计为向HTML页⾯添加交互⾏为
运⾏于客户端
2. ECMAScript是JavaScript的标准和基础
3. JavaScript与JAVA的关系
javaScript与java名字虽然相像，但是它们没有关系。JavaScript和Java都与sun公司有合作，是借势Java JavaScript的发展
95年LiveScript（Netscape公司）（为了减轻服务器压⼒创建）
Netscape将其更名为JavaScript
微软IE3.0并附带JScript、CEnvi的ScriptEase以及JavaScript三⾜⿍⽴
97年JavaScript1.1版本被ECMA（欧洲计算机制造商）标准化为ECMAScript的全新脚本语⾔JavaScript学习
JavaScript的组成javascript动态效果
关于ECMAScript
ECMAScript定义了脚本语⾔的所有属性、⽅法和对象，包括语法、类型、关键字、保留字、运算符、对象等除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础
关于DOM
DOM(Document Object Model⽂档对象模型)
HTML和XML的应⽤程序接⼝（API）
把整个页⾯规划为层级式的节点结构（如下图）
关于BOM
BOM(Browser Object Model浏览器对象模型)
可对浏览器窗⼝进⾏访问和操作
包括
1.弹出新的浏览器窗⼝
2.移动、关闭浏览器窗⼝及调节浏览器窗⼝⼤⼩
3.获取⽤户屏幕分辨率的屏幕对象
4.WEB浏览器详细的定位对象
-对象举例
1.Window对象
2.Navigator对象
3.Screen对象
4.History对象
5.Location对象
JavaScript的使⽤
JavaScript的语法
<script type= " text/javascript " >
<!-- // JavaScript 代码// -->
</script>
注意
（1）” ”部分是⾮必须的，为了规避⽼版本浏览器不识别
（2）“//”是 JavaScript 的注释符号（/**/也是注释符号），它会阻⽌JavaScript 编译器对这⼀⾏的编译
（3）type属性不推荐写成 language= " javascript " ，不符合XHMLT1.0⽰例：
<html>
<head>
<!-- <head>与<body>的区别 -->
<!-- 在使⽤上没有区别-->
<!-- 浏览器有⾃动纠错功能，能正常显⽰不表⽰你写对了-->
<!-- ⼤家规定想让⽤户看见的写在<body>中，不想让⽤户看见的写在<head>中-->
<script type="text/javascript">
document.write("你好，JavaScript");
</script>
</head>
<body></body>
</html>
引⽤JavaScript的3种⽅式
HTML标签中引⽤
常⽤的框输⼊/输出/确认
◆alert()
alert(“提⽰信息”); //提⽰信息框
⽰例：
<html>
<head>
<title>js⽀持的三种弹框，实现和⽤户交互</title>
<script type="text/javascript">
<!--这是html注释-->
//这是js注释
alert("你好,alert")
//浏览器处于阻塞状态代码在alert这个位置停⽌并等待
</script>
</head>
<body>
</body>
<h1>你好 html</h1>
</body>
</html>
◆prompt()
prompt(“提⽰信息”, “输⼊框的默认信息”);
prompt(“请输⼊姓名”, “张三”);
prompt(“请输⼊姓名”);
⽰例：
<html>
<head>
<title>js⽀持的三种弹框，实现和⽤户交互</title>
<script type="text/javascript">
//  第⼆个弹框叫做prompt框具有返回值，返回的是string数据类型
var userName =prompt("请输⼊⽤户名称：",666);//接受2个参数，第⼀个是提⽰字符，第⼆个是输⼊框默认的值alert(typeof userName);
</script>
</head>
<body>
<h1>你好 html</h1>
</body>
</html>
◆confirm（
confirm(“确认信息？”); //确定则返回true，取消则返回false
⽰例：
<html>
<head>
<title>js⽀持的三种弹框，实现和⽤户交互</title>
<script type="text/javascript">
//confirm 确认框返回的是布尔值的true或者false
var flag=confirm("确定提交吗？");
alert(flag);
</script>
</head>
<body>
<h1>你好 html</h1>
</body>
</html>
JavaScript的基础语法
注释
JavaScript的注释⽅法，与Java⼀致
//或者/* */
变量声明和使⽤
1、由于 JavaScript 对⼤⼩写敏感，变量名也对⼤⼩写敏感 （y 和 Y 是两个不同的变量）
2、变量必须以字母或下划线或美元符$开始 ，不能使⽤关键字作为变量名
◆JavaScript的变量声明
//JS的变量声明，是通过 var 语句来声明的，⽆需指定数据类型
var num = 10 ;
var str = "JavaScript" ;
//当然也可声明多个，之间⽤逗号隔开
var num =10 ,
str = "JavaScript";
//省略 var 语句，直接变量声明
num = 100; //相当于window.num= 100；即全局变量（不推荐）
JavaScript的变量使⽤
建议先定义后使⽤
-+ 运算符⽤于把⽂本值或字符串变量加起来（连接起来），如果是两个数字则为数学运算加号= 运算符⽤于给变量赋值，变量可以重复赋不同类型的值
JS的语法约定
代码区分⼤⼩写
变量、对象和函数的名称有意义，最好使⽤驼峰
式命名
句尾的分号最好不要省略
数据类型
运算符
typeof运算符
typeof检测变量的返回值，为字符串类型
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值
string：⽤单引号或双引号来声明的字符串boolean：true或false
number：整数或浮点数
function：函数⽅法
object：对象 或 数组 或 Null 类型
转换函数
parseInt()：字符串转换为整数
parseFloat()：字符串转换为浮点数
toString()：返回字符串
强制类型转换
Boolean()：转化为逻辑值
Number()：对象转化为数字
String()：对象转化为字符串
运算符
◆逻辑控制符

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。