JavaScript (一) js的介绍及基本语法变量

个人博客网：https://wushaopei.github.io/ (你想要这里多有)

一、JS 的介绍

1、JavaScript ：简称 : js

js 分为三个部分：

1. ECMAScript 标准----js的基本的语法

2. DOM------Document Object Model  文档对象模型

3. BOM------Browser Object Model  浏览器对象模型

2、JavaScript 是什么？

①语言类型

是一门脚本语言，

是一门解释性语言，

是一门动态类型的语言，

是一门基于对象的语言。

②编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行



* 脚本语言:不需要编译,直接执行

* 常见的脚本语言:t-sql,cmd

③ 硬件与 js 的关系

 电脑的硬件---->系统--->客户端的程序--->代码

 电脑的硬件---->系统--->浏览器--->js代码

④ js的作用

解决用户和浏览器之间的交互的问题

在实际开发中的角色：

 HTML:是标记语言,展示数据的

 CSS:美化页面

 JavaScript:用户和浏览器交互,

示例：

<script>

  //js的代码了

  alert("哈哈,我又变帅了");//在页面中弹出一个对话框

</script>

效果展示：

3、js 的代码可以分三个地方写：

①在html 的文件中，script 的标签中写 js代码

 <head>

  <script>

    //js代码

    alert("锄禾日当午,地雷埋下土,小苏走过去,炸成二百五");//在页面中弹出对话框

  </script>

</head>

②js 代码可以在html 的标签中写

<input type="button" value="按钮" onclick="alert('被点了');"/>

③在 js 文件中可以写 js 代码，但是需要在html 的页面中引入 script 的标签中的 src = " js 的路径 "

<script src="test.js"></script>

test.js 中的 js 代码 :

alert("我是外部的js文件中的代码");

执行效果：

4、js 代码的注意问题

 1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行

 2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行

 3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以

   但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准

 4.有可能会出现这种情况:script标签中可能同时出现type和language的写法.

 5.script标签在页面中可以出现多对

 6.script标签一般是放在body的标签的最后的,有的时候会在head标签中

 7.如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码

