自学内容网 自学内容网
自学内容网 > 正文

第十章 JavaScript的应用

🕗 发布于 2024-11-23 06:47 javascript  开发语言  ecmascript  

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种轻量级、解释型的编程语言，广泛用于Web开发，为网页增加动态交互功能。其主要特点包括：

  • 简单性：语法简洁，易于学习和使用。
  • 动态性：可以直接对用户输入做出响应，无需重新加载页面。
  • 跨平台性：只要有支持JavaScript的浏览器，就可以在任何平台上运行。
  • 安全性：通过浏览器提供的安全机制，限制了对本地系统的访问。
  • 基于对象的语言：几乎所有的事物都是对象，包括数组、函数等。

10.1.2 JavaScript入门案例

一个简单的JavaScript例子是弹出一个警告框：

10.1.3 JavaScript放置的位置

JavaScript代码可以放置在HTML文档的多个位置：

  • head标记中的脚本：通常用于定义函数或全局变量。
  • body标记中的脚本：在页面加载时执行，适合处理页面内容。
  • 外部js文件中的脚本：通过<script src="path/to/file.js"></script>引入，便于代码复用和维护。
  • 事件处理代码中的脚本：直接绑定在HTML元素的事件属性上，如onclick。 
10.1.3.1 head标记中的脚本

script标记放在头部head 标记中，通过JavaScript 代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。

【例题10.2】

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>head中定义的JS函数</title>
<script type="text/javascript">
function message(){
alert("调用JS函数！sum(100,200)="+sum(100,200));
}
function sum(x,y){
return x+y;
}//返回函数计算结果
</script>
</head>
<body>
<h4>head标记内定义两个JS函数</h4>
<p>无返回值函数：message()</p>
<p>有返回值函数：sum(x,y)</p>
<form>
<input name="btncal" type="button" onclick="message()" value="计算并显示两个数的和"/>
</form>
</body>
</html>

浏览效果如图：

 


10.1.3.2 body标记中的脚本

 script 标记放在主体 body标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

【例题10.3】

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的 JavaScript 脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo=document.getElementById("clk");
demo.onclick=msg;
function msg(){
alert("我是body 中的 JavaScript 脚本");
}
</script>
</body>
</html>

浏览效果如图：

 


10.1.3.3 外部js文件中的脚本

除了将JavaScript代码写在head和body部分以外，也可将JavaScript 函数单独写成个js文件，在HTML文档中引用该js文件。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的JavaScript函数</title>
<script type="text/javascript" src="js/demo.js">
document.write("这条语句没有执行,被忽略掉了!");
</script>
</head>
<body>
<form>
<input name="btnl" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
</form>
</body>
</html>

js文件代码：

function message(){
alert("happy");
}

浏览效果如图：

 

10.1.3.4 事件处理代码中的脚本

JavaScript 代码除了上述三种放置位置外，还可直接写在事件处理代码中。

【例题10.5】

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理代码中加入JavaScript代码</title>
</head>
<body>
<form>
<input type="button" onclick="alert('直接在事件处理代码中加入 JavaScript 代码')" value="直接调用JavaScript代码">
</form>
</body>
</html>

浏览效果如图：

 

10.2 JavaScript语法

10.2.1 语法基础

  • 区分大小写：变量名、函数名等区分大小写。
  • 变量不区分类型：声明变量时不需要指定类型，类型会在运行时确定。
  • 每行代码结尾可以省略分号：但推荐为了代码清晰度和一致性而使用分号。
  • 注释：支持单行注释//和多行注释/*...*/。

10.2.2 标识符和常用变量

  • 标识符：用于变量名、函数名等，必须以字母、下划线或美元符号开头，后续可以包含数字。
  • 变量声明：使用var关键字，如var x = 10;。
  • 变量类型：包括数字（Number）、字符串（String）、布尔（Boolean）、对象（Object）等。

10.2.3 运算符与表达式

