html语言乘法口诀表,0044 使用JavaScript在网页上生成九九乘法口诀表
上节课主要讲解的是JavaScript代码的规范和格式。
这节课来具体讲解关于变量、数据类型和运算符的基础知识,然后利用这些知识在网页上显示一个九九乘法口诀表。
变量
变量是用来存储一个数据的容器。
JavaScript变量的定义规范是这样的:
var x=1;
var y;
var name='Michael';
在变量名前面用关键字var来进行定义。
定义变量名的同时可以对变量用赋值=进行设置初始值。
变量必须以字母开头;
变量能以$和_符号开头;
变量名称对大小写敏感(例如 x 和 X 是不同的变量)。
一个好的编程习惯,是在程序开始之处对需要用到的变量统一定义。
来做一个加法计算器,定义2个变量,然后将2个变量相加,结果赋值给一个新的变量,然后输出到控制台。
修改testjs.js文件如下:
var a=3;
var b=5;
var c=a+b;
console.log(a,'+',b,'=',c);
将新增的函数addValue替换到click按钮的onclick事件上。
修改testjs.html文件如下:
刷新网页,点击click按钮,然后打开网页调试工具,在console窗口可以看到输出结果。
这里的console.log的作用就是可以向浏览器调试工具输出log信息,这个方法对于调试JavaScript非常有用。
输出的结果不会显示到网页内容中,只会出现在浏览器的调试工具的console窗口中。
数据类型:数字、字符串、布尔和数组
变量可以存储不同的数据类型的值。
常见的数据类型有数字、字符串、布尔和数组。
JavaScript只有一种数字类型,可以带小数点也可以不带。
例如:
var a=35.00;
var a=35;
字符串是用来存储字符的变量类型。
例如:
var name='michael';
var name='jack';
可以使用单引号或者双引号,注意的是前后如果用单引号,则当中的内容里面不要有单引号。
布尔类型只有2个值:true和false。
例如:
var isnum=true;
var notme=false;
布尔类型用于条件判断语句中。
数组可以存储一组变量,并可以通过下标序号访问数组的元素。
例如:
var names=new Array();
names[0]='michael';
names[1]='jack';
names[2]='tom';
或者 var names=new Array('michael','jack','tom');
或者var names=['michael','jack','tom'];
数组的第一个元素的下标序号是从0开始的。
运算符
前面用到的+就是一个运算符,是一个算术运算符。
常用的运算符有3大类:算术运算符,赋值运算符,逻辑运算符,比较运算符。
常用的算术运算符有:
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
% 求余数运算符
算术运算法可以将2个变量进行算术计算得到一个新的值。
例如:
var x=9;
var y=6;
var z=x-y;
z的值就等于3。
例如:
var name1='michael';
var name2=' hello';
var name=name1+name2;
name的值就是'michael hello'。
数字和数字相加等于数字,字符串和字符串相加等于字符串。如果是数字和字符串相加则等于字符串。
常用的赋值运算符:
= 赋值运算符
符值运算符可以将数据赋予给一个变量。
逻辑运算符:
NOT 逻辑非运算符,使用!来运算
AND 逻辑与运算符,使用&&来运算
OR 逻辑或运算符,使用||来运算
逻辑运算符只能对布尔变量进行运算。
逻辑非运算符可以将布尔变量进行反向符值。
例如,var a=true; var b=!a; 则b的值是false。
逻辑与运算符,按照如下规则计算:
true && true 的结果是true
true && false 的结果是false
false && true 的结果是false
false && false 的结果是false
规则是只有2个都为真结果才为真。
逻辑或运算符,按照如下规则计算:
true || true 的结果是true
true || false 的结果是true
false || true 的结果是true
false || false 的结果是false
规则是只要1个为真则结果为真。
比较运算符用于比较,返回的结果是一个布尔数据类型的值。
常见的有以下:
== 等于
> 大于
<>
>= 大于等于
<=>=>
例如:
3==3 的值为 true
3==5 的值为 false
3>5 的值为false
5<9>9>
3>=3 的值为true
一般关系运算符用于条件判断语句中。
for循环
为了实现九九乘法口诀表,肯定要用到循环,否则一个一个去写的话要累死。
JavaScript里面的循环,同样有while循环和for循环,这里先来使用for循环。
for循环的语法是这样的:
for (语句1;语句2;语句3) {
循环执行代码
}
语句1会在循环开始前执行一次,一般用于设置初始条件。
语句2定义运行循环的条件,一般是一个比较运算的结果。
语句3在每次循环执行代码完成之后运行一次,一般用于改变循环条件的变量。
例如:
for (var i=0;i<3;i++)>3;i++)>
console.log(i);
}
它的运行次序是这样的:
首先定义变量i的值为0,然后进入循环体内部执行,在console输出0,然后运行i++,这样i的值变为1,然后判断是否i<><><><><><>
这样console就输出3次,输出结果从0到2。
console里输出乘法口诀表
假如要实现一个九九乘法口诀表,就需要第1排输出1*1=1,第2排输出1*2=2和2*2=4,这样统计下来,需要输出9行9列。
因此,可以先用2层for循环来实现在console里面输出乘法口诀表。
修改testjs.js代码如下:
刷新页面,点击click按钮。
可以看到console里面输出了乘法口诀表。
网页中显示九九乘法口诀表
要让乘法口诀表显示在网页中,需要利用到document.write语句了。
document.write语句可以用于在网页中输出新的网页元素内容。
先来增加一个div的样式吧,在head部分增加CSS样式:
修改testjs.html代码如下:
这个样式定义了div为一个圆角的长方形,底色为浅灰色,边框为单实现深灰色,文字字体为紫色,字体为20px和其它样式。
然后来在document里面用JavaScript代码输出一个div元素。
修改testjs.html代码如下:
刷新网页:
可以看到,网页中在document.write执行的地方出现了一个div元素了,它的样式是前面定义好的样式。
document.write方法可以向网页文档中输出指定的网页元素内容。
如果要显示多行的div,那么可以利用
来进行换行。
修改testjs.html代码如下:
可以看到第2行出现了,第2行显示了2个元素。
修改代码,利用2层for循环,输出九九乘法口诀表。
修改testjs.html代码如下:
刷新网页:
可以看到网页显示出了乘法口诀表。
学习方法不同了
可以感觉到,学哥现在对知识的讲法有所不同,由于有了前面2章的基础,尤其是学会了python语言的基础语法之后,再来学JavaScript,很多概念都是类似的,例如变量,数据类型,逻辑判断等等,所以学哥就会先把概念罗列出来,然后用更多的例子来进行练习,可以利用之前的基础,加快学习的速度。
html语言乘法口诀表,0044 使用JavaScript在网页上生成九九乘法口诀表相关推荐
- 用python生成九九乘法表的指令_Python中生成九九乘法表的方法有哪几种?
九九乘法表是我们计算的基础,在Python中可以生成九九乘法表.大致有三种方法:列表推导式法.for循环法.while嵌套循环法.具体使用代码请看本文. 方法一.列表推导式法for i in rang ...
- python web项目导出zip文件_通过javascript在网页端生成zip压缩包并下载
zip.js是什么 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载: 如何使用: 1:引用zip.js 2:引用jQuery ...
- 通过javascript在网页端生成zip压缩包并下载
通过javascript在网页端生成zip压缩包并下载 原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas ...
- JavaScript通过for循环实现九九乘法表的左下、左上、右上、右下对齐成直角三角形
九九乘法表共 9 行 9 列,以下通过JavaScript代码块的控制,来实现关于九九乘法表的左下.左上.右下.右上对齐形成三角形的效果. 注意:(1)掌握 for 循环及多层for循环的使用. ...
- python打乘法口诀表好记方法_使用Python打印九九乘法口诀表
在上一篇,我们讲到了print的各种用法,相信小伙伴们通过练习已经有所掌握.大家有看到过如下图所示的乘法口诀表吗? 是不是看起来非常整齐呢,这是怎么做到的呢~其实并不难,接下来我将介绍一下Python ...
- python乘法口诀代码-浅析一句python代码成生九九乘法表
print(' '.join([' '.join('%sx%s=%-2s'%(x,y,x*y) for x in range(1,y+1)) for y in range(1,10)])) 最近在os ...
- 【C语言】C程序设计:for语句循环嵌套实现打印九九乘法表
打印九九乘法表 程序如下: #include <stdio.h>int main(){int i,j;for(i=1;i<=9;i++){//行 for(j=1;j<=i;j+ ...
- python3九九乘法表儿歌_python3: 简单4步骤输出九九乘法表
如何输出一个九九乘法表,使用python语言,嵌套循环,4行代码就可以实现,瞬间感觉python真的很简单~ 代码: for i in range(1,10): for j in range(1,i+ ...
- python3九九乘法表儿歌下载_python3的基础学习之九九乘法表和format函数,值得收藏...
1. 九九乘法表 1.1 代码一 for i in range(1, 10): #range取值1,2,3,4,5,6,7,8,9:做i的值,到10停止,不取10 for j in range(1, ...
- python99乘法表while翻译_Python学习之while练习--九九乘法表
效果如下: 实现代码; m = 1 n = 1 while(m<10): while(n<=m): print(n,"*",m,"=",m*n,en ...
最新文章
- mysql下载地址与安装
- By.Xpath快速定位页面元素常用方法
- matlab第四章例题,第四章课后作业matlab验证
- ant vue 树形菜单横向显示_Vue--组件Ant- 树形结构菜单
- 信息系统项目管理师:论项目的质量管理
- exists sql用法_SQL关于IN和EXISTS的用法和区别,读完之后,大部分程序员收藏了....
- Linux Ubuntu 安装编译Opencv 3.4.3 C++开发环境
- 台式计算机装两条内存条开不了机,电脑插了两根内存条后开不了机是怎么回事?...
- plsql连接本地oracle数据库,而远程主机却无法连接,出现无监听程序的解决方法(转)
- sqlite迁移mysql(导入导出数据)
- (转)金丘股份CEO左鹏:用区块链做ABS,实现消费金融ABS创新
- openlayers2 开发如何判断一个marker所在的点是否在一个多边形内部
- matlab 带通滤波函数,MATLAB窗函数实现带通滤波器
- 台风怎么看内存颗粒_内存应该怎么选?看完你就知道了。影驰 星曜 DDR4-3000 8G 内存测评(RGB真的强)...
- 汇编语言简明教程习题答案
- 业务流程管理,你准备好了吗?
- Training!!!
- win11、10下安装eNSP最新版(1.3.00.200T)并完美运行(转载)
- 【实战】电商后台管理系统:路由封装基础布局
- 微信小程序如何设置背景图片