JavaScript基础

2017/09/10 00:50
阅读数 103

一、JavaScript简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

1. JavaScript 是脚本语言

  • JavaScript 是一种轻量级的编程语言
  • JavaScript 是可插入 HTML 页面的编程代码
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行

2. JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript

  • HTML 定义了网页的内容
  • CSS 描述了网页的布局
  • JavaScript 定义了网页的行为

二、JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。可以在 HTML 文档中放入不限数量的脚本。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

1. 直接写在HTML文件里

a. <body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

b. <head> 中的 JavaScript函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

c. <body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<body> 
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

2. 引入外部的 JavaScript

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

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

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与在 <script> 标签中编写脚本完全一致。

注意:外部脚本不能包含 <script> 标签。

三、JavaScript 输出

JavaScript 没有任何打印或者输出的函数。JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

1. 使用 window.alert(),弹出警告框来显示数据:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

2. 操作 HTML 元素

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

请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = "段落已修改" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3. 写到 HTML 文档

出于测试目的,可以将JavaScript直接写在HTML 文档中:

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

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

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

<!DOCTYPE html>
<html>
<body>

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

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

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>
覆盖实例

4. 写到控制台

如果浏览器支持调试,可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<body>

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

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

四、JavaScript 语法

1. 字面量

在编程语言中,一个字面量是一个常量,如 3.14。

  • 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e);3.14,1001,123e5
  • 字符串(String)字面量 可以使用单引号或双引号 be written with double or single quotes;"John Doe",‘John Doe’
  • 表达式字面量 用于计算:5 + 6,5 * 10
  • 数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]
  • 对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
  • 函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}

2. 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6 

 

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

变量是一个名称。字面量是一个

3. 操作符

JavaScript语言有多种类型的运算符:

4. 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。

语句是用分号分隔:

x = 5 + 6;
y = x * 10;

5. 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:var x=5

JavaScript 同样保留了一些关键字,有些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

以下是 JavaScript 中最​​重要的保留字(按字母顺序):

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. 标识符

  • 不以数字开头的字母、数字、下划线(_)、美元符号($)组成;例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  • 用于表示函数、变量等的名称;
  • JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

7. 注释

单行注释

// 我不会执行

多行注释

/*我们
不会
执行*/

8. 数据类型

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 通过对象字面量赋值 

 

9. 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘于 b 的结果
} 

 

10. JavaScript 对大小写敏感

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

11. 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

 

 

以上内容转载自w3cschool JavaScript教程

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部