frontStudy---JavaScript

最新推荐文章于 2024-04-26 16:47:03 发布

「已注销」

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量232

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_34850703/article/details/107064018

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

frontStudy ---- JavaScript

1 JavaScript 简介

1.1 JavaScript 简介

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
由浏览器解释执行，会涉及到浏览器的兼容性问题。

1.2 JavaScript 能做什么

直接写入 HTML 输出流
对事件的反应
改变html的内容
改变html的样式
表单输入验证
…

1.3 怎么使用

在html页面中直接使用。如需在 HTML 页面中插入 JavaScript，请使用

<script>
alert("我的第一个 JavaScript");
</script>

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

2 JavaScript输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

3 JavaScript注释

单行注释

// 注释文本

多行注释

/*
注释文本
*/

4 JavaScript变量

var 变量名；
// 声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

4.1 JavaScript变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下代码是可以正常运行的。

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

下面的代码y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

4.2 Undefined 和 Null

可以通过将变量的值设置为 null 来清空变量。
在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。

null 和 undefined 的值相等，但类型不等

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

4.3 变量类型

局部JavaScript变量

在 JavaScript function内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。全局变量属于windows对象。

4.4 FAQ:

JavaScript 只有声明的变量会提升，初始化的不会。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。

5 JavaScript数据类型

5.1 对象(Object)

var person={firstname:"John", lastname:"Doe", id:5566};
访问对象属性：
1.person.lastName;
2.person["lastName"];

5.2 数组(Array)

var cars=["Saab","Volvo","BMW"];

5.3 函数(Function)

var a = function (){
    // body
}

5.4 字符串（String）

var str = 'string';
/*
 JavaScript 字符串是原始值，可以使用字符创建： 
 var firstName = "John"
 但我们也可以使用 new 关键字将字符串定义为一个对象： 
 var firstName = new String("John")
 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用
 比如:
 var x = "John";             
 var y = new String("John");
 (x === y) // 结果为 false，因为 x 是字符串，y 是对象
*/

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

FAQ:

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
+ 运算符用于把文本值或字符串变量加起来（连接起来）

5.5 数字(Number)

var a = 10;

5.6 布尔(Boolean)

var a = false;
var a = true;

如果布尔对象无初始值或者其值为:

0
-0
null
“”
false
undefined
NaN

那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！

5.7 空（Null）

5.8 未定义（Undefined）

5.9 Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）

6 JavaScript比较和逻辑运算符

6.1 比较运算符

== 值是否相等
=== 绝对等于（值和类型均相等）
!= 不等于
大于 >
小于 <
大于等于 >=
小于等于 <=
!val 等价于（val != ‘’ && val != null && val != undefind）

6.2 逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x5 \|\| y5) 为 false
!	not	!(x==y) 为 true

三目运算符：variablename=(condition)?value1:value2

7 条件语句

JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if (condition)
{
    当条件为 true 时执行的代码
}

if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句 - 使用该语句来选择多个代码块之一来执行

/*
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。*/
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

8 JavaScript循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

for/in - 循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while - 当指定的条件为 true 时循环指定的代码块

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}
// 如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

do/while - 同样当指定的条件为 true 时循环指定的代码块

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);
// 该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行
// 别忘记增加条件中所用变量的值，否则循环永远不会结束！这可能导致浏览器崩溃。

break

break 语句可用于跳出循环。
continue

continue 语句跳出本次循环，会继续执行下一次循环（如果有的话）

9 typeof & instanceof

9.1 typeof

// 可以使用 typeof 操作符来检测变量的数据类型。
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

9.2 instanceof

var a = ['aaa','bbb','ccc'];
a instanceof Object // true
a instanceof Array // true
// 在JavaScript中， typeof关键字无法区分Array Object，可以使用instanceof

10 JavaScript类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

Number Date Boolean —> String:

toString()
val + ‘’;
String()

String ----> Number:

Number(“3.14”) // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number(“99 88”) // 返回 NaN
parseFloat()
parseInt()