1 和 2 的问题示例：

	    alert("哈哈;   //少了一个括号，不执行

              alert("嘎嘎");  // 正常执行

3 和 4 和 5 的实例：

        <script type="text/javascript">

		alert("又弹出来了");

	</script>

	<script type="text/javascript">

		alert("又执行了");

	</script>

6 和 7 的示例：

<body>

	<script src="test.js"></script>

</body>

二、变量

1、变量的定义与内存地址：

①操作的数据都是在内存中操作

②js中存储数据使用变量的方式(名字,值--->数据)

③js中声明变量都用var---->存储数据,数据应该有对应的数据类型

④js中的字符串类型的值都用双引号或者单引号

示例---变量的声明与赋值：

 //存储一个数字10

 // 变量的声明及赋值

  var num=10;

 // 存储一个名字

  var name='小黑';

2、变量的作用于初始化、声明：

①作用：
用来操作数据的(可以存储,可以读取)
②变量声明：有 var 有变量名字，没有赋值

③变量初始化：有var 有变量名字，有赋值

变量声明的方式：

var 变量名字；

声明与赋值：

var number;//变量的声明，此时是没有赋值的

//一次性声明多个变量

var x,yx,z,k,j；//都是声明，没有赋值

//变量的初始化（变量声明的同时并且赋值了）

= 的意义： 赋值的意义

初始化、声明示例：

        // 存储一个数字10

        var  number = 10;

        console.log(number);

        //存储一个5

        var number2 = 5;

        console.log(number2);

        //存储一个人的名字

        var name = "文兴";

        console.log(name);

        //存储真 （true）

        var boolean = true;

        console.log(boolean);

        //存储一个null --- > 相当于是空

        var nll = null;

        console.log(nll);

        //存储一个对象

        var obj = new Object();

        console.log(obj);

浏览器查看效果：

3、变量的规范与注意问题：

①注意的基本的代码的规范

 js中声明变量都用var

 js中的每一行代码结束都应该有分号;(写代码有分号的习惯)

 js中的大小写是区分的: var N=10; n

 js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号

②变量名的注意问题---变量名的命名规范,要遵循驼峰命名法

1.变量的名字要有意义,

2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字

3.变量名一般都是小写的

4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法

5.不能使用关键字(系统自带的一些单词,不能使用)

6.不会单词用拼音,拼音也要遵循驼峰命名法

示例：

（1）声明变量并初始化---变量的初始化----声明变量赋值

 //声明了一个num的变量存储了一个数字100

 var num = 100;

 //输出这个变量的值

 alert(num);//弹框

 //浏览器的控制台在浏览器中的开发人员工具中(快捷键:F12)的console的选项中

 console.log(num);//把内容输出在浏览器的控制台中

效果截图：

（2）声明多个变量然后一个一个的赋值

        var num1,num2,num3;//声明

	//一次的赋值

	num1=10;

	num2=20;

	num3=30;

	//声明多个变量并且赋值

	// var num1=10,num2=20;num3=30;

4、变量的交换：

（1）扩展的变量的交换:只需要看代码,不需要理解---位运算

        var num1 = 10;

        var num2 = 20;

    //把num1 这个变量的值取出来放在 temp 变量中

        var temp = num1;

    // 把 num2 这个变量的值取出来放在 num1 变量中

        num1 = num2;

   // 把 temp 变量的值取出来放在num2 变量中

        num2 = temp ;

        console.log(num1); // 20

        console.log(num2); // 10

（2）第二种方式交换:一般适用于数字的交换

         var num1 = 10;

         var num2 = 20;

    //    //把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量

         num1 = num1 + num2 ; //30

    //    //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2

         num2 = num1 - num2;  //10

    //    //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1

         num1 = num1 - num2; //20

        console.log(num1,num2);

（3）扩展的变量的交换:了解 ---位运算

        var num1 = 10;

        var num2 = 20;

        num1 = num1 ^ num2;

        num2 = num1 ^ num2;

        num1 = num1 ^ num2;

        console.log(num1,num2);

5、快件键：

快捷键： Ctrl+Alt+L----->格式化代码的(设置代码有很好的格式,代码是错误的,这个快捷键是没有效果)

三、注释

注释 : 是解释代码的含义,给其他的程序员看的

注释的方式:

     1.单行注释  //

     2.多行注释  /★★/

说明：

// 单行注释:一般用在一行代码的上面
/* 多行注释:一般是用在函数或者是一段代码的上面*/

// 代码中如果没有注释,不规范,天天会被骂醒

// 注释后的代码不执行了

示例：

 //console.log("哈哈,我又变帅了");

 //console.log("第二行");

四、JS 的数据类型

1、JS 的数据类型有哪些?

js中的原始数据类型:number,string,boolean,null,undefined,object

说明：

number:数字类型(整数和小数)

string:字符串类型(的值一般都是用单引号或者是双引号括起来) "34"

boolean:布尔类型(值只有两个,true(真1),false(假0))

null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null

undefined:未定义,值只有一个:undefined

什么情况下的结果是undefined

变量声明了,没有赋值,结果是undefined

函数没有明确返回值,如果接收了,结果也是undefined

注意：

如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义

2、如何获取这个变量的数据类型是什么?

使用typeof 来获取

语法：

     typeof 变量名

     typeof(变量名)

3、数据类型 - - - 示例：

        var num = 10;

        var str = "文";

        var flag = true;

        var nll = null;

        var undef;

        var obj = new Object();

        console.log(typeof num);

        console.log(typeof str);

        console.log(typeof flag);

        console.log(typeof nll);

        console.log(typeof undef);

        console.log(typeof obj);

        console.log(typeof num);

        console.log("10");

        console.log(10);

4、数字类型：整数和小数

     num=20;整数

     num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)

     所有的数字都是属于number类型 

     其他的语言:

      整数类型:int

      单精度浮点型:float

      双精度浮点型:double

（1）数字进制：

  二进制:遇到2进一

       00000001-----1

       00000010-----2

       00000011-----3

       00000100-----4

       00000101----5

       00000110----6

       00000111-----7

       00001000-----8

       00001001----9

  八进制:遇到8进一

       00000001

       00000002

       00000003

       00000004

       00000005

       00000006

       00000007

       00000010-----8

       00000011-----9

       00000012-----10

  十进制:遇到10进一

       0

       1

       2

       3

       4

       5

       6

       7

       8

       9

       10

  十六进制:遇到f进一

     00000001

     00000002

     00000003

     00000004

     00000005

     00000006

     00000007

     00000008

     00000009

     0000000a----10

     0000000b---11

     0000000c----12

     0000000d---13

     0000000e---14

     0000000f---15

     00000010---16

     00000011---17

     00000012---18

     0f12a

