JavaScript - Blocks - Functions

2024-09-03 00:08
文章标签 java script blocks functions

本文主要是介绍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 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!';}
}

 

这篇关于JavaScript - Blocks - Functions的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1131463。

相关文章

Java中Switch Case多个条件处理方法举例

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,：本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1：合并相同代码的多个case示例2：通过字符串合并多个case进阶用法使用
阅读更多...
Java中的Lambda表达式及其应用小结

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,：本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式？2. Lambda表达式的基本语法例子1：最简单的Lambda表
阅读更多...
Java中Scanner的用法示例小结

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习：猜数字游戏猜数字前言有时候我们在
阅读更多...
Spring Security+JWT如何实现前后端分离权限控制

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT？二、JWT 基本结构
阅读更多...
java解析jwt中的payload的用法

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》：本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1：添加依赖步骤 2：解析 JWT2. 使用 N
阅读更多...
springboot项目如何开启https服务

springboot项目如何开启https服务

《springboot项目如何开启https服务》：本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将
阅读更多...
Java实现优雅日期处理的方案详解

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2
阅读更多...
Java中的JSONObject详解

Java中的JSONObject详解

《Java中的JSONObject详解》：本文主要介绍Java中的JSONObject详解,需要的朋友可以参考下... Java中的jsONObject详解一、引言在Java开发中，处理JSON数据是一种常见的需求。JSONObject是处理JSON对象的一个非常有用的类，它提供了一系列的API来操作J
阅读更多...
SpringBoot多数据源配置完整指南

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据
阅读更多...
将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2