JavaScript 教程

JavaScript 输出

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

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

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

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

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

使用innerHTML写入到 HTML 元素。

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

请使用 “id” 属性来标识 HTML 元素，并innerHTML来获取或插入元素内容：

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

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

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

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

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

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

在这里插入图片描述

JavaScript 对象

对象定义
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
访问对象属性
你可以通过两种方式访问对象属性:person.lastName;或person["lastName"];
对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:name = person.fullName();
你可以使用以下语法创建对象方法：

methodName : function() {
    // 代码 
}

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

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
 
<body>
<button onclick="myFunction()">点我</button>
</body>

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

调用带参数的函数

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

带有返回值的函数
计算两个数字的乘积，并返回结果：

function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

“demo” 元素的 innerHTML 将是：12

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

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

以下实例中，JavaScript 代码将修改 id=“demo” 元素的内容。
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
在下一个实例中，代码将修改自身元素的内容 (使用this.innerHTML):
<button onclick="this.innerHTML=Date()">现在的时间是?</button>