Javascript基础（一）简单介绍、数据类型、操作符

Netscape在最初将其脚本语言命名为LiveScript，后来与Sun合作之后将其改名为Javascript，js最初受java启发而开始设计的，目的之一就是“看上去像Java”。因此语法上有类似之处，一些名称喝命名规范也借鉴Java，javascript与java只是名称像而已，实际并没有关系

Java是运行在服务器端的编程语言
JavaScript是运行在客户端（即浏览器）的编程语言

JavaScript是一种运行在客户端的脚本语言

js的解释器被称为Java script引擎（把js的语句转换成机器能识别的机器语言），为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，即用来给HTML网页增加动态功能。

Javascript最初目的

是为了处理表单的验证操作，即直接在浏览器上验证，而不用提交到服务器。

Javascript现在的意义（应用场景）

JavaScript发展到现在几乎无所不能

网页特效
服务器开发（Node.js）
命令行工具（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

JS和HTML、CSS的区别

HTML：提供网页的结构，提供网页中的内容
CSS：用来美化网页
Javascript：可以用来控制网页内容，给网页增加动态的效果

Javascript的组成

由ECMAScript（核心）、DOM、BOM组成

ECMScript-----Javascript的核心

ECMA欧洲计算机制造联合会，定义了JavaScript的语法规范，Javascript的核心描述了语言的基本语法和数据类型，ECMASript是一套标准，定义了一种语言的标准，与具体实现无关。

BOM---浏览器对象模型

一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如:弹出框、控制浏览器跳转、获取分辨率等

DOM---文档对象模型

一套操作页面元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

Javascript初体验

我们知道，将CSS引入HTML中有三种方式，分别为行内样式、嵌入样式和外部样式

其实将js引入HTML也有这三种方式，格式分别为

写在行内：

<input type="buttom" value="按钮"  onclik="alert('hello world!')" >
//alert指在页面中弹出一个对话框

写在script标签中

<head>
    <script>
        alert('hello world!');    //建议字符都用单引号，而不用双引号，避免冲突
 //alert用于弹出对话框，还可以用控制台输出语句，但形式不是弹出对话框，格式为 console.log(n1);
    </script>
</head>

引入外部文件js

<head>
    <script  src="index.js"></script> //src指引入的文件路径，该标签内不能写js代码，只负责引入
</head>

js的执行顺序是从上到下，先执行哪个就先输出哪个，如弹出对话框方面，要先关闭对话框才能显示以下执行的js内容

计算机组成

软件：有应用软件（如QQ，微信）、系统软件（如Windows、Linux、mac OSX），应用软件运行在操作系统之上

硬件：

三大件:CPU、内存、硬盘（三者在主板上）

输入设备：鼠标、键盘、手写板、摄像头等

输出设备：显示器、打印机、投影仪等

JS语法

注释

单行注释： // 注释的内容多行注释：/* 注释的内容 */

字面量

指源代码中，一个固定值的表示法。如

数值字面量：120，3，8

字符串字面量：‘Eileen’，‘赵夫人’，‘女王’

布尔字面量：true，false

变量

什么是变量？变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。

为什么使用变量呢？使用变量可以方便的获取或者修改内存中的数据。

变量声明

<head>
    <script>
        var age;
        age=18;        //先声明再赋值
        var num=6;    //声明的同时赋值
        var count,n1,sex;   //声明多个变量，逗号隔开
        var name='Wang',age=22;    //声明多个变量的同时赋值，逗号隔开
            //js注释格式为双斜杠
    </script>
</head>

变量的命名规则和规范

1.规则1------必须遵守的，不遵守则会报错

由字母、数字、下划线、$符号组成，并且不能以数字开头
不能是关键字和保留字，例如：for、while
区分大小写

2.规则2-----建议遵守，不遵守不会报错

变量名必须有意义
遵守驼峰原则，即首字母小写，后面单词的首字母都大写，如userName、userPassword

数据类型

简单数据类型：Number、String、Boolean、Undefined、Null

number类型：

指数值字面值：数值的固定值的表示法，如110、1024、66.5

表示法有三种

八进制: 如 var num=07，var num=019;( 对应十进制的19).

注意：八进制中，如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析。

十进制：如 var num=9；（注意：进行算术计算时，八进制和十六进制表示的数值最终都将被转换为十进制数值计算）

十六进制：如var num=0xaAF；（数字序列范围0-9，A-F；A：10，B：11，C：12，D：13，E：14，F：15）

浮点数

浮点数的精确问题

浮点数值得最高精确度是17位小数，所以不要判断两个浮点数是否相等。

如var result=0.1+0.2； //结果不是0.3而是0.30000000000000004. 而且会采用科学计数法：如var n=5e-324；指5乘以10的-324次方

可输出的数值范围：

最小值：Number.MIN_VALUE,这个值为：5e-324
最大值：Number.MAX_VALUE,这个值为：1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

数值判断：

NaN：not a number，指NaN与任何值都不相等，包括它本身
isNaN:is not a number

String类型

字符串字面量，若要输出双引号、单引号、斜杠等，则需要用到转义符

字面量	含义
\n	换行
\t	制表
\b	空格
\r	回车
\f	进纸
\\	斜杠
\'	用于输出单引号，如var n="\'hello\'"; 输出结果为'hello'
\"	用于输出双引号，如var n="\“hello\”"; 输出结果为“hello”
\xnn	以十六进制代码nn表示的一个字符（其中n为0-F），如\x41表示“A”
\unnn	以十六进制代码nnnn表示一个Unicode字符（其中n为0-F），如\03a3表示希腊字符*

字符串长度

length属性用来获取字符串的长度，如 console.log(str.length); 表示获取str的字符串长度

字符串拼接

字符串拼接使用＋来连接

