JavaScript学习笔记-CSDN博客

本文链接：https://blog.csdn.net/chenqianblog/article/details/54687045

JavaScript基础知识

===================================================================================

JavaScript基础：

功能：在浏览器端能使网页与用户显示一定的动态效果

属性：是一种嵌入式的客户端脚本语言

JavaScript在实际的开发过程中是基于对象的也是面向对象的

Javascript构成：

核心：ECMAscript

文档对象模型：DOM

浏览器对象模型：BOM

Javascript结合方式：

在head标签中添加JS代码：

        <head>
            <title>JS结合方式</title>
            <script type="text/javascript">
                alert("HelloWorld");   //这里会弹窗显示HelloWorld
            </script>
       </head>

在head标签中引入JS代码：<script type="text/javascript" src=""></script>

注意如果即想要引入外部文件又想要在本页页面中书写JS代码需重写一个<script>标签

JS外部文件的扩展名为.js 直接写JS代码：alert()等

ECMAscript语法基础：

JS区分大小写

JS中每行语句结束可使用;来表示也可以不使用;来表示，最好加上;

注释写法：与java一致但没有java中的文档注释

声明变量：

用例：var a = 1; a = "hello"; a = false

语法：JS是一种弱类型语言，不需要声明变量的类型，变量的类型是可以随时变化的

可同时声明多个变量：var a=2，b=3;

在JS中声明变量也可以不使用var，加var声明的作用范围在代码块中，不加var声明作用范围全局

数据类型：

整体：原始类型、对象类型

内存：分为堆内存和栈内存，原始类型在栈内存中，对象类型的引用存放在栈内存中，真实对象在堆内存

中

原始：number类型、string类型、boolean类型、null类型、undefined类型

number类型：不分整形和浮点型，NaN表示错误的数字（Not a Number）

boolean类型：true、false

nulll类型：对象类型的占位符，为未来的对象引用做准备，通常人为赋值

undefined：null的衍生值，为定义的为初始化的，通常是系统自动赋值，当创建变量但未初始化时

对象：object对象

object对象是所有对象的父类

toString();当打印时均调用此方法

function对象：

创建：function fun1(){}、var fun2 = function(){}、var fun3 = new function("alert("hellp");");

属性：toString()打印函数的定义、length()打印函数参数的个数、

类型：使用关键字typeof可返回变量的原始类型：alert(typeof a)

注意：typeof null类型会返回一个object，因为null意味着对象类型的占位符

运算符：

语法：常规运算符与Java语法中的一样

语法：=== 全等于，附加变量所属的数据类型一同比较

语法：void()拦截方法的返回值：<a href="javascript:void(fun1(a,b));"></a>

<a href="javascript:void(0)"></a> 彻底废除掉a标签的功能，让a标签变成一个按钮，以便添加事件

类型转换

字符串 → 数字：在数字前加上+、parseInt、parseFlaot、var num1 = new Number(str);

数值型 → 布尔型：除了0其余均为真

字符串 → 布尔型：string不为空则均为真

注意事项：

如果一个+当中包含字符串会自动转换为字符串类型，其他数学运算符会转换为数字运算

当使用关系运算符比价两个字符串时则比较ASCII

NaN == NaN 不相等

流程控制：

判断：if 语句，switch语句

循环：while语句、do while()语句、for语句

函数语法：

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

函数调用：在JS中直接通过函数名调用：函数名();

在HTML标签嵌入：<a href="javascript:alert('HelloWorld');">点我</a>

在

函数参数：function fun1(a,b){alert(a+b);} fun1(1,2);

函数返回：return关键字，与java一样，return也可以结束方法的调用

注意事项：JS的函数调用只看函数名称，不看函数参数是否符合函数定义的规定

function fun1(){

alert(arguements.length);

}

function(1,2,3,4);

//这里arguements是函数运行时参数的封装，length属性为打印函数参数的个数

//通过arguements打印传入参数的累加值：

var count = 0;

for (var i = 0; i < arguments.length;i++){

count += arguments[i];

}

alert(count);

函数体行的返回值如果没有，那么一个函数返回的类型为undefined类型

JS对象三大包装类：

概念：JS中五个原始类型有3个包装类：Number、String、Boolean

