JavaScript学习笔记

一、简介

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

我的第一个JavaScript程序：

我的第一个 JavaScript 程序
这是一个段落

显示日期

1.为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门：

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为
  JavaScript 是脚本语言

2.JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

---

一、JS的概念和声明

问题

在网页的发展历程中，发现网页不能对用户的数据进行自动校验和提供一些特效，造成用户体验极差。

解决

使用JavaScript

作用

可以让网页和用户之间进行直接简单的交互

可以给网页制作特效和画面

注意

js是由浏览器解析执行的

js需要在HTML文档中进行声明

使用

声明js代码域

1. 在head标签中使用script声明js代码

2. 在head标签中使用script引入外部声明的js文件

二、JS的变量学习

作用：变量是用来存储数据的，方便程序进行操作

1.js的变量声明

使用var关键字进行变量声明，格式如下

var 变量名=初始值；

2.js变量的特点

1. 变量声明只有var关键字，声明的变量可以存储任意类型的数据
2. js中可以不使用分号结尾，但是为了提升代码的可读性，建议使用
3. 允许出现同名变量，但是后面的会覆盖前面
4. 声明不赋值，默认是undefined

3.js的数据类型

使用关键字typeof判断数据类型

number:数值类型

string:字符类型

boolean:布尔类型

object:对象类型

4.js的变量强转

使用Number（）方法，将其他数据类型转换为数值类型，转换失败返回NaN（not a number，是number类型）

使用Boolean（）方法，将其他数据类型转换为布尔类型，有值为true，无值为false

​

5.特殊的值

null（object类型）

undefined（undefined类型）

NaN（number类型）

三、JS的运算符

算数运算符

​ 加法：+，在有一方为字符串时，结果为字符串

​ 减法：-

​ 乘法：*

​ 除法：/

​ 取余：%

除了+在遇到字符串时会默认字符串拼接，其余符号遇到非数字会进行隐式类型转换为数字再运算

逻辑运算符

1 与或非

！

&&

||

按位与

按位或

2 关系运算符

++

--

+=

-=

！=

>=

<=

等等

1.==

    
    
        
计算器
        

        

            

            
            
            
            
            

            
            
            
            

            
            
            
            

            
            
            
            
        
    

6.数组的常用操作

1).数组合并---concat

2).数组转字符串---join

image-20200127182120202.png

image-20200128161530066.png

3）pop（）、shift()

将数组视为栈，弹栈操作，移除数组最后一个元素并返回该元素

shift()与之相反，将数组视为队列，进行出队操作

var arr=[1,"abc","zhangsan","12"];
var ele=arr.pop();//ele="12"

4) push()、unshift()

将数组视为栈，压栈操作，在数组最后追加一个元素或者多个元素并返还数组长度

unshift（）与之相反，将数组视为队列，进行入队操作

注意：如果追加的是一个数组，新数组整体作为旧数组的一个元素。

从中可知JavaScript的数组是链式结构。

5）reverse()

将数组颠倒，同时返回该数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：

//Mango,Apple,Orange,Banana

6）sort（）排序方法

array.sort(sortfunction)

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

Type	描述
Array	对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序，你必须通过一个函数作为参数来调用。

7)splice，从中间删除或插入

语法

array.splice(index,howmany,item1,.....,itemX)

参数 Values

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

返回值

Type	描述
Array	如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

注意，可以删除0个，返回空数组

8）toString、valueOf

image.png

valueOf（）定义和用法

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

注意： valueOf() 方法不会改变原数组。

六、JS的函数

js的函数学习一：

作用：功能代码块的封装，减少代码冗余

1 函数的声明：

方式一

function函数名（形参名1，形参名2，...）｛执行体｝

方式二

var 函数名=new Function（“形参1”，“形参2”，...，“函数体”）；

该种方式中，将函数作为一个类，new了一个函数对象，如使用类型强转为字符串，可以发现该字符串与方式一相同。

只不过该种方式声明的函数名调用函数时，调用的是对象内的anonymous函数

var test2=new Function("a1","a2","alert('I'm function2')");
test2(1,2);

方式三

var test3=function(a1,a2){
    alert("I'm functon3");
}

2 函数的参数

function testParam(a1,a2){
    alert("I'm learning Param")
}
testParam();//正确，有初值undefined