＋两边都为数字的话，那么是运算功能
＋两边只要一边为字符，那么使用的是字符串拼接功能

Boolean类型

Boolean字面量：ture和false，区分大小写
计算机内部存储形式：true为1，false为0；

Undefined和Null

undefined表示一个变量声明了但是没有赋值，一个变量只声明没有赋值时，默认值为undefined
null是值，只是这个值就是空，变量的值若想为null，必须手动设置

复杂数据类型

Object

获取变量的类型

typeof

var age=18；
console.log(typeof age);  //获取age的类型，结果输出为number

各编程语言中变量的区别

在C、java、c#中声明变量的时候就确定了数据的类型，如 int age=18；string a=“Hello”
而在JavaScript中声明变量时并没有确定变量的类型，如 var num=22； num=‘Wang’；是在代码执行的过程中，才确定的变量类型，因此JavaScript也称为弱类型的语言。

数据类型转换

如何使用谷歌浏览器快速的查看数据的类型？

字符串的颜色是黑色，数值类型的是蓝色，布尔类型也是蓝色，undefined和null是灰色

转换成字符串类型

toString( ) 调用变量的toString（）方法
var num = 5;
var isRight = true; 

console.log(num.toString());
console.log(isRight.toString());     //输出值为黑色字体true
String( ), 并不是所有的值都有toString（）方法，如undefined和null，这时就需要用到String（）。当然也可以代替toString（）来转换
字符串拼接也可以转换成字符串类型
var num = 18;
var isRight = true;
console.log(num + '');        //输出为黑色字体的18
console.log(isRight + '');    //单引号引起来的里面什么都没有叫空字符串，输出为黑色字体的true

console.log(typeof (isRight + ''));     // 测试拼接后isRight的类型，答案为string

转换成数值类型

Number（）

可以把任意值转换成数值，布尔值则返回0或1，只要转换的字符串中有一个不是数值的字符，就返回NaN

parseInt（）

第一个字符是数字则会解析到非数字（小数点也算）结束，前面数字正常解析

如果第一个就不是数字则直接返回NaN

无法把布尔类型转换成0或1，返回的是NaN
var num1 = parseInt('12.3abc');    //解析为12
var num1 = parseInt('abc123');    //解析为NaN
parseFloat（）

把字符串转换成浮点数，和parseInt非常相似，不同之处在于，parseFloat会解析第一个小数点，在遇到第二个小数点时认为是非字符从而解析结束，当解析的内容只有整数时，则会解析成整数。

同样无法转换布尔类型，返回的是NaN
var num1 = parseFloat('12.368abc');    //解析为12.368
var num2 = parseFloat('abc123');    //解析为NaN
var isRight = true;
console.log(parseFloat(isRight));    //返回NaN
转换成数值类型的第四种方式：取正或取负数，就像数学里的数字可以使用+ -修饰.也可以+、-0
var str = '123'
console.log(+ str);    //返回的是蓝色字体的123
console.log(str - 0);    //返回的是蓝色字体的123
console.log(str + 0);    //注意返回的是1230，因为+号两边如果存在一边是字符串则都是拼接功能

var isOk = true;
console.log(- isOk);    //返回的是蓝色字体的-1

转换成布尔类型

Boolean（）

注意： 0 ‘’（空字符串） null undefined NaN 会转换成false ,其他都会转换成true

操作符

运算符operator

算术运算符

加减乘除取余 + - * / %

一元运算符

只有一个操作数的运算符如 i++ 而5+6中有两个操作数的运算符为二元运算符或表达式，表达式的组成为操作数、操作符，通常一个表达式都会有一个返回结果
前置++ 如++num 表先让num自身+1，然后再返回表达式的结果
后置++ 如a++ 该表达式先返回表达式的结果a进行运算或其他，然后再对a自身+1
var num = 5;
console.log( num++ );    //返回5，因为后置++，是先返回结果（即自身原封不动的进行运算），然后再自身+1
console.log( num );    //返回的是5+1=6，因为运算完了，自身要+1
// 综合案例
var a = 1;
var b = ++a + a++;
console.log( b );    //返回的是4

//分析：   ++a   结果为2   先执行a自身+1，然后再返回结果2，注意此时a变量为2
//   第二个++a   结果为2   先将a原封的返回结果2进行运算，然后再让自身+1，此时a变量为3
//所以结果为2+2=4

逻辑运算符

&& 与两个操作数同时为true，结果为true，否则都是false
|| 或两个操作数有一个为true，结果为true，否则为false
！非取反

关系运算符（比较运算符）

比较大小 < 、 > 、 >= 、 <=
比较相等 == 、 != 、 === 、 !==

==与===的区别：==只进行值的比较；===除了比较值还要比较类型，二者同时相等才相等
console.log('22'==22);    //返回true，因为两个等号==比较的是值，==会将字符串转换为数值再进行比较

console.log('22'===22);    //返回false，因为===比较的是类型和值二者是否都相等，首先在类型方面
                            //就不相等了，所以直接返回false，没必要再进行值的比较

赋值运算符

赋值运算符有 = += -= /= %=

如 var num = 0； num += 5；相当于num = num +5

运算符的优先级

优先级从高到低为

（）优先级最高
一元运算符 ++ -- ！
算术运算符先乘除取余后加减即先* / % 后+ -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符先&& 后||
赋值运算符

Halle！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript基础（一）简单介绍、数据类型、操作符

目录JS基础网页、网站和应用程序JS的强大应用举例Javascript介绍Javascript是什么Javascript最初目的Javascript现在的意义（应用场景）JS和HTML、CSS的区别Javascript的组成ECMScript-----Javascript的核心BOM---浏览器对象模型DOM---文档对象模型Javascript...
复制链接

扫一扫

专栏目录