JavaScript - Blocks - Functions

最新推荐文章于 2024-08-31 07:46:48 发布

瘦毛毛

最新推荐文章于 2024-08-31 07:46:48 发布

阅读量168

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013275171/article/details/84956141

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

浏览器内置 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 made

var 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 string

var 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 once

Anonymous 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 made

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();
  }
}

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!';
  }
}