JavaScript 教程---菜鸟教程
文章目录
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>