本文主要是介绍JavaScript - Blocks - Functions，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
浏览器内置 functions
var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement madevar myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
// string, and returns this new stringvar myNumber = Math.random();
// the random() function generates a random
// number between 0 and 1, and returns that
// number定义在对象中的 function 称为方法
自定义 functions
function draw() {ctx.clearRect(0,0,WIDTH,HEIGHT);for (var i = 0; i < 100; i++) {ctx.beginPath();ctx.fillStyle = 'rgba(255,0,0,0.5)';ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);ctx.fill();}
}draw();function random(number) {return Math.floor(Math.random()*number);
}执行 functions
function myFunction() {alert('hello');
}myFunction();
// calls the function onceAnonymous functions 匿名
function myFunction() {alert('hello');
}function() {alert('hello');
}var myButton = document.querySelector('button');
myButton.onclick = function() {alert('hello');
}var myGreeting = function() {alert('hello');
}
myGreeting();var anotherGreeting = function() {alert('hello');
}
myGreeting();
anotherGreeting();// 匿名方法多用于事件绑定
myButton.onclick = function() {alert('hello');// I can put as much code// inside here as I want
}Function 参数
var myNumber = Math.random();var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
var madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'
// 若未指定参数，默认使用 ‘,’ 做为分隔符<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Function start</title><style>.msgBox {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 242px;background: #eee;}.msgBox p {line-height: 1.5;padding: 10px 20px;color: #333;padding-left: 82px;background-position: 25px center;background-repeat: no-repeat;}.msgBox button {background: none;border: none;position: absolute;top: 0;right: 0;font-size: 1.1rem;color: #aaa;}</style>
</head><body><button>Display message box</button><script>// function displayMessage() {// let html = document.querySelector("html");// let panel = document.createElement("div");// panel.setAttribute("class", "msgBox");// html.appendChild(panel);// let msg = document.createElement("p");// msg.textContent = "This is a message box";// panel.appendChild(msg);// let closeBtn = document.createElement("button");// closeBtn.textContent = "X";// panel.appendChild(closeBtn);// closeBtn.onclick = function () {// panel.parentNode.removeChild(panel);// };// }function displayMessage(msgText, msgType) {let html = document.querySelector("html");let panel = document.createElement("div");panel.setAttribute("class", "msgBox");html.appendChild(panel);let msg = document.createElement("p");msg.textContent = msgText;panel.appendChild(msg);let closeBtn = document.createElement("button");closeBtn.textContent = "X";panel.appendChild(closeBtn);closeBtn.onclick = function () {panel.parentNode.removeChild(panel);};if (msgType === "warning") {msg.style.backgroundImage = "url(./images/warning.png)";panel.style.backgroundColor = "red";} else if (msgType === "chat") {msg.style.backgroundImage = "url(./images/chat.png)";panel.style.backgroundColor = "aqua";} else {msg.style.paddingLeft = "20px";}}var btn = document.querySelector("button");// btn.onclick = displayMessage; // 此種方式的呼叫，在按鈕點擊之後才會呼叫方法/*btn.onclick = displayMessage();此種方式的呼叫，在按鈕未被點擊就會呼叫方法，就是在畫面載入完成后就會呼叫方法*/btn.onclick = function () {displayMessage('Your inbox is almost full — delete some mails', 'warning');// displayMessage('Brian: Hi there, how are you today?', 'chat');}</script>
</body></html>Function 返回值
var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement madefunction draw() {ctx.clearRect(0,0,WIDTH,HEIGHT);for (var i = 0; i < 100; i++) {ctx.beginPath();ctx.fillStyle = 'rgba(255,0,0,0.5)';ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);ctx.fill();}
}function randomNumber(number) {return Math.floor(Math.random()*number);
}function randomNumber(number) {var result = Math.floor(Math.random()*number);return result;
}ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);Events
<button>Change color</button>var btn = document.querySelector('button');function random(number) {return Math.floor(Math.random()*(number+1));
}btn.onclick = function() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}使用事件的方式
var btn = document.querySelector('button');btn.onclick = function() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}var btn = document.querySelector('button');function bgChange() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}btn.onclick = bgChange;<button onclick="bgChange()">Press me</button>function bgChange() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}var btn = document.querySelector('button');function bgChange() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
} btn.addEventListener('click', bgChange);btn.addEventListener('click', function() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
});btn.removeEventListener('click', bgChange);myElement.onclick = functionA;
myElement.onclick = functionB;myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);事件对象
自动传入事件中，其为调用事件的元素本身
function bgChange(e) {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';e.target.style.backgroundColor = rndCol; // e.target 为按钮自身console.log(e);
} btn.addEventListener('click', bgChange);var divs = document.querySelectorAll('div');for (var i = 0; i < divs.length; i++) {divs[i].onclick = function(e) {e.target.style.backgroundColor = bgChange();}
}阻止事件默认动作
大多数例子是阻止网页表单的默认动作，若用户输入错误讯息，此时就要阻止表单提交的默认动作。
<form><div><label for="fname">First name: </label><input id="fname" type="text"></div><div><label for="lname">Last name: </label><input id="lname" type="text"></div><div><input id="submit" type="submit"></div>
</form>
<p></p>var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');form.onsubmit = function(e) {if (fname.value === '' || lname.value === '') {e.preventDefault();para.textContent = 'You need to fill in both names!';}
}
这篇关于JavaScript - Blocks - Functions的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