（2）示例：

    js中可以表示的进制有：

         var num=10;//十进制

         var num2=012;//八进制

         var num3=0x123;//十六进制

    var num=12;//十进制

    console.log(num);

    var num2=012;//八进制

    console.log(num2);

    var num3=0x1a;//十六进制

    console.log(num3);

（3）数字类型的范围及验证方式：

①范围 --- 最值：

    //数字类型有范围: 最小值和最大值

    console.log(Number.MAX_VALUE);//数字的最大值

    console.log(Number.MIN_VALUE);//数字的最小值

②验证： NaN 、isNaN

不要用小数去验证小数.

    var x=0.1;

    var y=0.2;

    var sum=x+y;

    console.log(sum==0.3);

不要用小数去验证小数.

    var x=0.1;

    var y=0.2;

    var sum=x+y;

    console.log(sum==0.3);

不要用NaN验证是不是NaN

    var num;

    console.log(num+10==NaN);

    console.log("您好"=="我好");

正确的验证方式：使用 isNaN()

    var num;//-----变量声明了,没有赋值,结果是:undefined

    //是不是不是一个数字----->不是一个数字吗？ NaN--->不是一个数字

    console.log(isNaN(10));

示例：判断结果不是一个数字可以使用isNaN(变量名)

     var str="您好";

     var num;

     var sum=num+10;//NaN

     console.log(sum);

     console.log(isNaN(sum));//不是数字为true,是数字结果为false

5、布尔类型

布尔类型:的值有两个,一个是true(真),一个是false(假)

    var flag=1;

    console.log(flag);

    var fdf=null;

    var num=0;

6、类型转换

主要有两种：① 转换为数字类型、②转换为字符串类型、③其他类型转布尔类型

（1）其他类型转数字类型：三种方式：

    1.parseInt();//转整数

        console.log(parseInt("10"));//10

        console.log(parseInt("10afrswfdsf"));//10

        console.log(parseInt("g10"));//NaN

        console.log(parseInt("1fds0"));//1

        console.log(parseInt("10.98"));//10

        console.log(parseInt("10.98fdsfd"));//10

    2.parseFloat()//转小数

        console.log(parseFloat("10"));//10

        console.log(parseFloat("10afrswfdsf"));//10

        console.log(parseFloat("g10"));//NaN

        console.log(parseFloat("1fds0"));//1

        console.log(parseFloat("10.98"));//10.98

        console.log(parseFloat("10.98fdsfd"));//10.98

    3.Number();//转数字

        console.log(Number("10"));//10

        console.log(Number("10afrswfdsf"));//NaN

        console.log(Number("g10"));//NaN

        console.log(Number("1fds0"));//NaN

        console.log(Number("10.98"));//10.98

        console.log(Number("10.98fdsfd"));//NaN

总结 : 想要转整数用parseInt() , 想要转小数用parseFloat()

注意 : 想要转数字:Number();要比上面的两种方式严格

（2）其他类型转字符串类型

    1   .toString()

    var num=10;

    console.log(num.toString());//字符串类型

    2  String();

    var num1=20;

    console.log(String(num1));

注意：

如果变量有意义调用.toString()使用转换
如果变量没有意义使用String()转换

   <script>

    var num2;

    console.log(num2.toString());

    var num3=null;

    console.log(num3.toString());

    //这个可以

    var num2;

    console.log(String(num2));

    var num3=null;

    console.log(String(num3));

  </script>

（3）其他类型转布尔类型

<script>

   Boolean(值);

    console.log(Boolean(1));//true

    console.log(Boolean(0));//false

    console.log(Boolean(11));//true

    console.log(Boolean(-10));//true

    console.log(Boolean("哈哈"));//true

    console.log(Boolean(""));//false

    console.log(Boolean(null));//false

    console.log(Boolean(undefined));//false

    var str=10;

    console.log(+str);

</script>