JavaScript支持多种运算符，包括算术运算符（+, -, *, /）、关系运算符（==, !=, >, <）、逻辑运算符（&&, ||, !）、赋值运算符（=, +=, -=）、条件运算符（? :）和逗号运算符（,）。

10.2.4 程序设计

  • 条件分支语句：if, else if, else。
  • 循环语句：for, while, do...while。

10.2.5 函数

  • 定义函数：使用function关键字，如function myFunction() { ... }。
  • 函数返回值：使用return语句返回值。
  • 函数调用：通过函数名调用，如myFunction();。
10.2.5.1 定义函数
function函数名(varl，var2，var3){
    /*函数代码*/
 
】

val、var2、var3 等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return 语句。例如:

function sum( a , b ){
    x=a+ b;
    return X;
}

JavaScript 中的函数无须对函数的返回值进行申明，直接使用returm，返回值的类型可以是本节提到的6种类型中的任意一种。

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum函数，可以这样写:sum(5，8)。

【例题10.5】

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>

浏览效果如图：

 

10.3 JavaScript对象

10.3.1 对象基础

  • 概述：对象是JavaScript的基本数据类型之一，包含属性和方法。
  • 属性：描述对象的状态，如person.name。
  • 方法：描述对象的行为，如person.sayHello()。

10.3.2 常用对象

  • window对象：代表浏览器窗口，包含方法和属性用于控制窗口。
  • document对象：代表整个HTML文档，用于操作DOM。
  • location对象：提供有关当前URL的信息，并允许修改URL来刷新或导航到新页面。
  • navigator对象：提供有关浏览器的信息。
  • screen对象：提供有关用户屏幕的信息。

【例题10.7】

例题代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动窗口</title>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(50,50);
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open(",",width=200,height=100)
myWindow.document.write("This is'myWindow'");
</script>
<input type="button" value="Move'myWindow'" onclick="moveWin()"/>
</body>
</html>

浏览效果如图：

 

【例题10.8】

例题代码：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script>
var useChoice=window.confirm("请选择“确定”或“取消”");
if(userChoice ==true){
document.write("OK!");
}
if(userChoice==false){
document. write("Cancel!");
}
</script>
</body>
</html>

浏览效果如图：

 

【例题10.9】

例题代码：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt()的使用</title>
</head>
<body>
<script type="text/javascript" >
<!-- document.write("您的爱好是---"+prompt('请问您的爱好？','请输入')); -->
var hobby=prompt('请问您的爱好？','请输入');
document.write("您的爱好是---"+hobby);
</script>
</body>
</html>

浏览效果如图：

 

【例题10.10】

例题代码：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Document 属性</title>
</head>
<body>
<img src="img/1.bmp" BORDER="0" alt=""/><br />
<script type="text/javascript">
document.write("文件地址："+document.location+"<br/>")
document.write("文件标题"+document.title+"<br/>");
document.write("图片路径"+document.images[0].src+"<br/>");
</script>
</body>
</html>

浏览效果如图：

 

10.3.2.3 location对象
location 对象用于获取或设置窗体的URL,并且可以用于解析URL，是JavaScript 中最重要的对象之一，location的中文意思是“位置"。location既是window对象的属性又是document对象的属性，即“window.location== document. location;”。

【例题10.12】

例题代码：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象使用</title>
<script type="text/javascript">
function currLocation(){
alert(window.location)
}
function newLocaton(){
window.location="示例10.10.html"
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL"/>
<input type="button" onclick="newLocaton()" value="改变URL"/>
</body>
</html>

浏览效果如图：

 

10.4 JavaScript事件

10.4.1 事件及事件处理

事件是文档或浏览器窗口中发生的特定动作，如点击、加载、移动等。事件处理函数是在事件发生时执行的代码。

10.4.2 常用事件

  • 鼠标事件：onclick, ondblclick, onmouseover等。
  • 键盘事件：onkeydown, onkeyup, onkeypress等。
  • 表单事件：onsubmit, onfocus, onblur等。
  • 窗口事件：onload, onresize, onscroll等。

10.4.3 事件应用举例

事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载人、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。

【例题10.14】onLoad事件

例题代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad事件</title>
</head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies () {
if(navigator.cookieEnabled==true)
alert("已启用Cookies");
else
alert("未启用Cookies");
}
</script>
<p>提示框会告诉你，浏览器是否已启用Cookies。</p>
</body>
</html>

浏览效果如图：

 

【例题10.15】onchange事件

例题代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange事件</title>
<script type="text/javascript">
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>

浏览效果如图：

 

【例题10.16】鼠标事件（mouseOver，mouseOut，mouseDown，mouseUp）

例题代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<script type="text/javascript">
function mouseOver(obj){
obj.style.color="blue";
obj.innerHTML="把鼠标移开"
}
function mouseOut(obj){
obj.style.color="red";
obj.innerHTML="把鼠标移到上面"
}
function mouseDown(obj){
obj.style.backgroundColor="blue";
obj.innerHTML="请释放鼠标按钮";
}
function mouseUp(obj){
obj.style.backgroundColor="red";
obj.innerHTML="请按下鼠标按钮";
}
</script>
</head>
<body>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color: green;width: 120px;height: 20px;padding: 20px;color: #ffffff;">把鼠标移到上面</div>
<br />
<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color: green;width: 120px;height: 20px;padding: 20px;color: #ffffff;">请按下鼠标按钮</div>
</body>
</html>

浏览效果如图：

 

【例题10.17】onkeypress，onkeydown事件

例题代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript">
function keyDown(){
alert("你按下了按键");
if(event.ctrlKey){
alert("你按下了Ctrl键");
}
}
function keyPress(){
alert("你按下了键，并且释放了按键");
}
</script>
</head>
<body onkeydown="keyDown()" onkeypress="keyPress()">
</body>
</html>

浏览效果如图：

 

10.5 综合案例——轮播广告

案例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 20px;
}
#container{
position: relative;
width: 600px;
height: 400px;
border:1px solid #333;
overflow:hidden;
margin-left: auto;
margin-right: auto;
}
#list{
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}
#list img{
float: left;
width: 600px;
height: 400px;
}
#buttons{
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}
#buttons span{
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons.on{
background: orangered;
}
.arrow{
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color: RGBA(0,0,0,.7);
}
#container:hover.arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
var timer;
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
//无限滚动判断
if(newLeft>-600){
list.style.left=-3000+'px';
}
if(newLeft<-3000){
list.style.left=-600+'px';
}
}
function play(){
// 重复执行的定时器
timer=setInterval(function(){
next.onclick();
},2000)
}
function stop(){
clearInterval(timer);
}
function buttonsShow(){
// 将之前的小圆点的样式清楚
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
}
}
// 数组从0开始,index需要减1
buttons[index-1].className="on";
}
prev.onclick=function(){
index-=1;
if(index<1){
index=5
}
buttonsShow();
animate(600);
};
next.onclick=function(){
index+=1;
if(index>5){
index=1
}
animate(-600);
buttonsShow();
};
for(var i=0;i<buttons.length;i++){
(function(i){
buttons[i].onclick=function(){
var clickIndex=parseInt(this.getAttribute('index'));
var offset=600*(index-clickIndex);
animate(offset);
index=clickIndex;
buttonsShow();
}
})(i)
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/p5.jpg" alt="5"/>
<img src="img/p1.jpg" alt="1"/>
<img src="img/p2.jpg" alt="2"/>
<img src="img/p3.jpg" alt="3"/>
<img src="img/p4.jpg" alt="4"/>
<img src="img/p5.jpg" alt="5"/>
<img src="img/p1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>
<a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>
</html>

浏览效果如图 ：

 

 

 

 

 

 


原文地址：https://blog.csdn.net/2301_79780386/article/details/143981790

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024