JavaScript 初学备忘录

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 用法

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

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

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

JavaScript 操作 HTML 元素

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

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

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

<script>
document.getElementById("demo").innerHTML="我的第一个JavaScript";  // .innerHTML 可以插入信息到HTML文档中
</script>

</body>
</html>

下面介绍一种document.write()，可以向文档输出内容。

但是需要注意的是：如果在HTML文档已完成加载后再执行document.write(), 整个HTML页面都将被覆盖。就是说document.write()用于在整个HTML文档，输出内容将覆盖之前加载好的HTML页面。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

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

<button onclick="myFunction()">尝试一下</button>

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

</body>
</html>

下面这种情况除外，因为document.write()是与其他标签一起被加载到HTML页面的。而上面的document.write()是在HTML文档加载之后被调用，document.write()覆盖掉了原来HTML页面

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

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

</body>
</html>

JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建） JavaScript 变量

var carname;   // 声明变量
var carname="Volvo"; // 声明变量 且 赋值

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

<script>

// JavaScript 字符串

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';


// JavaScript 数字

var x1=34.00;
var x2=34;
var y=123e5;
var z=123e-5;


// JavaScript 布尔

var x=true;
var y=false;


// JavaScript 数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 或者声明和赋值一起
var cars=new Array("Saab","Volvo","BMW");
// 或者
var cars=["Saab","Volvo","BMW"];

// JavaScript 对象
var person={
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
    };
// 访问对象
document.write(person.lastname + "<br>");    // 输出 Doe
document.write(person["lastname"] + "<br>");  // 输出 Doe


// Undefined 和 Null
var person;
var car="Volvo";
document.write(person + "<br>");   // 输出 undefined
document.write(car + "<br>");       // 输出 Volvo
var car=null
document.write(car + "<br>");      // 输出 null


</script>

JavaScript 对象

创建 JavaScript 对象

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
</script>

访问对象的属性

objectName.propertyName

var message="Hello World!";  // 创建一个字符串对象
var x=message.length;      // 访问字符串对象属性

访问对象的方法

objectName.methodName()

var message="Hello world!";
var x=message.toUpperCase();

JavaScript 函数

JavaScript 函数语法

function functionname()
{
执行代码
}

调用带参数的函数

// 格式 myFunction(argument1,argument2)

function myFunction(var1,var2)
{
代码
}

带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

JavaScript 表单验证

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

表单数据经常需要使用Javascript来验证其正确性：

验证表单数据是否为空?

验证输入是否是一个正确的email地址?

验证日期是否输入正确?

验证表单输入内容是否为数字型?

必填（或必选）项目

<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;   // 根据form name 找到表单，得到表单的值
if (x==null || x=="")
  {
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>