使用JavaScript制作动态网页_js动态网页

作者：AllinToyou | 2024-03-16 13:08:09

踩

js动态网页

什么是JavaScript？
JavaScript是一种描述语言，基于对象和事件驱动的脚本语言
JavaScriptte特点：
脚本语言（一种轻量级的编程语言）
一种解释性语言（无需预编译）
被设计为向HTML页面添加交互行为
运行于客户端
JavaScriptte基本语法

<script type= " text/javascript " >
<!--
// JavaScript 代码
//-->
</script>
1
2
3
4
5

注意：
（1）部分是非必须的，为了规避老版本浏览器不识别
（2）“//”是 JavaScript 的注释符号（/**/也是注释符号），它会阻止
JavaScript 编译器对这一行的编译
（3）type属性不推荐写成 language= " javascript " ，不符合XHMLT1.0
JavaScriptte的组成：
在这里插入图片描述

关于ECMAScript

1.ECMAScript定义了脚本语言的所有属性、方法和对象
2.包括语法、类型、关键字、保留字、运算符、对象等
3.除了JavaScript外，同时也是Nombas的ScriptEase和
Flash脚本ActionScript的基础

关于DOM（Document Object Model文档对象模型）

1.HTML和XML的应用程序接口（API）
2.把整个页面规划为层级式的节点结构

关于BOM（Browser Object Model浏览器对象模型）

1.可对浏览器窗口进行访问和操作包括：
弹出新的浏览器窗口
移动、关闭浏览器窗口及调节浏览器窗口大小
获取用户屏幕分辨率的屏幕对象
WEB浏览器详细的定位对象
2.对象举例
Navigator对象
Screen对象
Window对象

Window对象(表示浏览器中打开的窗口)
特点：
1.Window 对象是全局对象，可直接调用其方法和属性
2.Window对象的一些方法和属性可省略不写
Window对象常用属性

history属性就是History对象的引用
方法：
1.back()：加载上一个浏览的文档
2.forward()：加载下一个浏览过的文档
3.go(n)：n为整数，跳转第n个浏览过的文档
3.1.n==0 则刷新当前页面
3.2.n>0 则向前跳转到第n个文档
3.3.n<0 则向后跳转到第n个文档
代码：

<html>
<head>
<title>history对象</title>
</head>
<body>
<h1 id="hh1">返回上一页</h1>
<script>
//1 获取元素
var hh1 = document.getElementById("hh1");
//2 操作元素
hh1.onclick=function(){
	history.back();
}
</script>
</body>
的繁荣打</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

location属性就是Location对象的引用

代码：

<html>
<head>
<title>history对象</title>
</head>
<body>

