JS-1：JS概述，数据类型

2018-11-15 本文已影响0人白超_462d

一. JavaScript 概述

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

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

组成：

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

二. JS的使用

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

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

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

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

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

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

2.通过`<script></script>`标签书写代码

通过<script></script>标签书写代JS代码，标签内容就是JS代码，可以书写在任意位置，书写任意多次。

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

JS代码语句：

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

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

3.外部的JS文件

1.创建外部的.JS文件。
2.在HTML文档中使用<script src="url"></script引入。
3.如果<script></script>做外部文件的引入操作，标签内部就不能再写JS代码。

三. JS的基础语法

基础语法规则：

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

1.变量

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

语法：

    <script>

    // 变量
    var a;
    a = 100;
    // 声明变量的同时，进行赋值
    var b = 1000;    
    // 同时声明多个变量
    var c,d,e;
    c = "张三";
    d = 12.5;
    e = 200;
    //同时声明并赋值
    var m=10,n=20,k=30;
    //输出变量的值
    console.log(m,n,k);
    console.log(c)

    </script>

使用时注意：

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

变量的命名规范：

变量名由数字，字母，下划线，$组成，不能以数字开头。
变量名尽量见名知意，禁止与JS的保留字和关键字冲突。
变量名由多个单词组成时，采用小驼峰标识，例：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 码值？

方法：charCodeAt(index)
index 表示指定字符的下标，字符串中默认从0开始，为每一个字符分配下标。

中文字符在计算机中以16进制存储，查看中文的16进制使用：toString(16);,//将Unicode码转为16进制表示。

已知中文的十六进制字符串，想转换为中文显示，添加\u转义即可。

中文的范围： "\u4e00"(一) ~ "\u9fa5"(龥)

转义字符：

符号	意义
\u
\n	换行
\t	制表符
\''	表示' '
\\	表示\

    <script>
        // 创建字符串变量
        var str1 = '100';
        var str2 = 'abc';
        var str3 = 'ABC';
        // 获取字符的Unicode码值
        var code1 = str1.charCodeAt(0);
        var code2 = str2.charCodeAt();
        var code3 = str3.charCodeAt(0);
        console.log(code1,code2,code3)

        //定义中文字符串
        var str4 = "张三丰";
        var code4 = str4.charCodeAt(0);
        console.log(code4)


        //中文Unicode码转成16进制:

        //把 '张' 转成16进制的字符来表示
        var zhangcode4 = code4.toString(16);
        console.log(zhangcode4)

        //16进制字符转成中文
        var str5 = "\u5f20";
        console.log(str5)

        //中文Unicode码的范围
        var s1 = '\u4e00';
        var s2 = '\u9fa5';
        console.log(s1,s2)

        //怎样检测数据的类型
        console.log(typeof s1,typeof str4)
        
    </script>

示例见：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其他情况(布尔值，或未定义参与运算)

<script>
    //number + undefined/null  
    var res3 = 100 + undefined;
    var res4 = 200 + null;
    console.log(res3,typeof res3);  // NaN "number"
    console.log(res4,typeof res4);   // 200 "number" 
        
    //boolean + undefined/null
    var res5 = true + undefined;
    var res6 = false + null;
    console.log(res5,typeof res5);  // NaN "number"
    console.log(res6,typeof res6);   // 0 "number"
</script>

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。
如果与其他运算符结合使用,前缀与后缀有区别: 做前缀,先++/--, 做后缀,后++/-- 。

    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概述，数据类型

一. JavaScript 概述

二. JS的使用

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

2.通过`<script></script>`标签书写代码

3.外部的JS文件

三. JS的基础语法

1.变量

2.常量

3.小数位的操作

五. JS的数据类型

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

Number 数字类型

String 字符串类型（引用数据类型）

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

Boolean 布尔类型

undefined (未定义)

null 空类型

六. 数据类型的转换

1.自动类型转换（隐式转换）

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

1.2 number + boolean

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

2.强制类型转换

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

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

2.3解析字符串中的数字

七. 运算符

猜你喜欢

热点阅读

JS-1：JS概述，数据类型

一. JavaScript 概述

二. JS的使用

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

2.通过<script></script>标签书写代码

3.外部的JS文件

三. JS的基础语法

1.变量

2.常量

3.小数位的操作

五. JS的数据类型

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

Number 数字类型

String 字符串类型（引用数据类型）

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

Boolean 布尔类型

undefined (未定义)

null 空类型

六. 数据类型的转换

1.自动类型转换（隐式转换）

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

1.2 number + boolean

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

2.强制类型转换

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

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

2.3解析字符串中的数字

七. 运算符

猜你喜欢

热点阅读

2.通过`<script></script>`标签书写代码