现在的位置: 首页 > 综合 > 正文

wed前端开发JS中常见的事件类型

2019年11月15日 综合 ⁄ 共 4034字 ⁄ 字号 评论关闭

  昨天我们开始学了JavaScript了,

  让我们今天继续来学习 JavaScript变量和常量(重点)吧 。

  一起努力吧!加油啊!!

  小常说一下:

  比你差的人还没放弃,比你好的人仍在努力, 你就更没资格说,你无能为力。无论有多困难,都坚强地抬头挺胸,告诉所有人,你并非他们想象的那样不堪一击。这是你的人生,你必须为之奋斗。为你认为对的事情奋斗,为那些对于你来说重要的东西而奋斗,为爱你的人和你爱的人而奋斗

  变量类型

  首先说变量,从字面上理解就是可以变化的量,放到编程语言里面,就是可以被赋值改变的量。和变量对应的就是常量,我们经常遇到的比如,10,20这样的不能改变的数字,就是常量,一个确定的值。不能被赋值也不能被改变。

  在JS中我们把变量分为了多种类型。

  var a = 1024;

  alert(typeof a);

  var a = 'cos';

  alert(typeof a);

  var a = true;

  alert(typeof a);

  var a = function (){ alert('cos'); }

  alert(typeof a);

  var a = document;

  alert(typeof a);

  typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。它返回值是一个字符串,该字符串说明运算数的类型。

  我们可以通过typeof返回变量类型,那么上面的例子的输出结果,依次为:number(数值),string(字符串),boolean(布尔),function(函数),object(对象)。在这5中基础数据类型之外,JS还存在一种叫undefined的类型,一般存在于如下两种情况:

  alert(typeof b);

  变量b没有进行过定义,所以JS返回的数值类型为undefined(未定义的)。

  var b;

  alert(typeof b);

  这时,虽然我们定义了变量b,但在JS里,变量的类型只取决于变量内存的值,而变量b内没有值,因此它的数据类型依然是undefined。

  JS没有限制变量的数据类型,显得更加灵活,但如果一个变量不停地更改类型,会显得非常的混乱。所以同一个变量,最好只存放一种类型的数据。

  三,变量类型的转换

  变量不仅有类型,而且可以进行类型之间的转换。如果某个数据的类型不符合我们的需求,那么就需要用到数据类型的转换。我们一起举个‘栗子’:

  在网页中添加两个文本框和一个按钮,并希望点击按钮后文本框中的数字可以相加。这个功能看起来很简单,如果直接写的话,因为textbox中value的属性是以字符串形式返回给JS的,这就导致输入的两个数字最后会被当做字符串相加而不是数值。这时候,我们就需要将字符串转换为数字。

  将字符串转化为数字的方法为parseInt()。

  这是关于parseInt()的一个例子:

  var a = ‘1024’; alert(parseInt(a)+1);

  这里我们将a定义为了字符串,但是通过parseInt转化后得到了数值类型的数据,所以输出结果为1025。需要注意的是,parseInt是从左到右依次扫描字符串,一旦发现不是数字的字符,就立即停止工作,并将前面的字符通过数值类型返回,所以下面三种情况的返回结果依次为1024,

  1024,NaN: var a = '1024px'; var b = '1024px24'; var c = 'abc'; alert(parseInt(a)); alert(parseInt(b)); alert(parseInt(c));

  这里的 NaN 是Not a Number的简写,简言之就是JS解析不出数字时会返回这个结果。

  所以,我们这个案例可以通过如下代码完成:

  

  

  

  

  

  

  这里有一个问题,我们并没有对文本框进行任何限制,当用户向文本框输入的是字母而不是数字的时候,程序是不能正常执行的。所以,这时候需要判断一下对文本框输入值通过 parseInt 方法转换出来的结果是不是 NaN,如果是NaN,就说明用户输入某个值或者这两个值不是数字,此时需要返回给用户一个提示。

  那么问题来了,在JS里,NaN十分的奇葩:

  var a=parseInt(‘abc’);

  var b=parseInt(‘def’);

  alert(a==b);

  此时,a和b的值都是NaN,但这个程序的执行结果居然是false,这告诉我们在JS里NaN和NaN是不相等的。换言之,判断结果是不是NaN,不能通过==进行比较。好在天无绝人之路,JS提供了一个函数:isNaN(),用于检测一个变量是否为NaN。

  现在我们来看:

  输入字母的时候效果如下:

  通过 if 进行判断,如果用户有输入的不是数字,则弹出与之对应的错误提示框;如果输入的两个值都没有错误,将会弹出正确答案。

  那么使用parseInt转换小数,会怎么样呢?

  var a='3.5';

  alert(parseInt(a));

  输出结果为3。对于parseInt而言,转换出来的数字如果是小数,就会舍去小数部分,只保留整数部分。

  如果我们需要用到小数的话,请使用parseInt的兄弟——parseFloat,这两者在使用方法上没有任何区别,你照猫画虎的试试看。当你不知道转换出来的数值是整数还是小数的时候,请优先选择使用parseFloat,此时即便转换前的变量为整数也不会出现数值缺损。

  在我们刚才所讲的类型转换中,明确地告知了计算机我们想要对数据类型进行转换,我们将这种方法称为显式类型转换(也可以理解为:强制转换)。同样,还有一种转换类型的方式被我们称为隐式类型转换。隐式类型转换最简单的例子如下:

  var a=5;

  var b='5';

  alert(a==b);

  理论上来讲的话,二者数据类型不相同,输出结果应该为flase。但是浏览器给出的答案是true。请和下面的例子做一个对比:

  var a=5;

  var b='5';

  alert(a===b);

  此时,返回的答案变成了false。那么问题来了,和=二者之间存在什么区别呢?

  对于运算符来说,它在比较之前会先把二者的数据类型转换为一致;而 === 运算符(全等运算符)不转换类型,直接比较。在不转换类型的情况下,a和b肯定是不相等。由此可知,在比较ab时,并没有明确告知计算机我们想要对a或b的类型进行转换,但是计算机自己却偷偷进行了转换,这就是我们所讲的隐式类型转换。除开该例子之外,还存在另一种隐式转换的情况:

  var a='12';

  var b='5';

  alert(a-b);

  如果这里是a+b,计算机就会默认是字符串相加(拼接)而弹出125。但是如果是a-b的话,计算机会在做减法之前进行隐式转换成数值类型,我们就得到答案7。

  为什么加法不会进行隐式转换而减法会?因为在JS中+运算符本身具备字符串拼接和数字相加这两个功能,如果+识别为字符串拼接,一步即可完成计算,直接拼接即可;但是如果识别为数字相加,就需要两步才可以完成计算,即:先转换类型,再相加。对于计算机而言,一定会选择步骤更少的路径,所以说加法不会进行隐式转换。而在JS中,-运算符只有数字相减的功能,此时JS不得不进行隐式转换。

  四,变量作用域

  变量作用域指的是变量可以起作用的范围。

  function aaa(){

  var a=12;

  }

  function bbb(){

  alert(a);

  }

  aaa();

  bbb();

  运行这个程序,在bbb函数内会出现变量a没有被定义的报错。事实上,a确实没有被定义,因为在aaa中定义的a是局部变量,而局部变量,只能在定义它的函数里面使用。和局部变量相对的一个概念是全局变量。

  var a;

  function aaa(){

  a=12;

  }

  function bbb(){

  alert(a);

  }

  aaa();

  bbb();

  这个例题当中的a被声明在所有函数的外面,这样的变量是全局变量,可以在任何地方使用,所以能够正常弹出12。

  多行注释:/* */

  变量和常量(重点)

  1、什么是变量

  问题:向银行存1000元钱,每年利率5%,求10年后的本息是多少钱?

  内存:保存计算机程序在运行过程中所需要用到的数据(临时存储)

  变量:内存中的一段存储空间,目的是为了临时的保存数据。

  值:保存在变量(内存空间)中的数据

  变量名:内存空间的别名,可以自定义

  2、变量的声明

  到内存中申请一段空间保存数据

  1、语法

  1、声明变量

  var 变量名;

  2、为变量赋值

  变量名=值;

  注意:

  声明时可以省略var关键字,省略之后变量就成了"全局变量",推荐不要省略var关键字

  ex:声明一个变量叫 age,保存数据 18

  var age;

  age=18;

  3、声明变量并直接赋值

  var 变量名=值;

  ex: var age=18;

  4、在一条语句中声明多个变量

  声明变量age1的值为18,age2的值为36,age3的值为50

  var age1=18;

  var age2=36;

  var age3=50;

  语法:

  var 变量名1,变量名2=值,…;

  ex:

  var age1=18,age2,age3=50;

  2、变量名命名规范

  1、不允许使用JS关键字及保留关键字

  2、可以包含字母、数字、下划线(_)以及$

  var %name;//错误,不允许出现%

  3、变量名不能以数字开头

  var 1=2; //错误,不能以数字开始

  var 1name;//错误

  4、变量名最好见名知意

  var a,b,c,d,e,f,g;

  var aa,ab,ac;

  //以上方式不推荐

  var stuName,stuAge;

  var xymc;

抱歉!评论已关闭.