JS中有伪对象的概念，可直接用原始类型调用包装类型的属性或函数

语法：String包装类：

创建：var str = new String(); 在String类型的构造函数中可以填写任意类型的数据

属性：length：字符串的长度

方法：charAt

substring

indexOf

lastIndexOf

split 分割

replace 替换

match 匹配并获得

search 查找索引

toLowerCase

toUpperCase

instanceof运算符：

功能：用于判断对象的运算符是否符合某种类型

用例：alert(str instanceof String);

注意：在这里仅仅针对对象，不包括伪对象

Global对象：

概念：不需要创建实例而使用其功能，类似于Java中的类方法直接通过名称调用

方法：encodeURL/decodeURL：

功能：encodeURL：中文字符串 → 英文16进制码表

用例：encodeURL("文件");

功能：decodeURL：英文16进制码表 → 中文字符串

用例：decodeURL("%E%A%W%Q");

encodeURLComponent/decodeURLComponent：

功能：与上边的功能相似，只不过此处转换的范围更大，将整个URL进行转换，包括参数分隔符

parseInt：

功能：转换成整数方法

注意：将字符串转换为整数型，从左到右直至转换到不能转换为止

如果所传的字符串为浮点型，那么将只是截取整数的部分

parseFloat：

功能：转换成浮点数方法

用例：parseInt("123");

isNaN：

功能：判断一个值是否是NaN

eval：

功能：解析运行方法，将传入的参数解析运行

用例：eval("1+1"); 打印的结果为2

Math对象：

功能：提供一些常见的数学方法

属性：E

方法：abs(x) 返回指定参数的绝对值

random：

功能：返回一个随机数

用例：Math.random();

round：

功能：四舍五入方法

pow：

功能：计算幂方法

用例：Math.pow(2,2);

min：

功能：返回最小数

用例：Math.min(1,2,3);

max：

功能：返回最大值

用例：Math.max(1,23,3);

Array数组对象：

功能：表达数组以及提供了一些针对于数组的方法

创建：var arr1 = [1,2,3];

var arr2 = new Array(1,2,3,4);

var arr3 = new Array(4); //如果构造函数只传递一个参数且其值为数值，则为指定数组的长度

属性：length：数组的长度

方法：pop

功能：弹栈，将0索引的变量移除并返回

push

功能：压栈，将一个值放入数组的0索引

注意：栈是先进后出的

reverse

功能：将数组反转

注意：调用此方法后会改变数组的真实顺序，操作的是数组本身

sort

功能：排序

注意：升序排序

默认会按照字符串比较方式排序而不是数字方式排序！

sort方法可以传入一个比较器：

function fun1 abc(a,b)

{

return a-b;

}

arr.sort(fun1);

注意：数组中元素的内容可以任意：var arr = ["haha",2.14,true];

数组的长度是可以随时变换的

数组的下标从0开始

Data对象：

功能：提供日期时间等功能

创建：var date = new Date();

var data = new Date(毫秒值);

方法：getFullYear(); 获取年份

getMonth(); 获取月份

getHours();小时

getDate();日期

getMinutes();分钟

getSeconds();获取秒数

getTime();获取毫秒值

getLocaleString();获取本地时间字符串

RegExp正则表达式对象：

功能：使用正则表达式匹配或查找字符串，表单验证

创建：var reg = new RegExp("e","gi");

参数1：正则表达式

参数2：匹配模式：g：全局 i：忽略大小写

var reg = /e/g;

方法：test

功能：教研字符串是否能与正则表达式相匹配

用例：正则表达式对象.test(待测试的文本);

BOM部分知识：

概念：浏览器对象模型

功能：将浏览器中的各个组件封装成对象，可以使用这些对象操作浏览器的一些动作

组成：Windows对象、location对象、history对象、screen对象、navigator对象、

Windows对象：

概念：窗口

属性：frames：

opener：

parent：

用例：两个页面之间互相通信：获得其他页面的windows对象

假设有4个窗口，分别为a，b，c，d 其中a最大

c.parent.frame[2] //在C中获得D的windows对象

假设由a打开b窗口：b = a.open();可获得Windows对象