js中的函数在调用时，形参可以不赋值，也可以少赋值（实参依次赋值）或者多赋值
因此js中没有函数重载

3 函数的返回值

默认返回值是undefined

注意:js的代码声明趋于和执行区域是一起的，都是在js代码域中

函数学习二

1 函数的执行符

var test1=function(){
    alert("函数的执行符学习")；
    return "js";
}
alert(test1);//不执行test1，打印test1的内容
alert(test1());//执行test1，打印test1返回值的内容

在js中函数的执行符就是小括号

没有小括号时函数名就是一个变量

2 函数作为实参传递

image.png

image.png

在js中函数是可以作为实参进行传递的。

上图中a加上（）则显示返回值undefined

3 开发中常用的传递方式⭐

function testObj2(fn){
    //testObj2函数在被调用的时候，实参必须是一个函数对象
    fn();
}
testObj2(function(){
    alert("开发");
})

优点：函数对象的动态执行，不用预先声明好，调用时传入即可

七、JS的自定义类

1、类的声明

function Person(name,age){
    this.name=name;
    this.age=age;
    this.fav="sing";
    this.test=function(a){
        alert(a);
    }
}

2、类的使用

var p1=new Person("zhangsan",32);
alert(p1.name,p1.age);
p1.test("hello");//等于alert（“hello”）
p1.adress="beijing";//正确用法

3、类的“继承”

var p2=new Person("lisi",23);
alert(p1.test===p2.test);//false

function Person(name,age){
    this.name=name;
    this.age=age;
    this.fav="sing";
    
}
........
........
Person.prototype.test=function(a){alert(a);}//共有
alert(p1.test===p2.test);//false

prototype关键字

通过该关键字实现了不同对象之间的数据共享

作用

1. 实现某个类的所有子对象的方法区对象的共享，节省内存

2. 伪继承（可以链式继承-----）

   function User(uname,pwd){
       this.uname=uname;
       this.pwd=pwd;
   }
    Person.prototype.user=new User();
    User.prototype.testU=function(){alert("我是user")};
    p1.user.testU();//可以通过p1对象调用testU方法了
   

   Person.prototype=new User();
   p1.prototype.testU();
   

4、自定义对象

1）创建自定义对象

对象的作用：用来存储整体数据

原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时创建一个对象来自定义属性存储数据，来保证数据的完整性。

应用：

​ Ajax会使用

使用：

​ 1、创建自定义对象

​ var 对象名=newObject（）；

​ 对象名.属性名1=属性值1；

​ ...

​ ...

---

​ var 对象名={};

​ 对象名.属性名1=属性值1；

​ ...

​ ...

​ 2、一般用来存储数据，不会再自定义对象中存储函数对象

​ 3、js中的对象属性和内容是可以自定义扩充的，不是依赖于类的声明的，类知识对象公共部分的一种声明，是为了节省代码的冗余的。

var obj=new Object();
obj.name="zhangsan";
obj.age=23;
obj.test=function(){
    alert("我是obj");
}

5、js的常用方法和对象

作用：js将常用的功能已经封装好，调用即可，不用重复封装。

String

操作字符

function testString(){
    var str="abcdefg";
    //1.大小写转换  
   alert(str.toUpperCase()+":"+str.toLowerCase());
    //2.字符串截取
    alert(str.substr(0,1));
    //substr:返回一个从指定位置开始的指定长度的字符串，参数为start，length：从start开始要截取的长度
    //substring:返回位于string对象中指定位置的字符串，参数为start，end：字符串的结束位置
    //3.查找字符位置
    indexOf  返回指定字符第一次出现的位置
    lastIndexOf  返回指定字符最后一次出现的位置
}

Date

需要先 var 变量名=new Date（）；

//Date对象
function testDate(){
    //创建日期对象
    var d=new Date();
    alert(d);//隐式调用toString方法，显示当前时间
    //操作日期和时间
        //1 获取年份
        alert(d.getYear());//返回1900年距今的年数
        alert(d.getFullYear());//返回当前的年份
        //获取月份
        alert(d.getMonth()+1);//获取当前的月份数（从0算起），注意+1
        //获取日期
        alert(d.getDate());//返回当前的日期
        //获取星期几的数字
        alert(d.getDay());//返回星期数。星期天是0
        //获取小时数
        alert(d.getHours());//返回小时数
        //获取分钟数
        alert(d.getMinutes());//返回当前的分钟数
        //获取秒数
        alert(d.getSeconds());//返回当前的秒数
}

