第二章：变量运算符

一.认识变量

1.什么是变量

定义：变量通俗地讲就是可变的量。

2.变量的操作及作用

对变量的操作包括两大类：

1) 定义变量：使用关键字 var 来进行定义。

2) 读和写变量：读的时候直接写变量名即可，写的时候需要把变量名放到赋值符号=的左侧（右侧内容将会被写到左侧的变量当中）。

写个例子

<script type="text/javascript">
			//定义变量
			var name="张三";
			//提取变量并在页面输出
			document.write(name);
		</script>

上述代码可以看出如何定义变量并且在页面输出变量。

初学编程时，我们要建立一个“量化”的意识，那么什么是量化呢？我们来靠一个例子来展示一下。

丽丽去超市购物，买了5支水笔，每支3元；买了5个练习本，每个2元；她给售货员50元，并且有会员卡，会员卡可以打8折，请问售货员应该找给丽丽多少钱？

<script type="text/javascript">
			//定义水笔价格
			var shuibi = 5*3;
			//定义练习本价格
			var lianxiben = 5*2;
			//定义总价
			var zongjia = shuibi+lianxiben;
			//定义找回金额并运算
			var zhaohui = 50-zongjia*0.9;
			//页面输出，谨记，输出变量时不能加引号
			document.write(zhaohui);
		</script>

体会上边的代码，它把一件事情，拆解得非常细，一个步骤一个步骤，最后完成了任务。现实世界中的业务往往非常复杂，有的甚至需要几十甚至上百的步骤，到时候我们的大脑根本承受不了，学会量化，按照步骤来解决问题，才是“王道”。

3.变量名称

在定义变量的名称时有一些规则需要注意：

1) 变量名要做到见名知意，可以采用英文单词或拼音全称，取到下一个词时首字母要大写，例如：var chengJi=10;。

2) 变量名称的首字符必须是英文字母、下划线或美元符号中的一种,例如：var $fenShu=100,_renShu=5;。

3) 变量名中不能有空格。

4) 变量名要避开 JavaScript 中的保留字（if、else、function、switch、static、for 等）。

一定记牢，变量命名错误会导致全盘皆输。

4.变量定义和使用常见错误

1）n变量使用前未经声明
var m= n + 2;

2）m变量没有赋值
var m;
document.write(m);

3）重复声明变量
var n = 3;
var n = 4;

4)不符合命名规范
var 123 = 123;

变量问题口诀：1.先声明，2.后赋值，3.再使用（输出，参与运算）

二.变量的类型

1.JS的变量类型

在 js 中，通过 var 前缀来表示要定义一个变量，当我们给其赋值时变量的类型才最终确定下来，常用的类型如下：

1) undefined：当定义了变量而未赋值时，其类型是 undefined.

var x; alert(x);//将会弹出 undefined

2) null：空类型，类似于 undefined。

alert(null==undefined);

3) number：数值类型，含整数和浮点数（小数）。

var x=10;(整数)

var y=8.8;（浮点数）

4) String：字符串。（字符串必须用双引号）

var x=”Jim Green”;

var y=”Lucy”;

5) boolean：布尔。

var x=true;(正确)

var y=false;（错误）

6) Object：对象类型，可以 new。

var x = new Object(); x.Name=”Jim Green”;

x.Sex=”男”;

//……

alert(x.Name+”t”+x.Sex);

7) Date：日期。

var x = new Date();//创建一个日期对象(当前计算机上的日期和时间为基准)

document.write(x.toLocaleDateString());//write 方法用于向当前页面中写入内容

因为JS中变量类型是弱类型，我们需要判断变量对应的数据类型，这时候我们可以用typeof来获取变量中的数据类型

<script type="text/javascript">
			var n=12;
      //如果输出的内容同时有变量和字符串的时候要用加号连接
			document.write(typeof(n)+"</br>");
			var x=true;
			document.write(typeof(x)+"</br>");
			var s="张三";
			document.write(typeof(s));
		</script>

2.String转number

String(字符串)，是编程语言中，最常见的数据类型，每一个 html 元素的属性值都是 String 类型的（例如：input 中的 value,id,name 等的取值）。某些计算只有 number 才可以，因而将 String 类型的值，转变成 number 类型的值，就是一个非常普遍和重要的操作。JS提供了两种转化方法

1） parseInt：将字符串转为整(number)数。

2）parseFloat：将字符串转为浮点数(number)。

<script type="text/javascript">
			var n="123h5";
			var s=parseInt(n);
			document.write(s);
			//我们可以看出,结果为123
		</script>

<script type="text/javascript">
			var n="hallo world";
			var s=parseFloat(n);
			document.write(s);
			//我们可以看出，输出结果是NaN，意思是not a number(不是一个数)
		</script>

三.变量实战

1.点击按钮时输出

我们之前学习的都是直接向大家展示出来的但是网页中却不是这么简单，事件需要一个能触发的装置，也叫做功能块。看例题。

