分类标签归档:JS

JavaScript Onclick 事件


JavaScript中的onclick事件允许您作为程序员在单击元素时执行函数。

<button onclick="myFunction()">Click me</button>

 <script>
  function myFunction() {
    alert('Button was clicked!');
  }
 </script>

在上面的简单示例中,当用户单击按钮时,他们将在浏览器中看到显示Button was clicked!的警报Button was clicked!

动...

阅读全文...

JavaScript Onload事件


onload事件用于在加载页面后立即执行JavaScript函数。

例:

<body onload="myFunction()">

 <script>
  function myFunction() {
    alert('Page finished loading');
  }
 </script>

在上面的示例中,只要加载了网页,就会调用myFunction函数,向用户显示Page finished loading警报。

onload事件最常用于<body>元素中以执行脚本。如果它附加到<...

阅读全文...

JavaScript 输出


您可以通过控制台输出数据的最常用方法有4种。这些将在您的开发过程的大部分时间使用。

console.log

它是输出数据的最常用和最常用的方式。通常的做法是在语句之​​间插入其中的几个来理解数据的流动和处理方式。此外,您可以在devtools中使用debugger或断点来执行相同操作,而不会污染您的代码。

var numbers  = [ 1, 2, 3, 4, 5, 6, 7];
 numbers.forEach(function(number){
  console.log(number + ' is divisible by 2', number%2 == 0);
...

阅读全文...

JavaScript Promises


JavaScript是单线程的,这意味着两个脚本不能同时运行;他们必须一个接一个地跑。 Promise是一个对象,表示异步操作的最终完成(或失败)及其结果值。

var promise = new Promise(function(resolve, reject) {
  // do thing, then…

  if (/* everything worked */) {
    resolve("See, it worked!");
  }
  else {
    reject(Error("It broke"));
  }
 });

承诺...

阅读全文...

JavaScript Prototypes原型


JavaScript是一种基于原型的语言,因此理解原型对象是JavaScript从业者需要知道的最重要的概念之一。本文将通过各种示例简要概述Prototype对象。在阅读本文之前,您需要对JavaScriptthis引用有一个基本的了解。

原型对象

为清楚起见,我们来看一下以下示例:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
 }

当声明Point2D函数时,将为它创建一个名为prototype的默认属性(请注意,在JavaScript中,函数也是一个对象)。 prototype属性是一个包含constructor属性的对...

阅读全文...

JavaScript Random随机方法


JavaScript Math.random()方法是一种出色的内置方法,用于生成随机数。执行Math.random() ,它返回一个随机数,该数字可以介于0和1之间。包括0,排除1。

生成0到1之间的随机浮点数

Math.random()方法将返回一个大于或等于0且小于(但绝不等于)1的浮点(十进制)数。换句话说, 0 <= x < 1 。例如:

console.log(Math.random());
 // 0.7069207248635578

 console.log(Math.random());
 // 0.765046694794209

 console.lo...

阅读全文...

JavaScript正则表达式参考


在JavaScript中,正则表达式是用于匹配字符串的所需部分的简写。在尝试操作或验证代码中使用的字符串时,这些都很有用。

句法

正则表达式由两部分组成 - patternflags (可选)。模式在两个正斜杠之间写入,后跟可选标志: var exp = /pattern/flags

模式

使用字母数字(AZ,az,0-9)字符可以直接匹配。然而,正则表达式的真正力量来自于字符类。

比方说,例如,您希望所有地方都有一个数字从0到9的字符串。您可以使用/\d/的特殊字符类,而不是显式调用/[0-9]/ /\d/ 。反斜杠会转义d字符(因此与字母d不匹配),而是使用\d的特殊匹配功能。...

阅读全文...

JavaScript Rest多参数


在ES6中,其余的参数语法...允许您将无限数量的参数收集到数组中。

尽管它们看起来相同,但它与扩展运算符相反,后者从迭代中获取每个项目并将它们分散到各自的值中。

句法

function myFunc(...args) {
  console.log(args);
 }

 myFunc( 1, 2, 3, 4, 5);       // [1,2,3,4,5]

你可以在它前面加上函数的最后一个参数与...当你想要做的初始paramters的东西,然后把所有剩下的参数不同。

function convertCurrency(rate, fee, ...amounts) {
  retu...

阅读全文...

JavaScript return语句


在函数中调用 return 语句时,将停止执行此函数。如果指定,则将给定值返回给函数调用者。如果省略表达式,则返回undefined

return expression;

函数可以返回:

  • 原始值(字符串,数字,布尔值等)
  • 对象类型(数组,对象,函数等)

切勿在不使用括号的情况下在新行上返回某些内容。这是一个JavaScript怪癖,结果将是未定义的。尝试在多行返回时使用括号。

function foo() {
    return
      1;
 }

 function boo() {
    return (
      1
    );
 }

 foo(); --&...

阅读全文...

JavaScript 作用域


如果你已经用JavaScript编程了一段时间,那么毫无疑问你会遇到一个称为scope的概念。什么是scope ?你为什么要花时间学习它?

在程序员说话中, scope当前执行的上下文 。困惑?我们来看看以下代码:

var foo = 'Hi, I am foo!';

 var baz = function () {
  var bar = 'Hi, I am bar too!';
    console.log(foo);
 }

 baz(); // Hi, I am foo!
 console.log(bar); // ReferenceErro...

阅读全文...