一.认识变量
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、el、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;（浮点数8月的句子短句唯美）
4) string：字符串。（字符串必须用双引号）
var x=”jim green”;
var y=”lucy”;
5) boolean：布尔。
var x=true;(正确)
var y=fal;（错误）
6) object：对象类型，可以 new。
var x = new object(); x.name=”jim green”;
x.x=”男”;
//……
alert(x.name+”t”+x.x);
7) date：日期。
var x = new date();//创建一个日期对象(当前计算机上的日期和时间为基准)
document.wr大学期末考试ite(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） parint：将字符串转为整(number)数。
2）parfloat：将字符串转为浮点数(number)。
<script type="text/javascript">var n="123h5";var s=parint(n);document.write(s);//我们可以看出,结果为123</script><script type="text/javascript">var n="hallo world";var s=parfloat(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>知识点都在图片中详细的标注了出来，建议一步一步的写，注意，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）d社会工作考研ocument.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 = parint(zs);//定义剩余天数var syts = ts%7;//输出，注意一点，字符串和变量之间要加加号alert("当前天数："+ts+",包含周数："+zs+",剩余天数："+syts);</script>答案就是这样梦想启动的，也可以用document.write方法输出
例题2.小明去美国旅游，但宾馆中的温度是以华氏度的方式显示的，现在编写一个程序，输入一个 华氏度，显示一个摄氏度出来。
分析：量化的数据是华氏度，类型为小数，根据公式进行处理，最后输出即可
公式是：摄氏度=5.0/9*（华氏度-32）
<script type="text/javascript">//定义一个温度，可以自己定义别的温度，//将温度转化出来就行。设置的变量名称也可以//取自己方便记得，但是要注意变量命名要规范var hsd = 88.98;//讲字符串转化为小数var hsd = parfloat(hsd);//定义摄氏度通过公式转化var ssd = 5.0/9*(hsd-32);//输出alert("华氏度是："+hsd+"对应的摄氏度是："+ssd);</script>结果就是这样的
3.boolean（布尔）类型应用
布尔值上面也讲了，布尔值分为两种，true（真），fal(假)，涉及到布尔的题大部分就是比大小，判断是否正确，下面来看例题。
例题1.学员李四这次考了 80 分，请输入学员张三的考试成绩，并判定张三的成绩是否比李四的成绩 高。
分析：首先量化张三的考试分数 zscj 和 lscj 两个变量，均为数值型，而 jg 应为 boolean 型，请看 下边的实现代码和运行效果如下：
<script type="text/javascript">//定义张三的成绩var zscj = 80;//定义李四成绩var lscj = 90;//定义jg，并判断是否正确，布尔类型var jg = zscj > lscj;//输出alert("张三的成绩是否比李四高？"+jg);</script>结果就是这样
例题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>结果是这样的
例题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>结果就是这样
常见的比较（关系）运算符有：>,>=,<,<=,!=（不等于）和==（等于）。这些运算符运算的结果都是 boolean 类型值。在 javascript 中，=表示赋值而==表示相等判定。
4.单数据输出
js中一共有三种弹出框，分别为：
警告消息框alert：弹出个提示框
警告消息框alert
确认消息框confirm:弹出个确认框（确认，取消）
确认消息框confirm
提示消息框prompt:弹出个输入框（让你输入东西）
提示消息框prompt
例如创建一个提示消息框，输入数字，并输出。
<script type="text/javascript">//设置变量到提示消息框var num = prompt("请输入数字");//输出这个数字alert(num);</script>输入
输出
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的divvar div = document.getelementbyid("box");//设置div内部的html值div.innerhtml+=name+"<br/>";}</script></body>结果就是这样
这个题可以有些难以理解，具体步骤就是先设置好框架（文本框，按钮，盒子），js代码就是先用代码获取文本框的值，再获取div的值，再将文本框中输入的值输出到div里。
第二章的知识就说完了。感谢支持。
本文发布于:2023-04-05 08:09:27，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/89c86382752a5871ebfbb0acd21afffb.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：js获取div的值（js获取div的value值）.doc
本文 PDF 下载地址：js获取div的值（js获取div的value值）.pdf
| 留言与评论（共有 0 条评论） |