当点击按钮时，输出发射天宫2号的信息。

我们可以分析一下，这个事件解决需要一个按钮，当按钮被点击的时候，页面输出你下达的指令，分析知道他怎么实现了之后，那么火速实操。

<body>
	  <input type="button" value="点火" onclick="start()"/>
		<script type="text/javascript">
			  //点火功能块
			function start(){
				document.write("点火成功，即将发射");
			}
		</script>
	</body>

「基础」JavaScript基础学习第二章

知识点都在图片中详细的标注了出来，建议一步一步的写，注意，input要写在<script>的上面。

2.alert

大家有没有发现，在上边的两个任务中，当我们点击按钮时，的确输出了内容，但是我们页面的原始内容（按钮）却不见了，必须点击浏览器的后退按钮，才可以回到原始内容，有没有更好的处理方式呢？当然有，那就是咱们上一章已经接触过的 alert（消息框）。

那么我们来就上一题改一下。

<body>
	  <input type="button" value="点火" onclick="start()"/>
		<script type="text/javascript">
			  //点火功能块
			function start(){
				alert("点火成功，即将发射");
			}
		</script>
	</body>

我们可以看出只要把上一题中的document.write改为alert就可以实现输出内容时按钮却不会消失了。

3.交互

我们要先知道几个知识点：

1）文本框：上题也有说input中的type值决定了input的类型，例如，上题中当type等于button时，input是按钮，如果type的值是text时，input是文本框

2）document.getElementById(“xxxx”).value;这行代码的意思是获取id为xxxx文本框中的value属性

掌握之后，火速实操。

例题：从页面上的姓名文本框中，取出操作员输入的名字，在名字后后边追加三个字”你很棒”，并在界面显示出来。

<body>
		    <!-- 文本框 -->
	  <input type="text" id="textName"/>
	       <!-- 按钮 -->
	  <input type="button" value="测试" onclick="btn()"/>
		<script type="text/javascript">
			  //功能块
			function btn(){
				// 设置变量,并且获取Id为textName的文本框中的value属性的值
				var name = document.getElementById("textName").value;
				alert(name+"你真棒");
			}
		</script>
	</body>

在 JavaScript 代码中，单个的 = 不是等号，而是赋值号，它表示把 = 右侧的数据放到左侧的变量(容器)当中，它表示把 = 右侧的数据放到左侧的变量(容器)当中，它表示把 = 右侧的数据放到左侧的变量 (容器)当中。

JS的基本过程

输入处理输出

四.常用运算符

1.运算符的分类

运算符主要描述两件事情：

1) 有几个数字参与运算（大多数时是两个）。

2) 进行的是什么样的运算。

（1）JS算术运算符

顾名思义，进行数学运算，给定 y=5，下面的表格解释了这些算术运算符的应用方式。

（2）JS赋值运算符

赋值运算符用于给 JavaScript 变量赋值。给定 x=10 和 y=5，下面的表格解释了赋值运算符。

（3）比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面的表格解释了比较运算符：

（4）逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑关系。给定 x=6 以及 y=3，下表解释了逻辑运算符：

2.数学运算

了解了运算符之后，我们可以着手于用代码解决一点问题了，

例题1.定义一个天数，计算此天数对应的周数和剩余的天数。

我们拿到一个题目时，首先要做的事情是，把这个业务中需要量化的数据先找出来，通过阅读我们发现共有 3 个变量天数 ts、周数 zs 和剩余天数 syts。因为要进行计算，所以 ts、zs、syts 的类型都必须是数值型，再进一步应该为整数。

<script type="text/javascript">
			//定义天数，可以改成不同数字
			var ts = 30;
			//定义周数，但是结果存在小数
			var zs = ts/7;
			//转化为整数
			zs = parseInt(zs);
			//定义剩余天数
			var syts = ts%7;
			//输出，注意一点，字符串和变量之间要加加号
			alert("当前天数："+ts+",包含周数："+zs+",剩余天数："+syts);
		</script>

「基础」JavaScript基础学习第二章

答案就是这样的，也可以用document.write方法输出

例题2.小明去美国旅游，但宾馆中的温度是以华氏度的方式显示的，现在编写一个程序，输入一个华氏度，显示一个摄氏度出来。

分析：量化的数据是华氏度，类型为小数，根据公式进行处理，最后输出即可

公式是：摄氏度=5.0/9*（华氏度-32）

<script type="text/javascript">
			//定义一个温度，可以自己定义别的温度，
			//将温度转化出来就行。设置的变量名称也可以
			//取自己方便记得，但是要注意变量命名要规范
			var hsd = 88.98;
			//讲字符串转化为小数
			var hsd = parseFloat(hsd);
			//定义摄氏度通过公式转化
			var ssd = 5.0/9*(hsd-32);
			//输出
			alert("华氏度是："+hsd+"对应的摄氏度是："+ssd);
		</script>

