JS-1:JS概述,数据类型

一. JavaScript 概述

介绍:
简称JS,是浏览器解释型语言,直接交给浏览器,由浏览器的解释引擎运行(脚本语言)。

作用:
实现页面动态效果和用户交互。

组成:

  1. 核心语法 ECMAScript
  2. 内置对象 (Number, DOM)
    1. 基础对象类型
    2. DOM (重点! Document Object Model)
    3. BOM (Browser Object Model)
  3. 自定义对象


二. JS的使用

在HTML文档中引入JS代码,有三种方式。

1. 通过元素绑定事件的方式引入JS代码

事件:指用户行为触发的操作。

语法:
<元素 事件函数名="JS代码语句">

事件函数:
鼠标单击事件 onclick

JS代码语句:
弹框显示信息: alert('文本');
控制台输出信息: console.log("文本信息");


2.通过标签书写代码

通过标签书写代JS代码,标签内容就是JS代码,可以书写在任意位置,书写任意多次。

注意:
浏览器遵循从上到下执行代码的原则,书写位置可能会影响效果。

JS代码语句:

prompt(' ');
带有输入框的弹框,可用来接收用户输入。

document.write(' ');
在网页中写入内容
使用:
1. 普通的书写方式,安照从上到下的执行顺序,依次在网页的相应位置插入内容,可以识别标签。
2. 如果以元素绑定事件的方式,在页面中写入内容,相当于重写页面。



3.外部的JS文件

1.创建外部的.JS文件。
2.在HTML文档中使用做外部文件的引入操作,标签内部就不能再写JS代码。


三. JS的基础语法

基础语法规则:

  1. JS代码是由语句组成的,每条语句以分号作为结束的标志。
  2. JS严格区分大小写,标点符号一律采用英文标点。
  3. JS中的注释: //表示单行注释 .......... /*单行注释*/


1.变量

变量指在程序运行过程中可以随时修改的数据。

语法

    

使用时注意:

  1. var 关键字可以省略,但是一般不建议省略,它关系到变量的作用域。
  2. 变量如果只使用var关键字声明,不赋值,默认为undefined 。
  3. 如果变量未使用var关键字声明,也不赋值,会报错。

变量的命名规范:

  1. 变量名由数字,字母,下划线,$组成,不能以数字开头。
  2. 变量名尽量见名知意,禁止与JS的保留字和关键字冲突。
  3. 变量名由多个单词组成时,采用小驼峰标识,例:userName。u

例如,以下关键字要避开:
var func while for in each switch case break default continue class name new Number String Array do if else ...



2.常量

常量一经定义就不能再更改,强制修改会报错。

语法:

const 常量名 = 值;
常量在定义时,必须声明并且赋值

使用:
常量名采用全大写字母,与变量名区分



3.小数位的操作

小数在计算机中存储或是计算时都存在误差,不准确。可以设置小数的显示位数。
方法:toFixed(n)
n 表示保留的小数位数。

var n=62.8000000000001;
n = n.toFixed(3);
console.log(n)  //62.800


五. JS的数据类型

JS的数据类型分为两大类:简单数据类型;引用数据类型。

简单数据类型(基础类型)

Number 数字类型

整数和小数统称为Number类型。

整数:

整数的十进制的表示方法:

var n = 100;

整数的八进制表示整数的方法: 以0为前缀,表示'逢8进1'

var num = 015; // 表示十进制里的 13
十进制转八进制,需先将十进制转二进制,从右向左每三位一组,再将二进制的结果计算出来。 (八进制,以八位存数据)。

整数的十六进制的表示方法: 以0x为前缀

var num = 0x35; // 表示十进制里的 53
十进制转十六进制,需先将十进制转二进制,从右向左每四位一组,再将二进制的结果计算出来。

注意:
如果使用console.log输出整数值,不管是什么进制表示,都转成十进制输出。

示例见:04-number.html


小数:

直接以小数点表示小数:

var f1 = 10.5;

科学计数法:

var f2 = 1.5e3;
e, 表示10为底; 3,表示10的次方数; 所以1.5*10(^3)=1500


String 字符串类型(引用数据类型)