js获取的时间是客户端的时间，不能作为功能校验标准

Math

使用：Math.函数名

function testMath(){
    //随机数字
    alert(Math.random());//数值在0-1之间
    //四舍五入
    round()
    //上下取整
    ceil()
    floor()
    //
    //
    //
}

Global

global对象是一个固有对象，目的是把所有全员方法集中在一个对象中

global对象没有语法，直接调用其方法

//eval方法,直接把参数作为方法执行
eval("var a=123;");//等于声明了一个变量a
//isNaN方法。返回一个布尔值，指明提供的值是否值得保留至NaN（不是数字），如果参数用Number强转后是NaN，返回true
//parseInt,返回字符串转换后得到的整数
parseInt("abc");//返回NaN
parseInt("12abc");//返回12
//parseFloat同理

八、Js的事件机制学习：

作用：根据用户在网页中的不同操作触发执行对应的功能函数

概念：基于监听的，一个动作会触发其他事物的执行

使用：

单双击事件：

单击事件

注：

​ js中添加事件的第一种方式

​ 在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数

​ js中的事件只有在当前HTML元素上有效

​ 一个HTML元素可以添加多个不同的事件

​ 一个事件可以监听触发多个函数的执行，不同函数之间用分号隔开

双击事件

ondblclick

鼠标事件

onmouseover() 鼠标悬停事件

onmousemove() 鼠标移动

onmouseout() 鼠标移出

键盘事件

onkeyup 键盘弹起事件

onkeydown 键盘下压事件

焦点事件

onfocus 获取焦点事件

onblur 失去焦点事件

页面加载事件

onload 页面加载事件

值改变事件

onchange

事件机制学习2

1.给合适的HTML标签添加合适的事件

onchange-----给select下拉框

onload-----给body

单双击-----用户会进行点击动作的HTML元素

鼠标事件----用户会进行鼠标移动操作的

键盘事件-----用户会进行键盘操作的HTML元素

2.给HTML元素添加多个事件时，注意事件之间的冲突

例如单双击事件会冲突

当事件的触发条件包含相同部分的时候会产生事件之间的冲突

3.事件的阻断 ⭐

function testA(){
    return false;//此时不再跳转
}
---
wwwwww

当事件所监听的函数将返回值返回给事件时

​ false将阻断当前事件所在的HTML标签的功能

​ true将继续执行当前事件所在的HTML标签的功能

4.超链接调用js函数

function testHref(){
    alert("onactive");
}
----
aaaaa

九、window对象

bom浏览器对象模型

​ 浏览器的内核语言支持规范

是规范浏览器对js语言的支持（js调用浏览器本身的功能）

BOM的具体实现是window对象

window对象学习

window对象不用new，直接使用即可，累死Math的使用方法，window关键字可以省略不写

1.window对象的常用方法

1）.框体方法

------

2）.定时和间隔执行方法

setInterval

image.png

clearTimeout 停止当前的定时方法，参数为定时器id

clearInterval 停止当前的间隔方法，参数为间隔器id

3）.子窗口方法

image.png

分别是子页面相对路径、打开方式、高、宽、距上距离、距左距离、工具栏、菜单栏、滚动条、大小是否可变、地址栏、状态栏

---

<--!以下是son.html-->


    
        
        
        
        
        
    
    
        
son页面
        

        本页面5秒后关闭
    

2.子页面调用父页面的函数

子页面中使用window.opener.函数名()；即可调用父页面函数

作用：可以从子页面返回信息给父页面，并且刷新父页面

3.window对象的常用属性

地址栏属性location

window.location.href="http://www.baidu.com";跳转到指定网址

window.location.reload();重新刷新

历史记录属性

window.history.forward();//前进
window.history.back();//页面资源后退
window.history.go(index)；//跳转到指定的历史记录资源，//index=0相当于刷新当前页面

屏幕属性

var x=window.screen.width;

var y=window.screen.height;

浏览器配置属性

var a=window.navigator.userAgent;

获取浏览器信息

十、主体面板属性（document）

