本文最后更新于：2 小时前

JavaScript简介

1. 直接写入 HTML 输出流

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

//<head> 中的 JavaScript 函数
<head>
<meta charset="utf-8"> 
<title>JavaScript</title> 
<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="My First JavaScript Functiion";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

//<body> 中的 JavaScript 函数
<body>
<h1>My Web</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">click here</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="My First JavaScript Functiion";
}
</script>
</body>

只能在HTML输出流中使用 document.write。
如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。

2. 改变 HTML 内容

<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

3. 改变HTML图像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

//简洁版
<script>
	function changeImage(s)
{
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">

4. 改变HTML样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

5. 验证输入

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
    
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

JavaScript用法

1. <head>中的 JavaScript 函数

<head>
<meta charset="utf-8"> 
<title>JavaScript</title> 
<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="My First JavaScript Functiion";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

2. <body>中的 JavaScript 函数

<body>
<h1>My Web</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">click here</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="My First JavaScript Functiion";
}
</script>
</body>

3. 外部的JavaScript

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>

myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="My First JavaScript Functiion";
}

JavaScript语法

1. 变量

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

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

2. 数据类型

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

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

3. 大小写

JavaScript 对大小写是敏感的。

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

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

4. 折行

在文本字符串中使用反斜杠对代码行进行换行。

document.write("你好 \
世界!");

JavaScript函数

1. 调用带参数的函数

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
    alert("Welcome " + name + ", the " + job);
}
</script>

JavaScript作用域

1. 局部作用域

<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是：" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

2.全局变量

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。以下实例中 carName 在函数内，但是为全局变量。

<p>
如果你的变量没有声明，它将自动成为全局变量：
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

3.变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

4. HTML中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

<p>
在 HTML 中, 所有全局变量都会成为 window 变量。
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + window.carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1. HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

<some-HTML-element some-event=‘JavaScript 代码’>

eg.Date()

在以下实例中，按钮元素中添加了 onclick 属性

JavaScript 代码将修改 id=”demo” 元素的内容

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

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

2. 常见HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript字符串

1. 字符串长度

<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");
</script>

2. 特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。

因为这样，以下实例 JavaScript 无法解析：

“We are the so-called “Vikings” from the north.”

字符串 “We are the so-called “ 被截断。

如何解决以上的问题呢？可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:

“We are the so-called "Vikings" from the north.”

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：

转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码	输出
'	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

3. 字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： *var firstName = “John”***

但我们也可以使用 new 关键字将字符串定义为一个对象： *var firstName = new String(“John”)***

<p id="demo"></p>
<script>
var x = "John";              // x是一个字符串
var y = new String("John");  // y是一个对象
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>

4. 字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

5. 字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

6. 字符串运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

x=5+5;
y=”5”+5;
z=”Hello”+5;

*x,y, 和 z 输出结果为:*

10
55
Hello5

规则:如果把数字与字符串相加，结果将成为字符串！

JavaScript比较和逻辑运算法

比较和逻辑运算符用于测试 true 或者 false

笔记

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

nameList 上一篇

isPrime 下一篇

JavaScript笔记