<input type="text" id="address" /><input type="button" value="跳转" id="btn" />
<!-- file:///C:/Users/naixi/Desktop/www.baidu.com -->
<script type="text/javascript">
//console.log(location);
//1 获取元素
var add=document.getElementById("address");
var btn1=document.getElementById("btn");
//2 操作元素
btn1.onclick=function(){
//console.log(location);
	// 2.1 获取文本框中的内容
	var a = add.value;
	// 2.2 将文本框中的内容作为浏览器中的地址
	location.href="https://"+a;
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

document属性：每个载入浏览器的 HTML 文档都会成为 Document 对象,利用它可对 HTML页面中的所有元素进行访问。
常用属性：
title：返回或设置当前文档的标题
常用方法
1.write()：向文档写HTML表达式或JavaScript代码
2.getElementById():返回对拥有指定id的第一个对象的引用
3.getElementsByTagName():返回带有指定名称的对象集合
4.getElementsByName():返回带有指定名称的对象集合

代码：

<html>
<head>
<title>document对象</title>
</head>
<body>
<ul>
<li name="ll1">苹果</li>
<li>葡萄</li>
<li name="ll1">西瓜</li>
</ul>
<script>
//1 获取元素
var lis = document.getElementsByTagName("li");
var names = document.getElementsByName("ll1");
//2 操作元素
lis[2].innerHTML="橘子";
for(var i=0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
//console.log(names);
//for(itm in names){
//console.log(itm);
//}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

History对象
Location对象

引用JavaScriptte的三种方式

1.HTML标签中引用
2.<script>标签中直接书写
3.通过<script>标签的src属性引入外部JS文件
代码：

<html>
    <head>
        <title>javascript支持的三种弹窗，实现和用户交互</title>
        <!--这是html注释-->
       <script type="text/javascript">
        //这是javascript注释
        //第一种弹窗 alert（）弹窗
        //alert("你好！alert");//注意：alert有一个特性！
        //浏览器处于阻塞状态，代码在alert这个位置停止并等待

        //第二个弹窗 prompt（）具有返回值，返回的是String类型
        //var userName=prompt("请输入用户名称:", "刘德华");
        //prompt("请输入姓名");
        //接受两个参数，第一个是提示字符，第二个是输入框默认的值
        //alert(typeof userName);

        //第三个弹窗 confirm（） 确认框，返回的是boolean类型的true或false
        var flag=confirm("确定要提交吗？")
        alert(flag);
        document.write("你好，javascript");
        </script>
    </head>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

JavaScript的数据类型

undefined
1.undefined 类型只有一个值，即 undefined;
2.未定义或定义未赋值
Null
表示尚未存在的对象，与undefined值相等
Number
var iNum=23; //整数
var iNum=23.0; //浮点数
Boolean
true和false
String
一组被引号（单引号或双引号）括起来的文本
var string1=“This is a string”;

代码：

<html>
<head>
<title>介绍js的数据类型及基本操作</title>
<script type="text/javascript">
// 1 代码调试  代码断点调试alert来完成
// 2 代码调试  我不想中断代码 console.log();
//var userName="jack";
//alert(userName);
//console.log(userName);

var aa = 12;   //使用var声明变量
console.log(typeof aa );   //number
//bb = 36;    //没有使用var来声明
//上面是js支持的两种变量声明方式，注意他们是有区别的
//我只规定你们只能用第一种 不允许使用第二种
aa = "12";
console.log(typeof aa );   //string

console.log(12+"12");   //这边的加号和Java有相同的使用方法和注意事项，使用的时候需要大家尽量注意数据类型
console.log(12+"12");   //这边的加号和Java有相同的使用方法和注意事项，使用的时候需要大家尽量注意数据类型

var u ;  //当你声明了一个变量的时候 ， js自动复制undefined
var uu=null;
console.log(uu);
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

数据类型转换

◆转换函数
◼parseInt():字符串转换为整数
◼parseFloat():字符串转换为浮点数
◼toString()：返回字符串
◆强制类型转换
◼Boolean()：转化为逻辑值
◼Number()：对象转化为数字
◼String()：对象转化为字

常用的系统函数

自定义函数
语法：

代码：

<html>
<head>
<title>函数的介绍</title>
<script type="text/javascript">
//函数的使用
// 写一个最简单的函数并调用
// 函数的调用
//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();
?形参和实参有关系吗？
*/
</script>
</head>
<body>
<h1>你好</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

常见事件举例

在这里插入图片描述
相关代码：

<html>
<head>
<title>事件的介绍</title>
</head>


<body>
<!-- onfocus -->
<input type="text" onfocus="javascript:console.log(this.value)" 
onblur="javascript:console.log(this.value)" />
<br />
<select onchange="javascript:console.log(this.value)">
<option value="1">玩具</option>
<option value="2">文具</option>
<option value="3">书籍</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<script>
window.onload=function(){
// 当页面加载完成的时候 出发onload事件 
// 这个事件绑定在一个函数上，然后执行这个函数
	var input1 = document.getElementById("userName");
	var texta1 = document.getElementById("texta");
	console.log(input1.value);
	console.log(texta.innerHTML);

}

</script>
</head>
<body>
<input type="text" id="userName" value="你好上海" />
<textarea id="texta">
你好中国
</textarea>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

程序的输出调试方法
1.alert()调试法
2.document.write()调试法
3.console对象调试法（IE不支持）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/249668