document对象学习

1.document对象的概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息

2.使用document对象

1）获取HTML元素对象对象

①直接获取方式

id getElementById 返回值是该元素对象

name getElementsByName 返回值是一个名叫NodeList的对象数组

通过标签名 getElementsByTagName 返回值是一个名叫HTMLCollection的对象数组

class getElementsByClass 返回值是一个名叫HTMLCollection的对象数组

返回值都是元素对象

②间接获取方式

父子关系

​ 标签内有标签

var showdiv=document.getElementById("showdiv");
var children=showdiv.childNodes;//返回值为NodeList数组

子父关系

var inp=document.getElementById("inp");
var div=inp.parentNode;

兄弟关系

var ino=document.getElementById("inp");
var preEle=inp.previousSibling;//前一个
var nextEle=inp.nextSibling;//后一个

2）操作HTML元素对象的属性

先获取元素对象

再操作元素属性

var inp=document.getElementById("uname");
alert(inp.type+":"+inp.name);//id,value等属性

//修改元素属性
inp.value="aaa";
inp.type=button;//type属性为空或一个错误的值时，浏览器默认解析为text

可以操作元素的自定义属性

需要使用set、get方法

例如 abc属性

image.png

该方式获取不到

image.png

该用

alert(inp.getAttribute("abc"));
inp.setAttribute("abc","新的值");

当使用set、get方法来获取固有属性时，设置可以成功，但是get只能拿到document内的属性的初试值，拿不到实时数据

3）操作HTML元素对象的内容和样式

innerHTML获取元素对象内所有内容，包括HTML标签

innerText获取元素对象内所有文本内容，不包括标签

---

修改

var div=document.getElementById("div01");

div.innerHTML="ssssss";

---

操作元素样式=操作元素属性

//添加、修改、删除样式
var shoudiv=document.getElementById("showdiv");
showdiv.style="backgroud-color:red";//这叫覆盖，只剩背景颜色属性了
showdiv.style.backgroudColor="red";
showdiv.style.border="solid 2px red";
showdiv.style.border="";//置空等于删除元素标签的属性，但不会删除css内的属性

//修改类选择器
//class关键字在document类中叫className
var div01=document.getElementById("div01");
alert(div01.className);//为元素标签的属性值
div01.className="";

4）操作HTML的文档结构

增加节点

删除节点

第一种方式：使用innerHTML

function testAdd(){
    var showdiv=document.getElementById("showdiv");
    showdiv.innerHTML+="

    ";
}
function delInp(btn){
    //获取父级div
    var showdiv=document.getElementById("showdiv");
    var cdiv=btn.parentNode;
    showdiv.removeChild(cdiv);
}

image.png

不太适用于有用户动作的时候

第二种方式：

function testOperation2(){
    var showdiv=document.getElementById("showdiv");
    var inp=document.createElement("input");
    inp.type="file";
    var btn=document.createElement("input");
    btn.type="button";
    btn.value="删除";
    btn.onclick=function(){
        showdiv.removeChild(inp);
        showdiv.removeChild(btn);
        showdiv.removeChild(br);
    }
    var br=document.createElement("br");
    showdiv.appendChild(inp);
    showdiv.appendChild(btn);
    showdiv.appendChild(br);
}

image.png

5）document操作Form元素

function testform(){
    var fm=document.getElementById("fm");
    alert(fm);
    var frm=document.frm;
    alert(frm);//这两个相等
    
    
}
//获取form表单元素对象
fm.elements;//只获取表单元素，其余标签不在里面


form表单的常用方法
fm.submit();//等于提交
fm.reset()；

fm.action="http://www.baidu.com/s";

js表单元素的通用属性
只读   readonly
通用   disabled

操作多选框:

    
        
        
            
        
    
    
        
操作表单元素
        

        操作多选框


        远走高飞

        当

        李白

        杜甫

        see you again

        fade

        
        
    

操作下拉框

            --请选择--
            北京
            上海
            广州

6）document操作表格

rowIndex 返回行对象角标

deleteRow（要删除的行对象的角标）

insertRow

insertCell

7）document对象实现form表单校验

获取信息

创建校验规则（正则表达式）

开始校验

输出校验结果

例子

image.png

onblur=“checkUname（）” //失去焦点时触发函数