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。

相关文章

spring AMQP代码生成rabbitmq的exchange and queue教程

spring AMQP代码生成rabbitmq的exchange and queue教程

《springAMQP代码生成rabbitmq的exchangeandqueue教程》使用SpringAMQP代码直接创建RabbitMQexchange和queue,并确保绑定关系自动成立,简... 目录spring AMQP代码生成rabbitmq的exchange and 编程queue执行结果总结s
阅读更多...
Java调用Python脚本实现HelloWorld的示例详解

Java调用Python脚本实现HelloWorld的示例详解

《Java调用Python脚本实现HelloWorld的示例详解》作为程序员,我们经常会遇到需要在Java项目中调用Python脚本的场景,下面我们来看看如何从基础到进阶,一步步实现Java与Pyth... 目录一、环境准备二、基础调用：使用 Runtime.exec()2.1 实现步骤2.2 代码解析三、
阅读更多...
聊聊springboot中如何自定义消息转换器

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息
阅读更多...
Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.
阅读更多...
Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE（Server-Sent Events）1、简述SSE与其他技术的对
阅读更多...
Spring Security 前后端分离场景下的会话并发管理

Spring Security 前后端分离场景下的会话并发管理

《SpringSecurity前后端分离场景下的会话并发管理》本文介绍了在前后端分离架构下实现SpringSecurity会话并发管理的问题,传统Web开发中只需简单配置sessionManage... 目录背景分析传统 web 开发中的 sessionManagement 入口ConcurrentSess
阅读更多...
Java整合Protocol Buffers实现高效数据序列化实践

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro
阅读更多...
Java实现本地缓存的四种方法实现与对比

Java实现本地缓存的四种方法实现与对比

《Java实现本地缓存的四种方法实现与对比》本地缓存的优点就是速度非常快,没有网络消耗,本地缓存比如caffine,guavacache这些都是比较常用的,下面我们来看看这四种缓存的具体实现吧... 目录1、HashMap2、Guava Cache3、Caffeine4、Encache本地缓存比如 caff
阅读更多...
MyBatis-Plus 与 Spring Boot 集成原理实战示例

MyBatis-Plus 与 Spring Boot 集成原理实战示例

《MyBatis-Plus与SpringBoot集成原理实战示例》MyBatis-Plus通过自动配置与核心组件集成SpringBoot实现零配置,提供分页、逻辑删除等插件化功能,增强MyBa... 目录 一、MyBATis-Plus 简介 二、集成方式（Spring Boot）1. 引入依赖 三、核心机制
阅读更多...
Java高效实现Word转PDF的完整指南

Java高效实现Word转PDF的完整指南

《Java高效实现Word转PDF的完整指南》这篇文章主要为大家详细介绍了如何用Spire.DocforJava库实现Word到PDF文档的快速转换,并解析其转换选项的灵活配置技巧,希望对大家有所帮助... 目录方法一：三步实现核心功能方法二：高级选项配置性能优化建议方法补充ASPose 实现方案Libre
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2