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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2