JS(JS介绍、变量、运算、数据类型)

论坛 期权论坛 脚本     
匿名技术用户   2020-12-23 17:50   108   0

目录
一、JavaScript基本介绍
二、JavaScript与HTML5的关系
三、如何编写运行JS
四、变量的概念及基本运算
五、变量命名规则和关键字的介绍
六、算术、赋值、关系运算符
七、数据类型的转换
八、NaN的概念和应用
九、八进制和十六进制


一、Javascript基本介绍

JavaScript 用来做人与浏览器之间的行为,是一种脚本语言。
静态网页就是没有行为的,动画并不是行为。行为例如表单、按钮、上传
JavaScript的组成:
 ECMAScript(标准)
  它规定了语法、类型、语句、关键字、保留子、操作符、对象。(相当于法律)
 BOM(浏览器对象模型)
  可以访问浏览器窗口的浏览器对象模型,对浏览器窗口进行操作
 DOM(文档对象类型)
  DOM把整个页面映射成一个多层节点结构。
  HTML页面组成都是某种类型的节点,这些节点又包含着不同类型的数据
JavaScript能用来做什么?
 页面分为:结构、表现、行为。JavaScript是行为部分

二、JavaScript与HTML5的关系

HTML5是一种新的技术,就目前而言,我们所知的HTML5都是一些标签。
但是有了js之后,这些标签的深层的拓展内容才能得以实现。
比如video标签,我们对其理解为一个简单的标签。
但实际上,video标签还有更深层次的拓展内容
html写在html文件内,css写在css文件内,js写在js文件内。
css在html文件内:<style type="text/css"></style>
JS写在html文件内:<script type="text/javascript"></script>
可以写在html文件内的任何位置  不要再js文件内 写关于css的style标签

三、如何编写运行JS

JS也是一种脚本语言,有两种方式在HTML页面进行引入,一种是外联,一种是内部。
外联js的写法:
<script src="" type="text/javascript" charset="utf-8"></script>
内部js的写法:
<script type="text/javascript"></script>
错误的写法:
<script src=""></script>  //不可以在外联方法内些js脚本,外联方式只能用作调用

alert("hello world")
向页面中打印内容,用来停止浏览器加载代码,弹出一个对话框,内容显示在对话框中。
这个功能一般用来做测试。某一段代码是否出现bug。
浏览器解析代码的顺序(从上到下,从左到右)

document.write("hello world")
向页面中打印内容,内容显示在页面中。

document可以直接解析标签:
document.write("<b>加粗的内容</b>")

转义字符:
&lt; <
&gt;>
document.write("&lt;b&gt;加粗的内容</b>")

四、变量的概念及基本运算

如何创建一个变量
 关键字  变量名="赋值"
 var tom="猫"
 var a="<b>加粗的内容</b>"
 var是一个关键字,用来声明一个变量
 =表示赋值(取名字)
声明变量以“=”为区分,左边为变量名(被赋值),右边为存放进变量中的内容

var 声明变量的底层原理:我们所写的程序运行在内存中,当我们使用关键字var声明一个变量的时候,计算机会从内存中划分一个空间,为我们存放的不同类型的内容做准备。

变量的类型(数据类型)
字符型: string;“ ”‘  ’ (被单引号和双引号,包裹的部分,引号必须配套使用)
数字型: number; 0-9
布尔型: boolean:true和false(真假)
未定义型:undefined:这是一个特殊类型,当变量被声明,但是没有被赋值的时候
对象型:object  在{ }里的就是对象类型
数组型:array  在[ ]里的就是数组类型

如何区分或得知不同的数据类型;通过关键字 typeof

五、变量命名规则和关键字的介绍