FAQ:

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

11 JavaScript严格模式

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
不允许删除变量或对象。
不允许删除函数。
不允许变量重名。
不允许使用八进制。
不允许使用转义字符。
不允许对只读属性赋值。
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性。
变量名不能使用 “eval”，“arguments” 字符串。
“use strict” 指令只允许出现在脚本或函数的开头。
严格模式下，this的值为undefined。

12 JavaScript this关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

13 javascript:void(0) 含义

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

13.1 href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。如果你要定义一个死链接请使用 javascript:void(0) 。

14 JavaScript函数

function functionName(parameter1, parameter2, parameter3) {
 // 要执行的代码…… 
}

14.1 通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

14.2 通过对象传递参数

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

14.3 JavaScript闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3
/*
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。
*/
/*
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
*/

15 html DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

在这里插入图片描述

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

通过 id 查找 HTML 元素:

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

通过标签名查找 HTML 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素:

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

改变HTML内容:

document.getElementById(*id*).innerHTML=*新的 HTML*

改变HTML属性:

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

改变HTML样式:

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

addEventListener() 方法:

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

removeEventListener() 方法:

*element*.removeEventListener("mousemove", myFunction);

创建新的HTML元素节点:

appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

insertBefore()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

移除已经存在的元素:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换HTML元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。

集合中的元素可以通过索引(以 0 为起始位置)来访问。

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

16 JS 浏览器BOM

16.1 浏览器对象模型（Browser Object Model (BOM)）

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

window.document.getElementById("header"); 
与
document.getElementById("header");
等价。

16.2 Windows 尺寸

对于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

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() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

16.3 Window Screen

window.screen 对象包含有关用户屏幕的信息。

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：返回访问者屏幕的宽度，高度，以像素计，减去界面特性，比如窗口任务栏。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

16.4 Window Location

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

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

location.hostname 返回 web 主机的域名
location.href 返回当前页面的 URL
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
Location Assign()加载新的文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function newDoc(){
    window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
 
<input type="button" value="加载新文档" onclick="newDoc()">
 
</body>
</html>
<!--
window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
-->

16.4 Window History

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：

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

// history.go(param)
// go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面;
// go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面;
// go() 里面的参数为0,表示刷新页面

16.5 Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。
在这里插入图片描述

16.6 JavaScript 弹窗

JavaScript 中三种消息框：警告框、确认框、提示框。

16.6.1 警告框

window.alert("sometext");
alert("sometext");

16.6.2 确认框

// window.confirm("sometext");
// confirm("sometext");
var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}

16.6.3 提示框

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感觉如何?";
    document.getElementById("demo").innerHTML=x;
}

16.7 JavaScript计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

16.7.1 setInterval()

显示当前时间：

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

clearInterval(方法名) 方法用于停止 setInterval() 方法执行的函数代码。(计时方法时你必须使用全局变量)

16.7.2 setTimeout()

等待3秒，然后弹出 “Hello”:

setTimeout(function(){alert("Hello")},3000);

y Potter");
if (person!=null && person!="")
{
x="你好 " + person + “! 今天感觉如何?”;
document.getElementById(“demo”).innerHTML=x;
}


### 16.7 JavaScript计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 在指定的毫秒数后执行指定代码。

**注意:** setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

#### 16.7.1 setInterval()

显示当前时间 ：

```javascript
var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

clearInterval(方法名) 方法用于停止 setInterval() 方法执行的函数代码。(计时方法时你必须使用全局变量)

16.7.2 setTimeout()

等待3秒，然后弹出 “Hello”:

setTimeout(function(){alert("Hello")},3000);

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。(计时方法时你必须使用全局变量)

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
frontStudy---JavaScript

frontStudy ---- JavaScript1 JavaScript 简介1.1 JavaScript 简介JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易学习。由浏览器解释执行，会涉及到浏览器的兼容性问题。1.2 JavaScript 能做什么直接写入 HTML 输出流对事件的反应改变html的内
复制链接

扫一扫