「基础」JavaScript基础学习第二章

结果就是这样的

3.boolean（布尔）类型应用

布尔值上面也讲了，布尔值分为两种，true（真），false(假)，涉及到布尔的题大部分就是比大小，判断是否正确，下面来看例题。

例题1.学员李四这次考了 80 分，请输入学员张三的考试成绩，并判定张三的成绩是否比李四的成绩高。

分析：首先量化张三的考试分数 zscj 和 lscj 两个变量，均为数值型，而 jg 应为 boolean 型，请看下边的实现代码和运行效果如下：

<script type="text/javascript">
			//定义张三的成绩
			var zscj = 80;
			//定义李四成绩
			var lscj = 90;
			//定义jg，并判断是否正确，布尔类型
			var jg = zscj > lscj;
			//输出
			alert("张三的成绩是否比李四高？"+jg);
		</script>

「基础」JavaScript基础学习第二章

结果就是这样

例题2.某航空公司征召飞行员的条件是视力超过 1.6，身高在 160 厘米和 170 厘米之间，请编写代码模拟应征者是否符合飞行员的过程。

<script type="text/javascript">
			//设置应征者身高变量
			var sg = 165;
			//设置应征者视力变量
			var sl = 4.3;
			//设置身高条件   &&是并列关系
			var sgcj = 160<sg && sg<170;
			//设置视力条件
			var slcj = sl>1.6;
			//判断并输出
			alert("身高在160和170厘米之间？"+sgcj+"，视力超过1.6？"+slcj);
		</script>

「基础」JavaScript基础学习第二章

结果是这样的

例题3.输入一个年份判定，此年份是否是闰年。闰年的判定的规则是能被 4 整数，但不能被 100 整除，或者能被 400整除。

提示：能被4整除就是: 年份%4==0

<script type="text/javascript">
			//设置年份变量
			var nf=2077;
			//设置另一个变量去设置条件  
			              // &&是并且      ||是或者
			var nfo = nf%4==0 && nf%100!=0 || nf%400==0
			//输出
			alert(nf+"是否为闰年？"+nfo);
		</script>

「基础」JavaScript基础学习第二章

结果就是这样

常见的比较（关系）运算符有：>,>=,<,<=,!=（不等于）和==（等于）。这些运算符运算的结果都是 boolean 类型值。在 JavaScript 中，=表示赋值而==表示相等判定。

4.单数据输出

JS中一共有三种弹出框，分别为：

警告消息框alert：弹出个提示框「基础」JavaScript基础学习第二章

警告消息框alert

确认消息框confirm:弹出个确认框（确认，取消）「基础」JavaScript基础学习第二章

确认消息框confirm

提示消息框prompt:弹出个输入框（让你输入东西）「基础」JavaScript基础学习第二章

提示消息框prompt

例如创建一个提示消息框，输入数字，并输出。

<script type="text/javascript">
			//设置变量到提示消息框
			var num = prompt("请输入数字");
			//输出这个数字
			alert(num);
		</script>

「基础」JavaScript基础学习第二章

输入「基础」JavaScript基础学习第二章

输出

5.设置元素标签的内容

直接看题

在文本框中，输入书名，点击加入按钮，将输入的书名，加入到 “古典四大名著” 之中。

<body>
		图书名称：
		        <!-- 文本框 -->
		<input type="text" id="bookName"/>
		        <!-- 按钮 -->
		<input type="button" value="添加" onclick="add()"/><br/>
		古典四大名著：
		<!-- 盒子，这个是网页设计的知识点，不多讲 -->
		<div id="box">
	  <!-- 此处就是innerHTML的值 -->
		</div>
		<script type="text/javascript">
			//功能块
			function add(){
				//获取id为bookName的文本框的值
				var name = document.getElementById("bookName").value;
				//获取id为box的div
				var div = document.getElementById("box");
				//设置div内部的html值
				div.innerHTML+=name+"<br/>";
			}
		</script>
	</body>

「基础」JavaScript基础学习第二章

结果就是这样

这个题可以有些难以理解，具体步骤就是先设置好框架（文本框，按钮，盒子），JS代码就是先用代码获取文本框的值，再获取div的值，再将文本框中输入的值输出到div里。

第二章的知识就说完了。感谢支持。

点击展开全文

js获取div的值（js获取div的value值）

第二章：变量运算符

发表评论

js获取div的值（js获取div的value值）

第二章：变量运算符

相关推荐

关于劫持：JS劫持手法

飞利浦276e显示器评测（飞利浦276e8VJSB怎么样）

js压缩工具哪些好（推荐这15款压缩工具）

js压缩工具哪个好（实测好用且简单的9款工具）

js日期加一天的公式（js获取下一天的日期的方法）

jsp和servlet区别在哪（简述2者间的不同处）

发表评论