JavaScript 教程---菜鸟教程

发布时间：2025-12-09 18:24:21 浏览次数：4

文章目录

JavaScript 教程
- JavaScript 输出
- JavaScript 对象
- JavaScript 函数
- JavaScript 事件
JS 函数
JS 类
JS HTML DOM
JS 高级教程
JS 浏览器 BOM
JS 库

JavaScript 教程

JavaScript 输出

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

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

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

使用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()写入到浏览器的控制台。

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 函数

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

函数就是包裹在花括号中的代码块，前面使用了关键词 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>

JS 函数

JS 类

JS HTML DOM

JS 高级教程

JS 浏览器 BOM

JS 库

上一篇：ipad怎么上网？下一篇：cocos2d 解密ccbi_CocosBuilder 学习笔记(3) AnimationManager 与 ccbi 文件解析

知识问答

JavaScript 教程---菜鸟教程

文章目录