JavaScript基础使用

最新推荐文章于 2021-06-16 21:10:05 发布

海波booy

最新推荐文章于 2021-06-16 21:10:05 发布

阅读量1.3k

点赞数 1

分类专栏： WEB前端文章标签： js javascript web

本文链接：https://blog.csdn.net/booy123/article/details/106332016

版权

WEB前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

组成部分：
ECMAScript：描述了该语言的语法和基本对象。
文档对象模型（DOM）：描述处理网页内容的方法和接口。
浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。

ECMAScript

入门程序

三种输出显示方式：
1、alert();弹窗输出显示
2、document.write();页面输出显示
3、console.log();控制台输出显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>javascrit入门</title>
	</head>
	<body>
        <script type="text/javascript">
            //alert("hello world");//弹出窗口显示
            document.write("hello world");//页面中显示
            console.log("hello world");//控制台显示
        </script>
     </body>
</html>

JavaScript中的注释有两种：

单行注释//
多行注释/* ... */

JavaScript的三种使用方式

第一种方式：在script标签中，script可以放在网页中任何位置。

<script type="text/javascript">
  	var num=10;
	var d=new Date();
	document.write(num);
</script>

第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中，这个文件的扩展名.js，原则上放body底部，流式加载失败不会影响网页展示样式，让页面样式先加载提高页面打开速度。

<script type="text/javascript" src="js/myjs.js"></script>

第三种方式：放在标签中的事件属性中,常见事件 ,onclick，一般用于简单的事件

<input type="button" value="我点我点我点" onclick="alert('好痛啊！')" />

变量声明

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。

var num; //声明变量
num=10;//赋值

var s="zhangsan";//声明的同时赋值

var是声明关键字，语句以分号结尾，分号可以省略。

这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。

JavaScript的关键字和保留字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

数据类型

基本数据类型

变量的基本类型有number、string、boolean、undefined、null五种。

定义数字Number类型

var a=1;

定义字符串string类型

var a="字符串";

定义布尔boolean类型

var a=false;

undefined类型：当一个变量未被初始化的时候，它的值为undefined

var a;

在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。

null类型：当一个引用不存在时，它为Null

引用（对象）类型

Object ，数组，自定义对象，function

创建引用类型对象：

    //创建对象
    var person = new Object();
    //动态添加类型
    person.name="jack";
    person.show = function(){
        document.write(this.name);
    }
    person.show();//jack
    document.write("<br />");
    var num = new Number(100);
    document.write(num);//100
    document.write("<br />");
    document.write(typeof(num));//object
    document.write("<br />");
    document.write(num instanceof Number);//true
    document.write("<br />");

创建自定义对象

function student(){
        this.stuNo;
        this.stuName;
        this.show=function(){
            document.write(this.stuNo+"----"+this.stuName);
        }
    }
    var stu = new student();
    stu.stuNo="001";
    stu.stuName="bom";
    stu.show();//001----bom

自定义对象json写法：

    var stu2 = {id:'002',name:'binry',age:20};
    document.write(stu2.id+"----"+stu2.name+"----"+stu2.age);//002----binry----20

数组类型

js中的数组长度是动态不固定的，预先可设定长度，也可不设定长度
数组先定义再赋值

var cities=new Array(3);
cities[0]="jack";
cities[1]="bin";
cities[2]="booy";

数组直接定义赋值

var a=[1,2,3,4];

运算符

算术运算符

+、-、*、/、%、++、–

var a=1;
var b=2;
a+b;//相加
a-b;//相减
a*b;//相乘
a/b;//相除
a%b;//求余

a++;//自增
b--;//自减
//上述规则和Java一样。

赋值运算符

=、+=、-=、/=、*=、%=

var a=10;
var b=20;
a=b;//赋值
a+=b;//相加后赋值
a-=b;//相减后赋值
a/=b;//相除后赋值
a*=b;//相乘后赋值
a%=b;//求余后赋值

逻辑运算符

与、或、非

&&、||、!

对于真假的boolean值可以进行三种逻辑命题的运算。

var a=false;
var b=true;
//非的逻辑
//!a->true;
//!b->false;
//与的逻辑
//a&&a->false;
//a&&b->false;
//b&&a->false;
//b&&b->true;
//或的逻辑
//a||a->false;
//a||b->true;
//b||a->true;
//b||b->true;

关系运算符

==相等

<小于

<=小于或等于

>大于

>=大于或等于

!=不等于

===全相等

var a=1;
var b=2;
//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false
//这里三个等于“===”和两个等于“==”区别：
//前者相当于比较两个引用，后者相当于比较两个值。
//当比较两个值得时候，不考虑数据类型。
//也就是说1=="1"是true的。

字符串连接运算符

三目运算符

分支结构

if-else

if(true){    
}else{
}

1 if(条件表达式) 关系运算符逻辑运算符
2 if(变量) 直接写变量，不用运算符，如果变量值为undefined,null 表示false，否则true
3 如果变量没有定义,则出现异常。

switch

switch(定值){
  case 1:
    break;
  case n:
    break;
  default:
     ;
}

循环结构

for循环

var a=0;
for(var i=0;i<=10;i++){
    a+=i;
}

while循环

var a=0;
var i=1;
while(i<=10){
   a+=i;
   i++;
}

do…while循环

var a=0;
var i=1;
do{
    a+=i;
  	i++;
}while(i<=10);

break与continue

可以使用break结束循环，用continue来结束本次循环。

