欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

使用JavaScript制作动态网页-1

发布时间：2024/3/26 69 豆豆
生活随笔 收集整理的这篇文章主要介绍了 使用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的组成

关于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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。