ACwing学习——JavaScript(2)

38 阅读2分钟

本文参与4月更文挑战,打卡day15,第十五篇

3. 输入与输出

输入
  • 从HTML与用户的交互中输入信息,例如通过inputtextarea等标签获取用户的键盘输入,通过clickhover等事件获取用户的鼠标输入。
  • 通过AjaxWebSocket从服务器端获取输入
  • 标准输入,参考AcWing 1. A + B

一般引入js文件将引入放在html文件最下面,因为页面从上往下渲染,如果js放在上面html后面的部分还没有渲染出来有可能会报错。

输出
  • 调试用console.log(可以格式化输出),会将信息输出到浏览器控制台
  • 改变当前页面的HTML与CSS
  • 通过Ajax与WebSocket将结果返回到服务器4
// 表示当点击run的时候,触发一个点击事件,并执行function()这个函数。
// .addEventListener(){}是一个函数,有两个参数,其中:
// "click"位置必须是一个字符串,表示绑定的是哪一种事件;第二个参数是一个函数表示在处罚第一个参数位置的事件时要执行的函数
	run.addEventListener("click", function(){
        
    })


// textarea有一个属性:.value,下面这一行就表示获取当前textarea里的值
let s = input.value;

// .innerHTML表示当前标签里的html内容
格式化字符串
  • 字符串中填入数值:

`` 用的是esc下面的键,这一对符号里也可以书写字符串

  • 定义多行字符串:

image.png

  • 保留两位小数如何输出
let x = 1.234567;
let s = `${x.toFixed(2)}`;


let x = 1.234567;
let y = x.toFixed(4);   // 这一步括号里写几就保留几位小数 .toFixed()是一个保留小数的函数
console.log(y);         // 1.2345
  • 一个小例子

这段js代码表示的是:

第三行:返回第一个满足要求的标签,即返回class名为input的html标签,并将其内容赋值给input

第四行:返回button标签,将其内容赋值给run

第五行:返回pre标签,将其内容赋值给output

第七行:创建一个名为main的函数

第八行:名为main的函数的内容,对run的值进行一个事件绑定,当点击run的时候,就执行function()函数的内容

第九行:function()函数的内容,定义一个新的变量s,把input的内容赋值给s

第十行:function()函数的内容,将s的值赋值给output的html内容

第十四行:写export控制能够在html文件中被访问到的内容

第十五行:表示main函数可以在html文件中被访问到