JavaScript

最新推荐文章于 2024-04-28 11:43:36 发布

Mr.Curie

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量188

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_38246644/article/details/88623109

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介

运行在客户端（浏览器）
在浏览器编译运行的脚本语言
具有控制程序流程的功能
名字中含有Java 但无任何关系但语法类似
一种轻量级的编程语言

实现

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

JavaScript 语句，会在页面加载时执行。所以加载的顺序可以理解为 JSP的java代码>JavaScript>HTML

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件

输出

JavaScript 通常用于操作 HTML 元素

从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

</body>
</html>

写到文档输出

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

</body>
</html>

提示：请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

语句

跟java语法很像，实在忘了就想下java的语法

大小写敏感

在文本字符串中使用反斜杠对代码行进行换行，对代码行进行折行

document.write("Hello \
World!");

注释

（HTML注释）

//单行注释

/* 多行注释

变量

JavaScript中的变量为 弱变量类型 即 变量的类型更具它被赋值的类型改变

var 变量名

变量未声明就使用是不会报错的

只声明不赋值其值实际上是 undefined

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明

carname="Volvo";

数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

字符串可以是引号中的任意文本。您可以使用单引号或双引号

var carname="Bill Gates";
var carname='Bill Gates';

数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

var cars=new Array("Audi","BMW","Volvo");

var cars=["Audi","BMW","Volvo"];

对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

函数

使用了关键词 function

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

正常定义

function 函数名(参数){
    return 值;
}

匿名定义

var arg1 = function (参数){
    return 值;
}

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

比较和逻辑运算符

=== 全等（值和类型）

错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误

错误一定会发生

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

DOM HTML æ

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM HTML

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素，如果未找到该元素，则 x 将包含 null。

var x=document.getElementById("intro");

通过标签名找到 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容

改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

改变 HTML 属性

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

常见的事件：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

onmousedown、onmouseup 以及 onclick 事件

点击鼠标按钮时，会触发 onmousedown 事件

释放鼠标按钮时，会触发 onmouseup 事件，

当完成鼠标点击时，会触发 onclick 事件

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie

<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

onfocus事件

当输入字段获得焦点时触发事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

</body>
</html>

HTML DOM 元素（节点）

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
//创建新的 <p> 元素
var para=document.createElement("p");
//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点
var node=document.createTextNode("这是新段落。");
//必须向 <p> 元素追加这个文本节点
para.appendChild(node);

//到一个已有的元素
var element=document.getElementById("div1");
//向这个已有的元素追加新元素
element.appendChild(para);
</script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Number(字符串）将字符串转为数值

String（数值）将数值转为字符串

JavaScript内置对象

内置对象由浏览器提供，可以直接使用，不用事先定义

常见的有

window
document
history
location

Mr.Curie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

简介运行在客户端（浏览器）在浏览器编译运行的脚本语言具有控制程序流程的功能名字中含有Java 但无任何关系但语法类似一种轻量级的编程语言实现HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。老旧的实...
复制链接

扫一扫

专栏目录