JavaScript的学习

CSS笔记： 

http://t.csdn.cn/FtnAB

编程语言

编程语言是用来控制计算机的一系列指令，有固定的格式和词汇，必须遵守，如今通用的编程语言有两种形式：汇编语言和高级语言。

汇编语言和机器语言实质相同，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

高级语言主要是相对于低级语言而言，并不是特指某一种具体的语言，包括很多编程语言：如C语言，C++，Java，C#，Python，PHP，JavaScript，Go语言，Objective-C，Swift等。

C语言：printf("你好");

PHP：echo"你好";

Java：System.out.println("你好");

JavaScript：alert("你好");

编程语言和标记语言的区别

编程语言有很强的逻辑和行为能力。在编程语言里会出现很多if else，for，while等具有逻辑性和行为能力的指令，这是主动的。

标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，它是被动的。

认识JavaScript

是什么

• JavaScript是最流行的语言之一，是运行在客户端的脚本语言
• 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行进行解释并执行
• 现在也可以基于Node.js技术进行服务器端编程

有什么用

• 表单动态校验（密码强度检测）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• App（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

HTML/CSS/JavaScript的关系

• HTML决定网页结构和内容（决定看到什么）
• CSS决定网页呈现给用户的模样（决定好不好看）
• 实现业务逻辑和页面控制（决定功能）

浏览器执行JavaScript

浏览器分为两部分：渲染引擎和JS引擎

• 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink
• JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

JS的组成

• JavaScript语法（ECMAScript）
  • ECMAScript桂东路JS的编程语法和基础核心知识，由所有浏览器厂商共同遵守的一套JS语法工业标准
• 页面文档对象模型（DOM）
  • 是处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色）
• 浏览器对象模型（BOM）
  • 可以与浏览器页面进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框，控制页面跳转，获取分辨率等

JavaScript

三种书写位置：

1.行内

    <%--行内式的js，直接写到元素的内部--%>
    <input type="button" value="提交" onclick="alert('提交成功')">

• 将单行或少量JS代码写在HTML标签中
• JS中推荐使用单引号

2.内嵌

    <%--内嵌式的js--%>
    <script>
        alert('你好');
    </script>

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是常用到的方式 

3. 外部

    <%--外部js 双标签--%>
    <script src="my.js"></script>

• 利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外
• 引用外部JS文件的script标签中间不可以写代码

输入输出语句

prompt取过来的值是string类型的

数据类型

• 简单数据类型（Number，String，Boolean，Undefined，Null）
• 复杂数据类型（object）

        // 数字型最大值
        console.log(Number.MAX_VALUE);
        // 数字型最小值
        console.log(Number.MIN_VALUE);
        // 无穷大
        console.log(Infinity);
        console.log(Number.MAX_VALUE*2);
        // 无穷小
        console.log(-Infinity);
        console.log(-Number.MAX_VALUE*2)
        // 非数字
        console.log('你好'-100);

isNaN()

这个方法用来判断非数字，并且返回一个值，如果不是数字返回true

console.log(isNaN(12));//false
console.log(isNaN('你好'));//true

str.length

通过字符串的length属性可以获取整个字符串的长度

        var str='asdgadfhg';
        alert(str.length);//9

字符串的拼接

数值相加，字符相连

        console.log('hello'+' '+'world');

typeof

监测数据类型

        // 监测数据类型
        var num=12;
        console.log(typeof num);//number

        var age=num;
        console.log(typeof age);//object

数据类型转换

转换为字符型

转换为数字型 

        console.log(parseInt('120xx'));//120
        console.log(parseInt('xx120xx'));//NaN
        console.log(Number('12'));//12
        console.log('12'-0);//12

转换为布尔型

代表空，否定的值会被转换为false，如：''，0，NaN，null，undefined

其余值都会转换为true 

浮点数的算术运算会有问题，不用直接判断两个浮点数是否相等

预解析

        console.log(num);
        var num=10;//undefined

        fun1();
        function fun1(){
            console.log(11);
        }//输出11

        fun2();
        var fun2(){
          console.log(22);
        }//报错

JS引擎运行JS分为两步，预解析（分为变量预解析（变量提升）和函数预解析（函数提升）），代码执行

预解析：JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面

代码执行：按照代码书写的顺序从上往下执行

变量提升

把所有的变量声明提升到当前作用域的前面，不提升赋值操作。

函数提升

把所有的函数声明提升到当前左右与的前面，不调用函数。

对象

对象是一个具体的事物。

在JavaScript中，对象是一组无序的相关属性的方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。

对象有属性和方法组成：

• 属性：事物的特征
• 方法：事物的行为

创建对象的三种方式

对象字面量

对象字面量就是花括号{}里面包含了表示这个具体事物（对象）的属性和方法

    <script>
        var obj1={};//一个空的对象
        var obj2={
            name: '张三',
            age: 18,
            sex: '男',
            sayHi: function (){
                console.log('hi');
            }
        }
    </script>

• 里面的属性或者方法我们采取键值对的形式
• 多个属性或者方法中间用逗号隔开
• 方法冒号后面跟的是一个匿名函数

使用对象

调用对象的属性有两种：

对象名.属性名

对象名['属性名']

        console.log(obj2.name);
        console.log(obj2['age']);

调用对象的方法：

对象名.方法名()

        obj2.sayHi();

变量，属性，函数，方法的区别

变量和属性是相同点：都是用来存储数据的

变量：单独声明并赋值，使用的时候直接写变量名，单独存在

属性：在对象里面的不需要声明，使用的时候必须是：对象.属性

函数和方法的相同点：都是实现某种功能，做某件事

函数：单独声明并且调用的，函数名()单独存在

方法：在对象里面，调用的时候：对象.方法()

new Object创建对象

• 利用等号赋值的方法，添加对象的属性和方法
• 每个属性和方法之间用分号结束

    <script>
        var obj=new Object();//创建了一个空的对象
        obj.name='张三';
        obj.age=18;
        obj.sex='男';
        obj.sayHi=function (){
            console.log('hi');
        }
    </script>

构造函数创建对象

是一个特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它纵欲new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

前两种创建方式一次只能创建一个对象。

语法格式：

function 构造函数名(){

        this.属性=值;

        this.方法=function(){}

}

• 构造函数名字首字母要大写
• 不需要return就可以返回结果
• 调用构造函数必须使用new
• 属性和方法前面必须添加this

    <script>
        function Star(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.sing=function (sing){
                console.log(sing)
            }
        }
        var star1=new Star('刘德华',18,'男');
        star1.sing('你好');
        console.log(star1.name);
        var star2=new Star('张学友',19,'男');
        star2.sing('hello');
        console.log(star2.age);
    </script>

构造函数和对象的区别

构造函数：泛指某一大类，类似于java中的类（class）

对象：特指是一个具体的事物

遍历对象的属性

for…in属性

语法格式：

for(变量  in  对象){

}

    <script>
        var obj={
            name:'张三',
            age:18,
            sex:'男'
        }
        for(var k in obj){
            console.log(k);//得到的是属性名
            console.log(obj[k]);
        }
    </script>

JavaScript中的对象分为三种：

自定义对象、内置对象、浏览器对象。

• 前两种对象指JS语言自带的一些对象，属于ECMAScript，第三个浏览器对象属于我们JS独有的
• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供一些常用的伙食最基本而必要的功能（属性和方法）
• 内置对象最大的优点是帮助我们快速开发
• JavaScript提供了多个内置对象：Math，Date，Array，String等

获取元素

特殊元素

body元素

document.body//返回body元素对象

html元素

document.documentElement//返回html元素对象

事件

鼠标事件

//点击
<button id="btn">唐伯虎</button>
<script>
  var btn=document.getElementById('btn');
  btn.onclick=function (){
    alert('点秋香');
  }
</script>

改变元素内容

innerText

去除html标签，同时空格和换行也会去掉

innerHTML

包括html标签，同时保留空格会换行

修改元素属性

  ldh.onclick=function (){
    img.src='4.png';
  }
  zxy.onclick=function (){
    img.src='7.png';
  }

操作元素

可以操作表单元素的属性：

type，value，checked，selected，disabled

行内样式操作

element.style

类名样式操作

element.className

• JS采用驼峰命名法，比如：fontSize，backgroundColor
• JS修改style样式，产生的是行内样式
• className修改会直接更改元素的类名，会覆盖原先的类名（这样的修改适用于修改样式较多的情况）

 // className会直接覆盖原先的类名   
 var eye=document.querySelector('.png');
    eye.onclick=function (){
        this.className='chang';
    }

如果要保留原先的类名，可以这样改:

    var eye=document.querySelector('.png');
    eye.onclick=function (){
        this.className='eye chang';
    }