变量的名字就像人的名字一样,不能乱起。
我们能从名字中读出很多含义,是因为我们的语言常识
同样,变量也有一套类似的常识标准,代表了各种含义,如下:
 字符型:前缀 s  类型String      浮点数:前缀 f  类型Float
 数字型:前缀 n  类型Number      函数:前缀 fn   类型Function
 布尔型:前缀 b  类型Boolean      整数:前缀 i   类型 Integer
 未定义型:前缀 u  类型Undefined    正则表达式:前缀 re  类型RegExp
 对象型:前缀 o  类型Object
 数组型:前缀 a  类型Array
前缀就能表示出这个变量的类型
开头必须为字母或者$或者_  typeof不能做为变量名
关键字和保留字不能用做变量名。

关键字和保留字不能用做变量名


六、算术、赋值、关系运算符

算术运算符:+加法 -减法 *乘法 /除法 %取余
var a=10,b=3;
 a+b=13;
 a-b=7;
 a*b=30;
 a/b=3.333;
 a%b=1;
目测,跟数学中的运算符是一样的。但是:
var a=10,b="3";
 a+b=103;
 (此处的103不是数值而是字符;"="起到了隐式转换的作用,将a从数值型转换为字符型)
 (+两边只要有一方是字符,+的功能就变成了字符串链接)
 a-b=7;a*b=30;a/b=3.333;a%b=1;
 (在(-,*,/,%)这些运算符时,"="也会起到隐式转换的作用
 将字符转换为数值,"="就是正常的运算作用)
总结: +号,有两层意思,第一层算数之间的加法;第二层字符串的连接
执行过程中,先检测加号两边的数据类型,如果发现字符型,那就先生效字符的连接

没有定义 not defined,表示没有声明这个变量;
未定义 undefined,表示声明了变量但是没有赋值。
两个含义不一样。

赋值运算符:=    +=    -+    *=    /+    %=
 +=:
 var a=10;
 a += 10;
 console.log(a)
 
 -=:
 var a=10;
 a -= 5;
 console.log(a)
 自增自减运算:++  --
  a++表示在a原有的基础上增加1;a--表示在a原有的基础上减小1;
  var a = 1;
  alret(a);
  
  那么,++a和--a呢?和上面的道理是同样的。
  但是,区别在哪呢?看下面。
  var b = 1;
  alert(b++);在这一步 显示出来的按道理应该是2,但是显示出来的是1;
  alert(b);在这一步,再输出一次 b ,才会显示出来 2。
  
  var c = 1;
  alert(++c);在这一步直接就显示出来2
  区别一目了然了。
  
  原因在:++c属于前自增;b++属于后自增;
  前自增与后自增有本质的区别,他们相同点都是为本身加了1,不同点是
  前自增是先加1,再使用操作数。
  后自增是先使用操作数,再加1.
  前自减和后自减道理同上。
关系运算符:<    <=    >     >=    ==    !=    ===
 var a=10;
 var b=20;
 console.log(a>b)//输出的结果就是false
 console.log(a<b)//输出的结果就是true
 console.log(a=b)//输出的结果就是20,因为"="是赋值的意思,所以a被赋值了。
 console.log(a == b)//现在就正常了,输出的结果是false。"=="是等于的意思。
 console.log(a != b)//输出的结果是,true。
 var a="10"
 var b=10;
 conlose.log(a == b)//输出的结果是true,因为都是10,虽然是不同类型的
 conlose.log(a === b)//输出的结果是false;
 "=="与"==="的不同点是:
 "==" 是只比较数值是否相同。
 "==="也是比较数值是否相同,但是多了一个步骤,比较是否为相同类型.

 var a="20";
 var b="19";
 conlose.log(a>b)
 //输出的结果是true,此处并没有发生类型转换,只是字符有属于它们的一套比较方式。
 var a="20";
 var b="190";
 conlose.log(a>b)
 //输出的结果是true,这里用到了 字符的逐位比较,得到结果,停止比较。 因为2>1。

 var a="a";//前面的a为变量,后面的a为赋值。
 var b="b";
 conlose.log(a>b)
 //输出的结果是false,字母的比较,用的是ASCII编码格式进行比较

这里写图片描述

