零基础学JavaScript:前端魔法之门开启
发表时间: 2024-06-29 23:36
你是否梦想过用代码让网页“动”起来?别担心,JavaScript 就能实现你的愿望!今天,让我们一起踏上前端开发的奇妙旅程,揭开JavaScript的神秘面纱!
<button onclick="document.getElementById('myText').innerHTML = '欢迎光临!'">点我!</button> <p id="myText">点击按钮试试看!</p>
<button onclick="changeContent()">点我!</button> <p id="myText">点击按钮试试看!</p> <script> function changeContent() { document.getElementById('myText').innerHTML = '欢迎光临!'; } </script>
代码解析: 我们为按钮添加了 onclick 属性,当按钮被点击时,就会执行相应的 JavaScript 代码,改变网页内容。
// 假设我们有一个名为 sendData 的函数,用于发送数据到后端 function sendData() { // ... 收集数据,发送请求 ... } // 在按钮点击时调用 sendData 函数 <button onclick="sendData()">发送数据</button>
代码解析: 点击按钮时,sendData 函数会被调用,从而将数据发送到后端进行处理。
function add(a, b) { return a + b; } let result = add(5, 3); // 调用函数,结果存储在 result 变量中 console.log(result); // 输出:8
let person = { name: 'Alice', age: 20, sayHi: function() { // 对象属性值也可以是函数 console.log('Hi!'); } }; console.log(person.name); // 输出:Alice person.sayHi(); // 调用对象方法,输出:Hi!
通过学习JavaScript,你可以为网页注入生命,创造出各种交互效果。从简单的按钮点击到复杂的数据交互,JavaScript都能轻松应对,快来开启你的前端开发之旅吧!