使用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的组成

关于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()：对象转化为字符串

运算符

◆逻辑控制符

1.if条件语句
variablename = ( condition ) ? value1 : value2 ;
2.switch多分支语句

◆流程控制语句

1.while和do while循环语句
2.for循环语句
for ( 变量=开始值; 变量<=结束值; 变量=变量+步进值 )
{
//需执行的代码
}
for ( 变量a in 对象obj )
{
// 获得 obj[a];
}
3.循环中断
break
使用 break 语句来终止循环
continue
使用 continue 语句来终止当前的循环，然后从下一个值继续执行

◆语法规则

JavaScript中的函数定义

JavaScript中的函数
一组可以随时随地运行的语句
将脚本编写为函数以避免页面载入时执行该脚本

  • 分类
    系统函数
    自定义函数
/*系统函数举例*/
parseInt("143dd") //将字符串转化为整数，结果为143
parseFloat("143.33dd") //解析一个字符串，并返回一个浮点数，结
果为143.33
/*自定义函数*/
//根据函数的语法自定义的函数
myfun(123);


  • 如何调用函数
    函数可以通过其名字加上括号中的参数进行调用
<html>
<head>
<title>函数的介绍</title>


<script type="text/javascript">

//函数的使用

// 当某些代码 需要被重复利用的时候就可以使用函数了
console.log(isNaN("jack"));  //判断的不是数据类型 是值 "12",12 false 会自动尝试将值转换为数值

// 写一个最简单的函数并调用

// 函数的调用
//alertName("jack");  //声明在调用之后就无法被调用了
// 函数的声明方式1   js函数提升器 js会先声明这种方式声明的函数 再依次执行代码
function alertName(userName){
	alert(userName);
}

//  函数的声明方式2 声明一个匿名函数将地址传递给变量
//var alertName = function(userName){
//	alert(userName);
//}

/*
如果我函数的声明中参数和传入参数数量不一致会有什么结果
functuon fn1() {}
fn1("jack");
functuon fn2(userName) {}
fn2();
?形参和实参有关系吗？
没有
*/
//实现练习 eval 和 isNaN 两个系统函数

</script>
</head>

<body>
<h1>你好</h1>
</body>


</html>
事件

JavaScript侦测到的行为

  • 事件举例：
  • 鼠标点击
  • 页面或图像载入
  • 鼠标悬浮于页面的某个热点之上
  • 在表单中选取输入框
  • 表单提交
  • 键盘按键
    -
    例题:
    ◆需求说明
    制作留言板提交效果
    点击“提交”按钮表单提交
    提交前让用户确认，确认后提交 ，否则不提交
<html>
<head>
<title>随堂练习2 从页面上获取元素和元素的值</title>
</head>


<body>
标题：<input type="text" id="tt" /><br />
内容：<textarea id="ttt"></textarea><br />
<input type="button" value="提交" id="btn" />

<script type="text/javascript">
//1 获取元素
var title1=document.getElementById("tt");
var value1=document.getElementById("ttt");
var btn1=document.getElementById("btn");
//2 操作元素
//  绑定事件
btn1.onclick=function(){
	if(confirm("确定提交吗？")){
		console.log(title1.value);
		console.log(value1.value);  //innerHTML和value的区别
	}

}
</script>
</body>
</html>
程序调试
  • 错误分类
    语法错误
    逻辑错误
程序调试的方法
  • 注释调试法
  • 输出调试法
    alert()调试法
    document.write()调试法
    console对象调试法（IE不支持）
    -调试工具
    Firebug、浏览器自带开发窗口
使用JavaScript实现动态交互

BOM概述
BOM使得JavaScript能与浏览器进行“对话”

  • 主要是Window对象的操作
    History对象
    Location对象
    Document对象

    例题:
<html>
<head>
<title>随堂练习3</title>
</head>


<body>
<h1>新浪</h1> <input type="button" value="改变层内容" id="btn1" />

<br />

<input type="text" name="session" />
<input type="text" name="session" />
<input type="text" name="session" />
<input type="text" name="session" />

<br />

<input type="button" value="显示所有input元素的内容" id="btn2" />
<input type="button" value="显示所有session内容" id="btn3" />

<hr />
<p id="pshow"></p>


<script text="text/javascript">
//1 获取元素
//  如果元素具有id 浏览器会自动在加载完成之后 自动创建为一个对象模型 名字就是这个id 前提是你必须保证 这个id在html中是唯一的
var inputs = document.getElementsByTagName("input");
var sessions = document.getElementsByName("session");
var hs = document.getElementsByTagName("h1");

//2 操作元素
// 2.1 改变元素内容
btn1.onclick=function(){
	hs[0].innerHTML="搜狐";

}
// 2.2 显示所有input中的内容
btn2.onclick=function(){
	pshow.innerHTML="";
	for(var i=0;i<inputs.length;i++){
		pshow.innerHTML=pshow.innerHTML+" "+inputs[i].value;
	}

}
// 2.3 显示所有session的内容
btn3.onclick=function(){
	pshow.innerHTML="";
	for(var i=0;i<sessions.length;i++){
		pshow.innerHTML=pshow.innerHTML+" "+sessions[i].value;
	}
}
</script>
</body>
</html>

HTML DOM innerHTML 属性
定义和用法
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
语法


Object.innerHTML = "HTML";// 设置
var html = Object.innerHTML;// 获取

更多推荐

使用JavaScript制作动态网页-1