所有使用' ' 或者" "引起来的内容,都是字符串
字符串中的所有字符都是以Unicode码存储的,字母和数字的Unicode码值与ASC码值一致,中文字符的Unicode编码在计算机中以16进制存储。


怎样查看指定字符的Unicode 码值?

  1. 方法:charCodeAt(index)
    index 表示指定字符的下标,字符串中默认从0开始,为每一个字符分配下标。
  1. 中文字符在计算机中以16进制存储,查看中文的16进制使用:toString(16);,//将Unicode码转为16进制表示。
  1. 已知中文的十六进制字符串,想转换为中文显示,添加\u转义即可。
  1. 中文的范围: "\u4e00"(一) ~ "\u9fa5"(龥)
  1. 转义字符:
符号 意义
\u
\n 换行
\t 制表符
\'' 表示' '
\\ 表示\
    

示例见:05-string.html



Boolean 布尔类型

只有真和假两个值,true / false
true = 1 ; false = 0


undefined (未定义)

当变量声明未定义时,默认值为undefined.
访问对象不存在的属性时,默认值为undefined.


null 空类型

怎样检测数据类型

使用: typeof

typeof num;
typeof (num + str);






六. 数据类型的转换

1.自动类型转换(隐式转换)

不同类型的数据在做运算时会自动转换。

分类:

1.1字符串与其他数据类型做 + 法运算

+ 一旦与字符串结合使用,都会变成字符串的拼接运算,最后结果都为字符串类型。

    var r1 = 15 + '18';  //"1518"  
    var r2 = 15 +18 +"15";  //"3315"
    var r3 = "15" + 18 + 15;  //"151815"


1.2 number + boolean

数字和布尔值进行+运算,会将boolean类型自动转换为number类型;
其中 true = 1, false = 0 。 转换之后参与数学运算。


1.3其他情况(布尔值,或未定义参与运算)

    




2.强制类型转换

2.1 将其他数据类型转为字符串类型

方法: toString( )
返回: 字符串结果


2.2 将字符串或布尔值转换为Number类型

方法: Number(变量)
返回: 转换后的结果

数字字符串'100',可以直接转换为number 100
非数字字符串"100a","张3",转换失败,返会null
布尔;类型转换number: true = 1 , false = 2.


2.3解析字符串中的数字

方法:
parseInt(变量): 解析字符串中的整数部分
parseFloat(变量): 解析字符串中的number部分
注意:
解析时,从第一个字符开始解析,对每一位进行转Number操作,碰到非数字,停止解析,返回结果。

    "100a"   // 100
    "a100"   // NaN

参数使用:
如果传递的参数为非字符串类型,方法中,会先将参数转换为string,再对每一位字符转Number解析。

    parseInt(18.5);    //"18.5" --> 18
    parseInt(true);    //"true" --> NaN

示例:06-type-transform.html



七. 运算符

赋值运算符:

=: 将右边表达式的值,付给左边的变量

算数运算符:

+ - * / %
字符串使用+,表示字符串的拼接。

在其他的运算符中,会将非数字转换为number类型,参与数学运算。
NaN 与任意类型结合运算,结果都为NaN。
NUll 为空值,与其他类型结合运算,不影响结果。

自增和自减运算:

++ : 自增, 表示在自身基础上加1;
-- : 自减, 表示在自身基础上减1。

var n = 10;
n++;   //  n += 1;   n = n +1
++n;
console.log(n);

使用:

  1. 自增与自减运算符在单独与变量结合使用时,做前缀或后缀没有区别,都表示在自身基础上+1 或 -1。
  2. 如果与其他运算符结合使用,前缀与后缀有区别: 做前缀,先++/--, 做后缀,后++/-- 。
    var num = 5;
    var r1 = num ++; //r1=5,num=6
    var r2 = ++ num; //r2=7,num=7

    思考:
    var n=5;
    var res = n++ + ++n + n++ + ++n + n;
    计算 :
    表达式1 : var r1 = n ++; //5,6
    表达式2 : var r2 = ++ n; //7,7
    表达式3 : var r3 = n ++; //7,8
    表达式4 : var r4 = ++ n; //9,9
    表达式5 : var r5 = n;    //9
    5 + 7 + 7 + 9 + 9 = 37;

你可能感兴趣的:(JS-1:JS概述,数据类型)