逻辑运算符:||(或)  &&(与)  !(非)
 ||(或):只要有一边为真,就为真。两边都为假,才为假。
 conlose.log(true||flase);//输出的结果是true
 &&(与):只要有一边为假,就为假。两边都为真,才为真。
 conlose.log(true&&false);//输出的结果是假。
 !(非):相反。非真为假,非假为真。
 var a=10;
 var b=20;
 var c=30;
 var d=40;
 conlose.log(a<b||c>d);//输出的结果是真
 conlose.log(a<b&&c>d);//输出的结果是假

七、数据类型的转换

数值转字符:
 var a=10;
 conlose.log(a);//输出的结果是10;
 conlose.log(typeof a);输出的结果是 number
 conlose.log(a.toString()); 输出的结果是10;不过这次是字符
 conlose.log(typeof a.toString()); 输出的结果是string
 
字符转数值:
 var a="10";
 conlose.log(parseInt(a));//输出的结果是10,这里是数值
 conlose.log(typeof parseInt(a));//输出的结果是 number;
 
 var b="123.456"
 conlose.log(parseInt(a));//输出的结果是123,parseInt转换为整数
 conlose.log(pareFloat(a));//输出的结果是123.456,parseFloat转换为浮点型。
 
 var c="123.4a56"
 conlose.log(parseInt(c));//输出的结果是123
   parseInt从左向右检测到第一个非数值的字符(包括".")停止,返回前面的数字
 conlose.log(parseFloat(c));//输出的结果是123.4
   parseFloat从左向右检测到第一个非数值的字符(不包括".")停止,返回前面的数字
 
 var d="hello world"
 conlose.log(d);//输出的结果是hello world
 conlose.log(parseInt(d));//输出的结果是 NaN
 conlose.log(parseFloat(d));//输出的结果是 NaN
 如果要转换的字符串的第一个字符就不是数字,那么会得到NaN
 
 强制数据类型转换:
   数字转字符:
   num.toString();
   字符转数字:
   parseInt从左向右检测到第一个非数值的字符(包括".")停止,返回前面的数字
   parseFloat从左向右检测到第一个非数值的字符(不包括".")停止,返回前面的数字
   console.log( Number());强制转换为数值,转换规则更严格,字符必须完全是数字
   
 隐式数据类型转换:算术运算符中
 
 四舍五入:Math.round
 var num="1234.56789"
 conlose.log(Math.round(num));//输出的结果是1235;
 
 保留小数:toFixed
 var num=123.456789;
 conlose.log(num.toFixed(2));//输出的结果是123.46

八、NaN的概念和应用

NaN 全称 not a number , 它不是一个数值,但是它占着数值型的类型。
它是 特殊的,不是一个数字的数值型, 自身budengyu自身。
conlose.log(NaN==NaN);//输出的结果是 flase; 
非法的数值运算,会得到NaN
应用:当你做一个类型转换的时候,你并不确定它是否是NaN。
 isNaN();
 is not a number;
 是不是 不是 一个数字
 conlose.log(isNaN(NaN));//输出的结果是true
 conlose.log(isNaN(123));//输出的结果是false
 conlose.log(isNaN(parseInt("123")));
 //如果输出的结果是false,那么说明parseInt转换的字符123,能成功转换为数值。
 如果输出的结果是true,那么说明parseInt转换的字符123,没有成功转换为数值。

九、八进制和十六进制

二进制:0-1,用二进制表示5(101)
八进制:0-7,用八进制表示10(12)
十进制:0-9,用十进制表示20(20)
十六进制:0123456789ABCDEF,用十六进制表示25(19)
conlose.log(0.1+0.6);//输出的结果是0.7
conlose.log(0.1+0.7);//输出的结果按道理是0.8,但是计算机中输出的是0.79999···
conlose.log(0.2+0.6);//输出的结果是0.8;
电脑在运算过程中以正确的二进制浮点进行运算,但是我们输入的都是十进制数,这两者并不是能转化的那么准确,有时会得到准确的结果,但有时就没这么幸运。
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP