【前端学习】JS入门（一）

一、JS基础

1、JS的组成

• ECMAScript：JS基础语法
• DOM：文档对象模型——对页面中元素进行操作（下拉菜单）
• BOM：浏览器对象模型——对浏览器窗口进行操作（弹出框、控制跳转、获取分辨率）

2、JS的三种书写位置（与CSS相同）

• 行内式：写在body里
• 内嵌式：写在head的script标签里（每句结束要写“ ; ”）
• 外链式：link在以“.js”为后缀名的文件当中

外链式：将如下代码写在head里
<script src="my.js">-中间必须空着-script>

3、JS中推荐使用’单引号’

4、JS的注释

1. 单行注释：ctrl + /

//	两个斜杠写开头单行注释

2. 多行注释（块注释）：shift + alt + a

/*	两个斜杠星中间多行注释	*/

二、JS基本语法（省略了部分和C语言一致的内容）

1、输入输出语句

弹窗输入
prompt('请输入你的年龄：');

弹窗输出
alert('你都这么老了？');

控制台输出
console.log('程序员永远年轻！'); //.log是指日志

• prompt（‘弹出输入框，用户输入’）;
• alert（‘弹出警示框’）;
• 【常用】console.log（‘控制台输出，给程序员测试用’）;

2、变量

• 定义变量

var myname='弗朗基·德容';

• 定义多个变量

var a='1',b='2',c='3'; // 用逗号变量名隔开

• 变量输入输出案例

var myname=prompt('请输入你的姓名：');
alert('您就是大名鼎鼎的'+ myname +'？');

• 变量不声明直接赋值也可以使用，此时变量作为全局变量
• 变量的命名规范（与C语言类似）

var 2022year; //违规变量名；不能以数字开头
var while; //违规变量名；不能与关键字相同
var myLastName; //合法变量名；驼峰命名法，首字母小写，后面单词首字母大写

3、JS中同一变量的数据类型可以自由转换（JS为动态语言）

4、简单数据类型

• 数字前加0为八进制；加0x为16进制

5、isNaN( x )函数

• 判断非数字
• 是数字则返回false；非数字则返回true
  
  

6、字符串string

• 字符串类型可用引号嵌套：外双内单，外单内双
• 字符串 + 任何类型 = 拼接后的字符串
• 数值相加，字符相连
• 通过字符串的length属性获取字符串的长度

用str.length获取字符串长度
var str1 = "德容别去曼联";
alert(str1.length); // 显示 6

7、布尔型boolean

• true 为 1 ，false为 0
  
  

8、typeof

• typeof 检测变量数据类型

var n = 18;
console.log(typeof n); // 显示 number  

9、数据类型转换

• 转换为字符串类型（最后一种方式也被称作“隐式转换”）

用toString（）转换
var num = 10;
var str = num.toString()
console.log(str);

强制转换
console.log(String(num));

隐式转换
console(num+'字符串');

• 转换为数字型

parseInt()
var age =prompt('请输入您的年龄');
consolo.log(parseInt(age));  //数字型18
consolo.log(parseInt('6.666'));  //6取整
consolo.log(parseInt('100px'));  //100,去单位

parseFloat()
console.log(parseFloat('6.666'));  //6.666
consolo.log(parseFloat('100px'));  //100,去单位


Number(变量)
var str ='123';
console.log(Number(str));
console.log(Number('12'));  

隐式转换
console.log('12'-0);  // 12
console.log('123' - '120');  //3
console.log('123' * 1);  // 123

• 转换为布尔型（否定的值会被转换为false：如 ’ ', 0, NaN , null , undefined；其余的值都会被被转换为true）

console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('德容')); //true
console.log(Boolean(18)); //true

10、运算符

• 全等运算符===：判断两边的值和数据类型是否完全相同

console.log(18 ==='18'); //false

• 逻辑与&&：
  表达式a && 表达式b
  如果第一个表达式的值为真，则返回表达式b
  如果第一个表达式的值为假，则返回表达式a

• 逻辑或||：
  表达式a || 表达式b
  如果第一个表达式的值为真，则返回表达式a
  如果第一个表达式的值为假，则返回表达式b

11、JS断点调试

1. 在浏览器中按 F12选择源代码（sources）

2. 找到需要调试的文件然后在目标行点一下设置断点
   

3. 刷新浏览器

4. 通过watch（监视）可以看到变量值的变化【常用】

5. 按 F11可以使程序单步执行（一步一步跑）

12、JS三种流程控制结构：顺序结构、分支结构、循环结构

• 分支结构.switch语句：

switch(表达式){
  case value1:
  	 当表达式等于value1 则执行此处代码;
	 break; //如果没有break，则执行下一个case
	 
  case value2:
  	 当表达式等于value2 则执行此处代码;
     break;
     
  default:
     当表达式不等于任何一个value时执行此处代码;
}

13、JS数组

（1）数组一次可以存储多个值

• JS中数组可以存储不同数据类型的数据

var arrStus =['德容',18,false,6.66];

（2）用 new 创建（定义）数组

• 原理：利用new申请一块新的存储空间（未知大小）

创建一个空数组
var arr = new Array();

（3）数组的调用（同样与C语言类似）

var arrSta = ["巴萨","皇马","利物浦"];
alert(arrSta[1]); //下标从0开始，输出数组中的第2个元素

（4）使用“数组名.length”访问数组长度

var arrPla = ["德容","佩德里","加维"];
alert(arrPla.length);  // 结果输出3

（5）遍历数组

var arr = ["德容","佩德里","加维","巴萨","皇马","利物浦"]
for (var i = 0; i < arr.length; i++){
    alert(arr[i]);
}

• 如果不遍历，直接输出时情况如下：
  
  
  

（6）向空数组中添加元素

挑出数组中大于10的元素
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        newArr[newArr.length] = arr[i];
    } // 挑出大于10的元素排列进空的新数组
}
alert(newArr);

（7）删除指定数组元素

删除数组中的0
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){
    if(arr[i] != 0){
        newArr[newArr.length] = arr[i];
    } // 把除了0之外的元素排列进空的新数组
}
alert(newArr);

（8）冒泡排序

var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外层循环元素个数遍
    for (var j = 0; j <= arr.length - i - 1; j++){ //内层循环少一遍
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }  // 比较当前和后一个元素，前比后大不满足条件则交换位置
    }
}
alert(arr);

三、函数（省略了部分和C语言一致的内容）

1、函数：封装了一段可以被反复调用执行的代码块

2、函数的使用

（1）声明函数

声明函数
function 函数名(){
     函数体
}

（2）调用函数

3、函数的封装

• 函数的封装：把一个或多个功能通过函数的方式封装起来，对外只提供一个函数接口

4、函数的返回值return

将两个数字相加的函数
function add(num1，num2){
    return num1 + num2;
}
var numPlus = add(21,6) // 调用函数，传入两个实参，并通过 numPlus 接收函数返回值
alert(numPlus);

5、arguments

• arguments 对象中存储传递的所有实参
• 不确定传多少实参时将arguments配合数组使用

求任意多个数中的最大值
 function maxValue() {
    var max = arguments[0];
    
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;
}

console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

四、作用域

1、JS无块级作用域

if(true){
    int num = 666;
    alert(num);	// 输出666
}
alert(num);		// 不报错；输出666

2、全局变量和局部变量

五、预解析

1、自定义函数（命名函数）

function fn() {函数体} // 定义函数fn
fn(); // 调用函数fn

• 这种方法：调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2、匿名函数

var fn = function(){函数体} // 定义函数fn
fn(); // 调用函数fn；调用必须写在函数代码后面

• 这种方法：函数调用的代码必须写到函数体后面

七、对象

1、什么是对象？

• 在 JS 中，对象是一组无序的相关属性和方法的集合；例如一组字符串、数值、数组或函数等
• 对象由属性（特征；名词）和方法（行为；动词；对象中的函数）组成
  
  

2、创建对象

（1）用字面量创建对象

var star = {
    name : '德容', // 方法之间用“ , ”隔开
    age : 25,
    sex : '男',
    heartSpeak : function(){
        alert('我不想去曼联');
    } // 定义函数即对象方法，需为匿名函数；方法的命名为驼峰命名法
}

（2）用 new Object 创建对象

利用 new Object 创建对象
var obj = new Object(); // 创建一个空对象
obj.name = '德容'; // 每个属性和方法以分号结束
obj.age = 25;
obj.sex = '男';
obj.heartSpeak = function() {
    console.log('我不想去曼联');
}

调用对象
console.log(obj.name);
obj.heartSpeak();

（3）用构造函数创建对象

构造函数创建对象的语法格式
function 构造函数名() {
    this.属性 = 值;
    this.方法 = function() {函数体}
}

调用函数创建一个新对象
var dejong = new 构造函数名();

• 构造函数名首字母大写
• 构造函数不需要return
• new 构造函数名 () ：实例化；调用函数创建一个对象
• 属性和方法前加this

3、调用对象

• 对象属性的调用：对象.属性名（“ . ”可意会为“ 的 ”）
• 对象方法的调用：对象.方法名() （注意括号不能省略）

console.log(star.name) // 调用名字属性
star.heartSpeak() // 调用 heartSpeak 方法,注意，一定不要忘记带后面的括号

4、用 for … in 遍历对象

var obj = {
    name: '德容',
    age: 25,
    sex: '男',
    fn:function() { consol.log('我不去曼联！') } 
}

for(var k in obj){
    console.log(k) // 输出属性名
    console.log(obj.]) // 输出属性值
}

• 语法中变量可自定义，通常为 k 或 key

5、Math对象的使用

• Math对象不用 new 调用，直接使用即可
• 具体常见的Math对象操作如下

Math.PI		 			// 圆周率
Math.floor() 	 		// 往小取整
Math.ceil()             // 往大取整
Math.round()            // 四舍五入取整 注意：-.5的结果往大取 
Math.abs()		 		// 取绝对值
Math.max()/Math.min()	// 求最大/最小值 

6、【常用】随机数方法 random()的使用

使用random随机数方法取得一段范围内的随机整数
function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

指定一个范围
console.log(getRandom(1,10));

随机点名
var arr = ['swp', '德容','佩德里','加维']；
console.log('就决定是你了：'+arr[getRandom(0,arr.length - 1)]);

7、日期对象 Date（）方法的使用

括号里没参数则返回当前系统时间
var now = new Date();
console.log(now);

括号里有参数，则按格式返回参数时间（数字型月份返回值+1）
var data1 = new Date(2002,11,22);
console.log(data1);  // 返回的是6月而不是5月

var data2 = new Date('2002-11-22 5:2:1'); // 日期后空格隔开，时：分：秒
console.log(data2);

• 参数写法：（数字型）2019,10,1 ；（字符串型 ）’ 2019-10-1 8:8:8 ’

（1）日期格式化

var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2022
console.log(date.getMonth() + 1);  // 返回当前月份；记得月份 +1
console.log(date.getDate); // 返回当前几号
console.log(date.getDay());  // 周一-周六返回1-6；周日返回0

带0格式如 09:05:09
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

（2）获得日期总毫秒数（从1970年1月1日开始计算）

• 1970年1月1日——K.Thompson于1969年用B语言在小型计算机上开发UNIX系统，随后改进出C语言——Unix时间戳被定义，从此计算机将1970年1月1日作为计算机“纪元时间”的开始*

var date = new Date(); // 实例化Date对象，取得当前日期
console.log(date.valueOf());  //输出当前时间距离1970.1.1总的毫秒数
console.log(date.getTime());

简单写法
var date1 = +new Date();  // +new Date()返回总毫秒数，
console.log(date1);

（3）倒计时

function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000; // 剩余时间总秒数；1000ms=1s

    var d = parseInt(times / 60 / 60 / 24); // 天数
    d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); // 小时
    h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 秒
    s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-5-21 5:21:00'));
var date = new Date;
console.log(date); // 当前时间

8、数组对象

（1）创建数组对象

var newArr = [];

（2）检测是否为数组

var arr = [5, 21];
console.log(arr instanceof Array); // 返回true
console.log(Array.isArray(arr));   // 返回true

（3）删除和添加数组中的元素

var arr = [1, 2, 3];

push() 结尾加一个数组元素
arr.push(6, '结尾加一项');
console.log(arr);
console.log(arr.push(6, '结尾加一项')); // 注意：如此写法只会返回新数组的长度


unshift() 开头加一个数组元素
arr.unshift('开头加一项');
console.log(arr);

pop() 删除数组最后一个元素
arr.pop(); // 不加参数

pop() 删除数组第一个元素
arr.shift(); //不加参数

（4）排序数组

逆序数组
var arr = ['a','b','c'];
arr.reverse();
console.log(arr);

冒泡排序
var arr1 = [6,18,13,1];
arr1.sort();
console.log(arr1);

（5）查数组下标（索引号）

查找目标元素的下标并返回
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));  // 从前往后找第一个；返回2
console.log(arr.lastIndexOf('blue')); // 从后往回找第一个；返回4；

（6）数组去重

9、字符串对象

（1）字符串不可变

var str = '德容留在巴萨'; // 尽管被重新赋值，存储该内容的存储空间依然被保留
str = '德容去曼联'; // 开辟新的存储空间存储

（2）indexOf返回字符位置（字符串对象同样适用）

（3）replace方法

• replace( 被换的字符 , 要变成的字符串 )

 var str = '德容去曼联';
 console.log(str.replace('去', '不去'));

（4）split()方法（切分字符串）

（5）大小写转换 toUpperCase() || toLowerCase()

八、简单类型与复杂类型的存储原理

• 简单类型（值类型）：存储时变量中存储值本身；如string 、number、boolean、undefined、null
• 复杂类型（引用类型）：存储时变量中存储引用的地址；通过 new 关键字创建的对象，如 Object、Array、Date
• 简单类型存放到栈里；复杂类型存放到堆里
• 复杂型变量在栈空间里存放地址，而其对象实例存放在堆空间中

九、DOM

1、什么是DOM？

• Document Object Model（文档对象模型）
• HTML或XML的标准编程接口
• 通过这些 DOM 接口可以改变网页的内容、结构和样式
• 节点（node）：网页中的所有内容都是节点（标签，属性，文本，注释等）

2、获取元素

（1）如何获取元素

• 通过 ID 获取
• 通过标签名获取
• 通过H5 新增的方法获取
• 通过特殊元素获取
  
  

（2）通过ID获取

doucument.getElementByld('ID名')

<div id="time">2003-5-13</div>

<script> //采用行内式
    var timer = document.getElementById('time');
    console.log(timer); // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
</script>

（3）通过标签名获取

doucument.getElementsByTagName('标签名');

<ul>
    <li>德容会留在巴萨的1</li>
    <li>德容会留在巴萨的2</li>
    <li>德容会留在巴萨的3</li>
    <li>德容会留在巴萨的4</li>
    <li>德容会留在巴萨的5</li>
</ul>

<script>
	var lis = document.getElementsByTagName('li');
    console.log(lis[0]); // 以数组形式存储；以数组形式输出
    
    遍历输出
    for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
    }
</script>

（4）通过父元素标签获取子元素

<ol id="ol">
    <li>德容会留在巴萨的1</li>
    <li>德容会留在巴萨的2</li>
    <li>德容会留在巴萨的3</li>
    <li>德容会留在巴萨的4</li>
    <li>德容会留在巴萨的5</li>
</ol>

<script>
    var ol = document.getElementById('ol'); // 同样按照数组形式存储
    console.log(ol[0].getElementsByTagName('li')); // 必须指明单个父元素
</script>

（5）通过类名返回元素对象合集

document.getElementsByClassName('类名'); 

（6）通过指定选择器返回第一个元素对象

document.querySelector('选择器');
var firstBox = document.querySelector('.box');

（7）通过指定选择器返回选择器下的所有元素对象

document.querySelectorAll('选择器');

（8）获取body元素

document.body;

（9）获取html元素

document.documentElement;

3、事件基础

（1）事件是什么

• 触发——>响应机制
• 可以被 JS 侦测到的行为
  
  

（2）事件的三要素

1. 事件源（操作目标 / 谁触发响应）
2. 事件类型（什么事件）
3. 事件处理程序（对应的操作）
   
   

（3）执行事件的三个步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）
   
   

（4）鼠标事件

（5）简单实操（学习处理事件的代码格式）

<div class="box">点击方框</div>
    
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
       console.log('点我！');
    }
</script>

4、操作元素

• DOM 操作可以改变网页内容、结构和样式
• DOM 操作可以改变元素里面的内容 、属性
  
  

（1）改变元素内容

element.innerText = ' 变成我 '; // 去除html标签，同时空格和换行也会去掉
element.innerHTML = ' 变成我 ';

    <button>显示时间</button>
    <div class="box"></div>
    
    <script>
        var but = document.querySelector('button');
        var box = document.querySelector('.box');

        but.onclick = function() {
            box.innerText=Date();
            but.innerText='隐藏时间';
        }
    </script>

（2）改变元素属性

换图片操作
img.src = 'xxx';
img.title = 'xxx';

改变表单属性的操作
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false; // 禁用按钮；不能再被点击

（3）改变样式属性

element.style.属性名 = ' xxx ';

改变背景颜色、宽度
div.style.backgroundColor = 'pink'; // 属性名用驼峰命名法
div.style.width = '250px';

改变类名
css
.a{
    height: 100px;
    width: 100px;
    background-color: pink;
}
.change{
    height: 100px;
    width: 100px;
    background-color: orange;
}

<body>
    <div class="a"></div>
    
    <script>
        var box = document.querySelector('.a');

        box.onclick = function() {
            this.className='change'; // this.指向当前事件函数的调用者
        } 
    </script>
</body>

（4）排他操作

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        var btns = document.getElementsByTagName('button'); // 以伪数组形式存储
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
             
             	// 把所有的按钮背景颜色去掉（干掉所有人）
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                
                // 让当前的元素背景颜色为pink（留下我自己）
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

5、下拉菜单制作

html+js部分
<body>

<nav id="nav">
    <ul class="n">
        <li>
            <a href="#">巴萨</a>
           <ul>
               <li><a href="">德容</a></li>
               <li><a href="">佩德里</a></li>
               <li><a href="">加维</a></li>
           </ul>
        </li>
        
        <li>
           <a href="#">皇马</a>
           <ul>
               <li><a href="">莫德里奇</a></li>
               <li><a href="">卡塞米罗</a></li>
               <li><a href="">克罗斯</a></li>
           </ul>
        </li>
        
        <li>
           <a href="#">曼城</a>
           <ul>
               <li><a href="">罗德里</a></li>
               <li><a href="">德布劳内</a></li>
               <li><a href="">B席尔瓦</a></li>
           </ul>
        </li>
    </ul>
</nav>

 <script>
     var n=document.querySelector('.n')
     var lis = n.children;
     
     for(var i=0;i<lis.length;i++){
         lis[i].onmouseover=function(){
            this.children[1].style.display='block';
         }
         
         lis[i].onmouseout=function(){
            this.children[1].style.display='none';
         }
     }
 </script>
</body>

css部分
*{
    margin: 0;   
    padding:0;
}
    
    #nav{/*设置父盒子高度、宽度、背景颜色；使盒子水平居中*/
    background: #eee;
    width: 600px;
    height: 40px;
    margin: 0 auto;
    }
    
    #nav ul{/*去掉ul的li前面的圆点*/
    list-style: none;
    }
    
    #nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
    float: left;
    line-height: 40px;
    text-align: center;   
    position: relative;/*给子ul元素定位用的*/
    }
    
    #nav ul li a{/*去下划线,变块继承父容器高度，撑开宽度*/ 
    text-decoration: none; 
    color:#000;   
    width: 100px;
    padding:0 20px;
    display: block;   
    }
    
    #nav ul li a:hover{
    color: #fff; 
    background-color: #666;
    }
    
    #nav ul li ul {
    position: absolute;/*子ul相对于父li定位*/
    left: 0;
    top:40px;
    display: none;
    }
    
    #nav ul li ul li{
    float: none;
    background-color:#eee;
    }

七、参考链接

参考1：JavaScript基础大总结(一)

参考2：JavaScript基础之函数与作用域(二)

参考3：JavaScript基础之对象与内置对象(三)

参考4：JavaScript进阶之DOM技术(四)

参考5：【重要】JS手册