JS笔记

最新推荐文章于 2025-02-18 17:52:54 发布

原创最新推荐文章于 2025-02-18 17:52:54 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

我的笔记专栏收录该内容

5 篇文章

订阅专栏

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS简介!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
JavaScript：写入 HTML 输出
document.write("<h1>This is a heading</h1>");

JavaScript：对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>

JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript：改变 HTML 图像

JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入
if isNaN(x) {alert("Not Numeric")};//判断是否为数字

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS实现!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<script> 标签
<script> 和 </script>

外部的 JavaScript
<script src="myScript.js"></script>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS输出!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
document.getElementById("demo").innerHTML="My First JavaScript";

写到文档输出
document.write("<p>My First JavaScript</p>");

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS变量!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量

全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

变量必须以字母开头
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS数据类型!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
JavaScript 数组
var cars=new Array();
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];

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

声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS对象!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
创建 JavaScript 对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS函数!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
JavaScript 函数语法
function functionname()
{
这里是要执行的代码
}

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS循环!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
For/In 循环
var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
   txt=txt + person[x];
}

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JSContinue 语句!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
label:
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
break labelname;
continue labelname;

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS错误!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}

Throw 语句

<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>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!JS表单验证!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

<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>