码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 初学备忘录

时间:2016-07-28 14:15:11      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:

JavaScript 是脚本语言

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

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

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

 

JavaScript 用法

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

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

 

<script> 标签

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

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript

 

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 表单验证

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>

 

JavaScript 初学备忘录

标签:

原文地址:http://www.cnblogs.com/haoshine/p/5714349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!