知乐空间

js获取div的值

第二章:变量运算符

一.认识变量

1.什么是变量

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

2.变量的操作及作用

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

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

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

写个例子

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

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

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

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

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来获取变量中的数据类型

2.String转number

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

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

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

三.变量实战

1.点击按钮时输出

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

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

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


	  
		
	

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

知识点都在图片中详细的标注了出来,建议一步一步的写,注意,input要写在

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

3.交互

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

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

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

掌握之后,火速实操。

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


		    
	  
	       
	  
		
	

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

JS的基本过程

输入 处理 输出

四.常用运算符

1.运算符的分类

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

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

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

(1)JS算术运算符

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

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

(2)JS赋值运算符

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

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

(3)比较运算符

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

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

(4)逻辑运算符

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

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

2.数学运算

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

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

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

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

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

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

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

公式是:摄氏度=5.0/9*(华氏度-32)

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

结果就是这样的

3.boolean(布尔)类型应用

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

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

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

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

结果就是这样

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

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

结果是这样的

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

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

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

结果就是这样

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

4.单数据输出

JS中一共有三种弹出框,分别为:

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

警告消息框alert

确认消息框confirm:弹出个确认框(确认,取消)「基础」JavaScript基础学习第二章

确认消息框confirm

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

提示消息框prompt

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

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

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

输出

5.设置元素标签的内容

直接看题

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


		图书名称:
		        
		
		        
		
古典四大名著:

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

结果就是这样

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 ZLME@ZLME.COM 举报,一经查实,立刻删除。

留言与评论(共有 0 条评论)
验证码: