JS学习笔记（一）

一、HTML，CSS和JavaScript的关系：

【1】HTML/CSS均为语言–描述类语言

HTML决定网页结构和内容(决定看到什么)，相当于人的身体

CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆

【2】JS为脚本语言–编程类语言

实现业务逻辑和页面控制(决定功能)，相当于人的各种动作

二、JS执行原理

浏览器分成两部分︰渲染引擎和JS引擎

渲染引擎∶用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

三、JS组成

JS由三部分组成：ECMAScript（JS语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）

1.ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

2.DOM——文档对象模型

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等).

3.BOM——浏览器对象模型

BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

四、JS书写模式

【1】行内式（onclick为例）

<a href="#" class="ad"  target="\_blank" onclick="alert('暂无货源')"\>

                  <img src="pic/shop5.png" alt="" class="adp"\>

                  <h3\>小米商品5\</h3\>

                  <p class="feedback"\>xxxxxxxxxxx\|xxxxx,xxxxxxxxxxxxxxxx\</p\>

                    <p class="price"\>2000元起</p\>

                </a\>

【2】内嵌式（script标签）

<head\>

    <meta charset="UTF-8"\>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"\>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"\>

    <title\>小米商城\</title\>

    <link rel="stylesheet" href="MiCSS.css"\>

    <script\>

        alert('测试');

    </script\>

</head\>

【3】外部引入（script标签）

<head\>

    <meta charset="UTF-8"\>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"\>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"\>

    <title\>小米商城\</title\>

    <link rel="stylesheet" href="MiCSS.css"\>

    <script src="MiJS.js"\>\</script\>

</head\>

五、JS基本语法

【1】输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<head\>

    <meta charset="UTF-8"\>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"\>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"\>

    <title\>小米商城\</title\>

    <link rel="stylesheet" href="MiCSS.css"\>

    <!-- \<script src="MiJS.js"\>\</script\> --\>

    <script\>

        prompt('输入点什么：');

        alert('这是一个警告');

        console.log('这是程序员需要查看的日志');

    </script\>

</head\>

执行效果截图：
（1）

（2）

（3）

【2】变量声明的注意事项

（1）一般用var声明，定义局部变量时如果不加var关键字javascript解释程序会将其解释为全局变量。

（2）可以同时定义多个变量，例如：

var name1=‘a’,name2=‘b’,name3=‘c’,age=55;

【3】转义符使用

（引号用法外单内双：’ “ “ ’）

【4】字符使用方法

var str = ‘trust me,bro’;
console.log(str.length);//输出的是字符串str的长度

（注意，prompt返回的值是字符型）

【5】创建数组的方式

//数组定义的两种形式

var arr=new Array();

var arr2 =[];

//数组元素可以是不同类型

arr2=[1,'xtu',true];

【6】小样例：

//九九乘法表
for (var i = 1; i < 10; i++) {
  str = "";
  for (var j = 1; j <= i; j++) {
    if (i == j) {
      str += j + "x" + i + "=" + i * j;
    } else {
      str += j + "x" + i + "=" + i * j + "||";
    }
  }
  console.log(str);
}

运行效果：

//星星圣诞树
var str;
for (var i = 0; i < 5; i++) {
  str = "";
  for (var j = 0; j < 5 - i; j++) {
    str += " ";
  }
  for (var j = 0; j <= i; j++) {
    str += "⭐";
  }
  console.log(str);
}

运行效果：

【7】函数练手

//冒泡排序
var arr3=[5,8,7,98,56,48,1,546,97,87];
function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        // 相邻元素两两对比
                var temp = arr[j+1];        // 元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}
console.log(bubbleSort(arr3));

输出结果：

//斐波那契数列
function Fibonacci(index){
    if(index<0||index%1!=0){
        console.log('输入值非法!');
        return 0;
    }
    if(index==1||index==2){
        return 1;
    }else{
        return Fibonacci(index-1)+Fibonacci(index-2);
    }
}
//打印一个长度为20的斐波那契数列
var arrFb=[];
for(var i=1;i<=20;i++){
    arrFb[i-1]=Fibonacci(i);
}
console.log('斐波那契数列前二十项:'+arrFb);
Fibonacci();//不传入，传入undefined，有处理

输出结果：

//arguments存储了传入函数的所有参数

function FunctionTest(){
    console.log(arguments);
    console.log(arguments.length);//参数的个数
    console.log(arguments[2]);//参数数组的某个元素
}
FunctionTest(1,2,3,4);

输出结果：

//下面这种为匿名函数
//var result=function(){}
//匿名函数传参
var Uname=function(arg){
    console.log(arg);
}
Uname('zzy');

输出结果：

【8】作用域：

全局作用域：整个script标签范围

局部作用域：定义的function函数内部

//作用域链，存在就近原则
var num=10;
function fn(){
    var num=23;
    function fun(){
        console.log(num);
    }
    fun();
}
fn();

输出结果：

【9】预解析

一、预解析，JavaScript解析器在运行JS代码的时候分为两步：预解析和代码执行

(1)对于预解析,js引擎会把js 里面所有的 var还有 function提升到当前作用域的最前面

(2)代码执行,按照代码书写的顺序从上往下执行

二、预解析分为变量预解析（变量提升）和函数预解析（函数提升）

(1)变量提升：就是把所有变量声明提升到当前的作用域最前面，不提升赋值操作

(2)当函数为一般定义情况下，如function fun(){};调用函数的位置可以在函数定义之前；

当函数为表达式定义，如var fun=function(),那么在此之前的fun()会失效，因为只提升了var fun;代码

预解析案例1：

//题目要求：
var a=18;

f1();

function f1(){

  var b=9;

  console.log(a);

  console.log(b);

  var a='123';

} 

解答：

//按照预解析规则重新排序：
var a;
function f1(){
    var b;
    var a;
    b=9;
    console.log(a);
    console.log(b);
    a='123';
}
a=18;
f1();//结果a是undefined，b是9

预解析案例2：

f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
    var a=b=c=9;
    console.log(a);
    console.log(b);
    console.log(c);
} 

解答：

//案例代码重排序
console.log('预解析案例：');
function f1(){
    var a;
    a=9;
    b=9;//全局变量
    c=9;//全局变量
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

运行结果：

这里有个重要知识点：

var a=b=c=9;

相当于：

var a=9;
b=9;
c=9;