您的位置：首页 > Web前端 > JavaScript

JS基础（一）

2016-03-02 14:55 627 查看

JavaScript入门笔记

从菜鸟教程里面摘抄：http://www.runoob.com/js/js-tutorial.html

一、用法

1、如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
2、JavaScript脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中，也可以放在HTML外部。
3、外部的JavaScript

<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
</body>
</html></span>

myScript.js 的文件内容：

<span style="font-family:KaiTi_GB2312;">function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}</span>

二、输出->JavaScript
显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。

<script>window.alert(5
+ 6);</script>

使用 document.write() 方法将内容写到 HTML 文档中。

<script>document.getElementById("demo").innerHTML
= "段落已修改。";</script>

使用 innerHTML 写入到 HTML 元素。

<script>document.write(Date());</script>

使用 console.log() 写入到浏览器的控制台。

<script>console.log(c);</script>

三、语法

JavaScript数据类型

var length = 16;
// Number 通过数字字面量赋值
var points = x * 10;
// Number 通过表达式字面量赋值
var lastName = "Johnson";
// String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];
// Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};
// Object 通过对象字面量赋值

四、语句

1、分号用于分隔JavaScript语句；
2、JavaScript对大小写敏感；
3、JavaScript会忽略多余的空格；
4、可以在文本字符串中使用反斜杠对代码行进行换行。
document.write("你好
\世界!");

五、注释

单行注释//
多行注释/*
*/

六、变量

1、变量名要求：
变量必须以字母开头；
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）；
变量名称对大小写敏感。
2、一条语句多条变量：
var lastname="Doe", age=30, job="carpenter";
3、在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined,可以通过将变量的值设置为
null 来清空变量。

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

1、字符串可以用单引号和双引号
2、数组的运用

<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html>
<html>
<body>
<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
var classes=new Array("math","music","English","chinese");
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
for (i=0;i<classes.length;i++)
{
document.write(classes[i] + "<br>");
}
</script>
</body>
</html></span>

3、对象的应用和两种寻址方式

<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html>
<html>
<body>
<script>
//另一种表达：var person={firstname:"John",lastname:"Doe",id:5566};
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
</body>
</html></span>

八、对象

访问对象方法

1、使用以下语法创建对象方法：methodName : function() { code lines }

2、使用以下语法访问对象方法：objectName.methodName()

九、函数

1、函数语法
function functionname()
{
执行代码
}

2、带参数的函数
function myFunction(var1,var2)//函数
{
代码
}

myFunction(argument1,argument2)//调用

3、局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

4、全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

5、JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

十、事件举例

<!DOCTYPE html>
<html>
<body>
<p>点击按钮执行 displayDate() 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

l

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航