在b中通过使用Windows.opener可获得a窗口windows对象

注意：一个框架集有多个窗口，包括最外边的大窗口

方法：获得Windows对象：

概念：Windows对象是由浏览器加载页面时浏览器会立刻自动创建Windows对象

语法：如果要获得直接使用即可

用例：windows.

alert(windows);

alert：

confirm：

功能：弹出一个确认框

语法：confirm();

返回：true 、false

用例：var b = confirm("你确定要删除吗？");

alert(b);

prompt:

功能：弹出一个输入框

语法：prompt(参数1，参数2);

参数1：框的提示

参数2：框中的默认值

返回：返回用户输入的值，类型为字符串型，如果点击取消返回的是null

open：

功能：打开一个新的窗口

语法：windows.open(参数1，参数2，参数3，参数4);

参数1：资源文件 "../猜数字.html"

参数2：新打开窗口的名字

参数3：描述窗口特征，例如宽度、高度等

参数4：布尔值类型，作用不大，是否将新打开的地址加入到浏览器的历史记录中

返回：返回的是一个新打开的windows窗口对象

close：

功能：关闭当前窗口

语法：windows.close();

定时器：

功能：设定执行指定间隔时间重复的操作

语法：setInterval(参数1，参数2)

功能：设定定时器

属性：参数1：可封装JS代码，或者function对象

参数2：可指定每次指定间隔的时间

用例：windows.setInterval("alerta('abc');",2000);

返回：当前开启定时器的ID

clearInterval (参数1);

功能：清除定时器

属性：参数1：指定需要关闭指定计时器的ID值

setTimeout/ clearTimeout：

语法：与设定定时器与清除定时器语法相同

功能：参数2毫秒后，执行参数一代码(只执行一次)

Location对象：

概念：把浏览器的地址栏封装成对象

功能：href

功能：前往指定的页面

assgin

功能：

history对象：

概念：把浏览器的历史记录封装成对象

功能：back

功能：后退

用例：Windows.history.back();

forward

功能：前进

功能：转向指定的地址

语法：参数1: 0 当前页面、1 前进、 -1 后退

screen对象：

概念：把屏幕信息封装成对象

功能：详情参见W3C

Navigator对象：

概念：将浏览器信息封装成对象

功能：详情参见W3C

DOM理论知识：

概念：文档对象模型

功能：可以通过操作对象来控制页面中的内容

本质：将文档中的所有内容封装成对象、DOM树

对象：Document、Element、Text、attribute、Common

Document：

概念：文档对象

Element：

概念：元素对象

Text：

概念：文本对象

Attribute：

概念：属性对象

Common：

概念：注释对象

注意：这五种对象都是node节点对象

导航属性：

概念：DOM导航

功能：parentNode、fristChild、lastChild、

DOM对象基本：

获得：windows.document

用例：var doc = windows.document;

Element对象获得：

标签名称：document.getElementsByTagName("div")[0]; //获得页面中的所有div标签，返回一个数组

通过ID获得：document.getElementById("one"); //需要修改HTML代码，指定其id值

通过class获得：document.getElementsByClassName()[0];

通过name获得：document.ElementsByName("")[0];

事件：

添加方式：

使用标签选择器：var one = document.getElementById("one"); one.onclick = function(){}

直接在HTML标签中书写JS代码：

常见事件句柄：

单击鼠标：onclick

失去焦点：onblur

得到标点：onfocus

内容被改变：onchange

某键被按下：onkeydown

某键被按下并松开：onkeypress

某键被松开：onkeyup

Event事件：

用例：var key =event.keyCode(); if(key==13){}

属性：clientX、clientY：鼠标指针的水平坐标和垂直坐标

onload事件：

概念：当页面加载完成时触发

用例：<body οnlοad="alert('haha');">

鼠标事件：

语法：onmousedown

onmouseup

onmousemove

onmouseout

onmouseover

用例：one.onmousedown = function(){}

更多事件句柄请访问W3C

注意：DOM的所有对象会在页面打开时由浏览器负责创建

浏览器把DOM的定点对象Document对象的引用交给了Windows对象

欢迎指出错误和不足

JavaScript学习笔记

“相关推荐”对你有帮助么？