增强for循环
注意： i不是arr中的元素，而是下标

for(var i in arr){
}

函数和事件

函数

包含一段功能的代码。目的：重复使用

函数定义
用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。

function functionName(parameters){
    //执行的代码
}

匿名函数

var method1=function(){
document.write("这是一个匿名函数");
}
method1();

自执行匿名函数

(function(s){
document.write("这是一个自执行匿名函数"+s);
})("hahaha");

全局变量和局部变量

函数内部声明的变量是局部变量,所以只能在函数内部访问它。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

闭包（Closure）

闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。

闭包三个条件：
1、闭包是一个内部函数
2、闭包能够读取其他（外部）函数的局部变量
3、闭包和局部变量在同一个作用域。

使用形式：
1、闭包作为函数的返回值；
2、闭包作为函数的参数。

闭包好处：
1、使局部变量常驻内存，
2、避免污染全局变量
3、提高封装性保护局部变量

系统函数

提示框 alert();

alert("HelloWord");

alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

确认框 confirm();
这是一个你可以点击确定或者取消的弹窗

confirm("HelloWord");

confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

输入框 prompt()

这是一个你可以输入文本内容的弹窗

prompt("helloworld","hello");

第一个参数是提示信息，第二个参数是用户输入的默认值。

其他系统函数

parseInt(); 字符串转换整数
parseFloat(); 字符串转成小数
isNaN(); 判断数字是不是不是一个数字。

事件

事件	描述
onchange	HTML 元素内容改变(离开光标触发)
onclick	用户点击 HTML 元素
onmouseover	光标移动到HTML元素
onmouseout	光标离开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	提交表单时执行的事件

正则表达式

正则表达式 Regular Expression ，是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法：

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

如：

var re1 = new RegExp("^1[3589]\\d{9}$");
var re2 = /^1[3589]\d{9}$/;

修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。[a-zA-Z0-9_]
\W	查找非单词字符。
\d	查找数字。[0-9]
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。

RegExp 对象方法

方法	描述	FF	IE
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

正则表达式的使用

test()方法：

test()方法搜索字符串指定的值，根据结果并返回真或假。

var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true

exec() 方法：

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var reg=/java/ig;
var str="hello java,java是最好的编程语言，我爱Java";
var s=null;
while(s=reg.exec(str)){
  document.write(s);
  document.write("<br/>")
}

字符串match()方法

var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var arr=str.match(reg);
for(var i=0;i<arr.length;i++){
	document.write(arr[i]+"<br/>");
}

字符串replace()方法

var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var str2=str.replace(reg,"JAVA");
document.write(str2+"<br/>");

字符串split()方法

var str="hello world,java best language";
var arr=str.split(/[ ,]/);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}

DOM

DOM概述

通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。

获取HTML元素

通常，通过 JavaScript三种方法获取HTML元素进行操作。通过id找到的是对象，可以直接修改操作，通过class和标签名找到的是集合对象，需要遍历修改
方法一：id找到HTML元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
示例：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

方法二：标签名找到 HTML 元素

var y=x.getElementsByTagName("p");

方法三：类名找到HTML 元素

var x=document.getElementsByClassName("intro");

修改HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML="abcd";
document.getElementById(id).innerText="xxxx";

改变HTML属性

改变 HTML 元素的属性值：

document.getElementById(id).attribute=新属性值

修改CSS样式

修改 HTML 元素的样式：

document.getElementById(id).style.property=新样式

创建新元素
添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
创建元素并追加内容

var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
//找到id并添加进去
var element=document.getElementById("div1");
element.appendChild(para);

删除已有的 HTML 元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

DOM事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。

示例：当用户点击按钮时，改变文字颜色为红色

<h1 id="id1">myH1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
button</button>

示例：当用户点击按钮时，改变文字内容

<h1 onclick="this.innerHTML='改变内容!'">点击文本!</h1>

通过从事件处理器调用一个函数实现点击事件

<script>
function changetext(id)
{
    id.innerHTML="改变内容!";
}
</script>
<h1 onclick="changetext(this)">点击文本!</h1>

使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){
    document.getElementById("myhead2").style.color='blue';
};
</script>

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

<body onload="alert('页面加载完毕')">

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

EventListener

addEventListener() 方法

在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个事件句柄。

使用 removeEventListener() 方法来移除事件的监听。

语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”). 把on去掉

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。

当用户点击元素时弹出 “Hello World!” :

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 p元素插入到 div 元素中，用户点击 p 元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： p 元素的点击事件先触发，然后会触发 div元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发，然后再触发 p 元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
浏览器对象模型 (BOM):(Browser Object Model)尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

window尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)
window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口

screen

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度(像素)，减去界面特性，比如窗口任务栏。

document.write("可用宽度: " + screen.availWidth);

可用高度：screen.availHeight 属性返回访问者屏幕的高度

document.write("可用高度: " + screen.availHeight);

location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

- location.href 属性返回当前页面的 URL。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.assign() 方法加载新的文档。

<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
<input type="button" value="Load new document" onclick="newDoc()">

history

window.history 对象包含浏览器的历史
history.back() 与在浏览器点击后退按钮相同

<script>
function goBack()
  {
  window.history.back()
  }
</script>
<input type="button" value="Back" onclick="goBack()">

history.forward() 与在浏览器中点击按钮向前相同

<script>
function goForward()
  {
  window.history.forward()
  }
</script>
<input type="button" value="Forward" onclick="goForward()">