Star Calculator

JS杂食-06--小实作-1: Star Calculator

tags: ithome

用HTML+纯JS试作一表单,规格:

  1. 两个输入框
  2. 一个提交按钮
  3. 点击按钮时显示:输入的两个数字总和

参考资料1:MDN — the Mozilla Developer Network


前置作业

  1. 基本HTML, CSS知识

  2. 新增一资料夹至少包含以下三种档案:index.html、style.css、main.js 到对应资料夹结构中,我想放到背景的照片也放入images资料夹中

images
|--nasa.jpg
scripts
|--main.js
styles
|--style.css
index.html

撰写HTML

  1. 数字需要透过输入框写入,而输入框需要包覆在<form>tag之中;依序在<body>中填入<form>、2个<input>後,给予对应#id以便JS操作,这边的<form> id命名为starCalculator,而2个<input>框id则分别命名为starNumber1starNumber2

  2. 引入JS档案,放在</body>前,以避免HTML画面还没读完JS就先运作,我们需要的顺序总是HTML+CSS > JS

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
  
  <script src="scripts/main.js"></script>
</body>

脚本载入策略(Script loading strategies)
若需要将内部JavaScript<script> 或外部JavaScript放在HTML的


<<:  资安这条路 27 - [服务器软件]Web 应用服务器-Tomcat、Weblogic、Websphere、Jboss

>>:  Chat & SignalR (Ionic)

近似最短路径 (4)

11.4 Thorup-Zwick 的 Approximate Distance Oracle 什麽...

冒险村11 - frozen_string_literal

11 - frozen_string_literal 延续 Begin from linter : ...

【PHP Telegram Bot】Day13 - 基础(2):数学运算与乱数

$x = 3 + 2 * 8 - 2 ** 3; echo $x; // 11 在程序里最常做的事...

Day23 [实作] 一对一视讯通话(3): Client

昨天我们把 Signaling server 完成了,今天我们要继续完成 Client 端: 细部分...

使用 XmlPullParser (二)

上篇我们讲了 parser 的基本使用方式和一些前置的 function 实作,像是 parseCh...