JavaScript学习记录一

 JavaScript :简称:js
    * js分三个部分:
    * 1. ECMAScript 标准----js的基本的语法
    * 2. DOM------Document Object Model  文档对象模型
    * 3. BOM------Browser Object Model  浏览器对象模型
    *
    *

JavaScript是什么？
    * 是一门脚本语言
    * 是一门解释性语言
    * 是一门动态类型的语言
    * 是一门基于对象的语言
    *
    * 编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行
    * 脚本语言:不需要编译,直接执行
    * 常见的脚本语言:t-sql,cmd
    *
    * 电脑的硬件---->系统--->客户端的程序--->代码
    * 电脑的硬件---->系统--->浏览器--->js代码
    * js原名不是JavaScript,而是LiveScript
    * js的作用?解决用户和浏览器之间的交互的问题
    * js现在可以做什么?
    *
    *
    * HTML:是标记语言,展示数据的
    * CSS:美化页面
    * JavaScript:用户和浏览器交互。

JavaScript引擎的简单解释

     浏览器中包含该引擎，通过浏览器打开.html页面的时候，该引擎会自动启动，执行JavaScript代码。

 

页面中有什么代码?html--展示内容,css---美化页面的,js---控制页面
    *
    * js的代码可以分三个地方写:
    * 1.在html的文件中,script的标签中写js代码
    * 2.js代码可以在html的标签中写---
    * 3.在js文件中可以写js代码,但是需要在html的页面中引入 script的标签中的src="js的路径"
    *
    * 在webstorm工具中打开页面:
    * 1. 右上角有浏览器图标,直接点击即可
    * 2. 快捷键: Alt+F2 回车或者上下键选择

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标签中,目前讲课的时候都在body标签的后面(body中的最后)
    *
    *  7.如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码

 

变量（想象宾馆开房：给你一个房号=开了一个空间 | 给你钥匙=空间进行标识 | 你进入房间=赋值 | 朋友来找你=取值）

     * 操作的数据都是在内存中操作
     * js中存储数据使用变量的方式(名字,值--->数据)
     * js中声明变量都用var---->存储数据,数据应该有对应的数据类型
     * js中的字符串类型的值都用双引号或者单引号
     *
     * 存储一个数字10
     * 变量的声明及赋值
     * var num=10;
     * 存储一个名字
     * var name='小黑';

  * 变量作用:用来操作数据的(可以存储,可以读取)
    * 变量的声明:没有赋值
    * var 变量名;
    * 变量的初始化:有赋值
    * var 变量名=值;
    *
    * 注意的基本的代码的规范
    * js中声明变量都用var
    * js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
    * js中的大小写是区分的: var N=10; n
    * js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号
    *
    * 变量名的注意问题---变量名的命名规范,要遵循驼峰命名法
    * 1.变量的名字要有意义,
    * 2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字
    * 3.变量名一般都是小写的
    * 4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法
    * 5.不能使用关键字(系统自带的一些单词,不能使用)
    * 6.不会单词用拼音,拼音也要遵循驼峰命名法

 //变量的交换的第一个思路:使用第三方的变量进行交换
    //    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

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

    //    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);

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

    //注意；变量的名字是不能重名

    //    var num1=10;
    //    var num1=20;
    //    console.log(num1);

    //扩展的变量的交换:只需要看代码,不需要理解---位运算(异或：相同则为0，不同则为1：a^(b^b)=a)
    var num1 = 10;
    var num2 = 20;
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;
    console.log(num1, num2);

注释:是解释代码的含义,给其他的程序员看的
    * 注释的方式:
    * 1.单行注释  //
    * 2.多行注释  /* */

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不是一个数字,也没有意义
     * object:对象---->

   //如何获取这个变量的数据类型是什么? 使用typeof 来获取
    //typeof 的使用的语法
    /*
     * 都可以获取这个变量的数据类型是什么!
     * typeof 变量名

     *var num = 10;

     *console.log(typeof(num));

数字类型:整数和小数
    *
    * num=20;整数
    * num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)
    * 所有的数字都是属于number类型
    * 其他的语言:
    * 整数类型:int
    * 单精度浮点型:float
    * 双精度浮点型:double
    *
    * 数字:
    * 二进制:遇到2进一
    *
    *   00000001-----1
    *   00000010-----2
    *   00000011-----3
    * 八进制:遇到8进一
    *   00000001
    *   00000002
    *   00000003
    * 十进制:遇到10进一
    *   0
    *   1
    * 十六进制:遇到f进一
    * 00000001
    * 0000000a----10
    * 0000000b---11
    * 0000000c----12
    * 0000000d---13
    * 0000000e---14
    * 0000000f---15
    * 00000010---16
    * 00000011---17
    * 00000012---18

    * js中可以表示哪些进制
    * var num=10;//十进制
    * var num2=012;//八进制
    * var num3=0x123;//十六进制

数字类型有范围: 最小值和最大值
   *console.log(Number.MAX_VALUE);//数字的最大值
   *console.log(Number.MIN_VALUE);//数字的最小值

注：不要用小数去验证小数.
     //    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("您好"=="我好");

    //如何验证这个结果是不是NaN,应该使用isNaN()

    //console.log(isNaN(10));

字符串

    //字符串可以使用单引号,也可以使用双引号

    //字符串的长度如何获取? 变量名.length

    //html中的转义符: <  &lt; > &gt; 空格: &nbsp;
    //js中的字符串里也有转义符

    //tab键----水平制表符
    //    console.log("哈哈\\嘎嘎");

    //字符串的拼接: 使用+可以把多个字符串放在一起形成一个字符串
    //只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加
    //如果有一个是字符串,另一个不是字符串,使用- 号,此时会发生计算，这种方式叫:隐式转换

布尔类型

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

    //计算机内部默认true=1   false=0

undefined:变量声明，但是没有做初始化

null:需要使用null值必须手动进行设置。

 

类型转换

    //其他类型转数字类型:三种方式:
    //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();要比上面的两种方式严格

    //其他类型转字符串类型（浏览器控制台显示：蓝色表示数字，黑色表示字符串）
    //1    .toString()

//    var num=10;
//    console.log(num.toString());//字符串类型
//    //2  String();
//
//    var num1=20;
//    console.log(String(num1));

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

//    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));

    //其他类型转布尔类型

    //1  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);

操作符:一些符号-----用来计算
     *
     * 算数运算符:  +  -  * / %
     * 算数运算表达式:由算数运算符连接起来的表达式
     * 一元运算符: 这个操作符只需要一个操作数就可以运算的符号  ++  --
     * 二元运算符: 这个操作符需要两个操作数就可以运算,
     * 三元运算符: -----不讲,明天讲
     * 复合运算符: +=  -=  *= /= %=
     * 复合运算表达式:由复合运算符连接起来的表达式

 

     * 关系运算符: >  <  >=  <=  ==不严格的 ===严格的 !=不严格的不等 !==严格的不等
     * 关系运算表达式:由关系运算符连接起来的表达式
     * 关系运算表达式的结果是布尔类型
     * 逻辑运算符:
     * &&---逻辑与--并且
     * ||---逻辑或---或者
     * !---逻辑非---取反--取非
     * 逻辑运算表达式:由逻辑运算符连接起来的表达式

 

     * 赋值运算符:  =