前端基础知识总结 （三）

最新推荐文章于 2022-06-03 21:15:51 发布
最新推荐文章于 2022-06-03 21:15:51 发布
阅读量475 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45433013/article/details/113509755
版权

说完css，接下来讲一下最重点的JavaScript。

JavaScript

一、什么是JavaScript

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

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript：直接写入 HTML 输出流


document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

注意：只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

JavaScript：对事件的反应


<button type="button" onclick="alert('欢迎!')">点我!</button>

注意：alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件只是学到的众多事件之一。

JavaScript：改变 HTML 内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

您会经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 样式
改变 HTML 元素的样式，属于改变 HTML 属性的变种。


x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入
JavaScript 常用于验证用户的输入。

f isNaN(x) {
    alert("不是数字");
}

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断：


if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

二、JavaScript 用法

HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中。

< script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 < script> 标签。
< script> 和 < /script> 会告诉 JavaScript 在何处开始和结束。
< script> 和 </ script> 之间的代码行包含了 JavaScript:

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

您无需理解上面的代码。只需明白，浏览器会解释并执行位于< script> 和 < /script>之间的 JavaScript 代码 。

注意：那些老旧的实例可能会在 < script> 标签中使用type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

< body>中的 JavaScript
JavaScript 会在页面加载时向 HTML 的 < body>写文本：


<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

JavaScript 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

在 < head> 或者< body>的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 < body> 或 < head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 < head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

< head> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 < head> 部分。
该函数会在点击按钮时被调用：


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

< body> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 < body> 部分。
该函数会在点击按钮时被调用：


<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 < script> 标签的 “src” 属性中设置该 .js 文件：


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

你可以将脚本放置于 < head> 或者 < body>中，放在 < script> 标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

注意：外部脚本不能包含 < script> 标签。

三、JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

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

  • 使用 window.alert() 弹出警告框。

  • 使用 document.write() 方法将内容写到 HTML 文档中。

  • 使用 innerHTML 写入到 HTML 元素。

  • 使用 console.log() 写入到浏览器的控制台。

    使用 window.alert()
    你可以弹出警告框来显示数据：

 <!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

页面刷新弹出警告对话框， 实现效果如下：
在这里插入图片描述操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

 <!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

以上 JavaScript 语句（在 < script> 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
在大多数情况下，在本实例中，我们将使用上面描述的方法来输出。
上面的例子直接把 id=“demo” 的 < p> 元素写到 HTML 文档输出中。

三、JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：


document.getElementById("demo").innerHTML = "你好 Dolly";

分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。


a = 5;
b = 6;
c = a + b;
 
//也可以这么写：
a = 5; b = 6; c = a + b;

注意：您也可能看到不带有分号的案例，在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
本例向网页输出一个标题和两个段落：


document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

JavaScript 代码块
avaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落：


function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) ：
在这里插入图片描述空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var person="runoob";
var person = "runoob";

对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：


document.write("你好 \
世界!");

不过，您不能像这样折行：

document.write \ 
("你好世界!");

在这里插入图片描述知识点：JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
下面用单行注释来解释代码：


// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 多行注释
多行注释以 /* 开始，以 */ 结尾。
下面的例子使用多行注释来解释代码：


/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

使用注释来阻止执行
在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）：

// document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

在下面的例子中，注释用于阻止代码块的执行（可用于调试）：


/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

在行末使用注释
在下面的例子中，我们把注释放到代码行的结尾处：

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

三、JavaScript 变量

变量是用于存储信息的"容器"。
实例：


var x=5;
var y=6;
var z=x+y;

就像代数那样
x=5
y=6
z=x+y
在代数中，我们使用字母（比如 x）来保存值（比如 5）。
通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。
在 JavaScript 中，这些字母被称为变量。
注意：您可以把变量看做存储数据的容器。

JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

注意：JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name=“Bill Gates”)。
在 JavaScript 中，类似 “Bill Gates” 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
实例


var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）
如需向变量赋值，请使用等号：

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：


var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

注意：一个好的编程习惯是， 在代码开始处，统一对需要的变量进行声明。
一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

JavaScript 算数
您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：


y=5;
x=y+2;

四、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注意：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Benz";
cars[1]="Audi";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Benz","Audi","BMW");

或者 (literal array):

var cars=["Benz","Audi","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式:

name=person.lastname;
name=person["lastname"];

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：


var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

注意：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

五、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
实例：

p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

上面的函数在按钮被点击时会提示 “Welcome Harry Potter, the Wizard”。
函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：


<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

根据您点击的不同的按钮，上面的例子会提示 “Welcome Harry Potter, the Wizard” 或 “Welcome Bob, the Builder”。

带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法：

function myFunction()
{
    var x=5;
    return x;
}

上面的函数会返回值 5。
注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。
即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

“demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。
您可以使返回值基于传递到函数中的参数：
实例


function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

demo" 元素的 innerHTML 将是：
12

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：


function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

六、JavaScript 变量

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

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

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句：

carname="Volvo";

将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

JavaScript 作用域

作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。


// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。


var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。


// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。


//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

七、JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):


<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

以上实例中，JavaScript 代码将修改 id=“demo” 元素的内容。
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):


<button onclick="this.innerHTML=Date()">现在的时间是?</button>

注意：JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：


<button onclick="displayDate()">现在的时间是?</button>

常见的HTML事件
下面是一些常见的HTML事件的列表:
在这里插入图片描述JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 …

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 …

八、JavaScript 字符串

JavaScript 字符串用于存储和处理文本。
字符串可以存储一系列字符，如 “John Doe”。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

你可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号：

 var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

字符串长度
可以使用内置属性 length 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符
在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：

"We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:

"We are the so-called \"Vikings\" from the north."

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
在这里插入图片描述字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建：var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

 var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

注意：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

=== 为绝对相等，即数据类型与值都必须相等。

字符串属性和方法
原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性
在这里插入图片描述字符串方法
在这里插入图片描述在这里插入图片描述

九、JavaScript运算符

运算符 = 用于赋值。
运算符 + 用于加值。

运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。

举例：指定变量值，并将值相加：
y=5;
z=2;
x=y+z;
在以上语句执行后，x 的值是：
7

JavaScript 算术运算符

y=5，下面的表格解释了这些算术运算符：
在这里插入图片描述JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
在这里插入图片描述用于字符串的 + 运算符
+运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。

如需把两个或多个字符串变量连接起来，请使用 + 运算符：
txt1=“What a very”;
txt2=“nice day”;
txt3=txt1+txt2;
txt3 运算结果如下:
What a verynice day

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：
txt1="What a very ";
txt2=“nice day”;
txt3=txt1+txt2;
在以上语句执行后，变量 txt3包含的值是：
What a very nice day

或者把空格插入表达式中：
txt1=“What a very”;
txt2=“nice day”;
txt3=txt1+" "+txt2;
在以上语句执行后，变量txt3 包含的值是：
What a very nice day

对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
x=5+5;
y=“5”+5;
z=“Hello”+5;
x,y, 和 z 输出结果为:
10
55
Hello5
规则:如果把数字与字符串相加，结果将成为字符串！

比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
比较运算符用于测试 true 或者 false。
x=5，下面的表格解释了比较运算符：
在这里插入图片描述如何使用
可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

if (age<18) x="Too young";

逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
在这里插入图片描述

十、JavaScript语句

条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句
只有当指定条件为 true 时，该语句才会执行代码。

语法

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

注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
实例
当时间小于 20:00 时，生成问候 “Good day”：


if (time<20)
{
    x="Good day";
}

x 的结果是：

Good day

请注意，在这个语法中，没有 …else…。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

if…else 语句
请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

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

实例
当时间小于 20:00 时，生成问候 “Good day”，否则生成问候 “Good evening”。


if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

x 的结果是：
Good day

if…else if…else 语句
使用 if…else if…else 语句来选择多个代码块之一来执行。
语法：

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

实例
如果时间小于 10:00，则生成问候 “Good morning”，如果时间大于 10:00 小于 20:00，则生成问候 “Good day”，否则生成问候 “Good evening”：


if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

x 的结果是： 今天好

JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
请使用 switch 语句来选择要执行的多个代码块之一。

语法


switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

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

实例
显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：


var d = new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

x 的运行结果： 今天是星期四

default 关键词
请使用 default 关键词来规定匹配不存在时做的事情：
实例
如果今天不是星期六或星期日，则会输出默认的消息：


var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;

x 的运行结果： 期待周末

JavaScript for 循环
循环可以将代码块执行指定的次数。
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：


document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

使用for循环


for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

不同类型的循环
JavaScript 支持不同类型的循环：

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：


for (var i=0,len=cars.length; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

同时您还可以省略语句 1（比如在循环开始前已经设置了值时）：


var i=2,len=cars.length;
for (; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
注意：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。

-Hao.ye！
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算机如何寻址_前端学习计算机网络——IP地址的划分及其分类
weixin_39624097的博客
11-04 190
点击上方“前端印象”，选择“设为星标”第一时间关注技术干货！本文是该系列文章的第二篇，将了解Internet中使用的网络层地址，又称IP地址。每个设备都至少需要一个IP地址，其可以作为我们设备的标识，就跟我们的电话号码一样，知道了电话号码就能找到我们，所以每个IP地址都是唯一的，所以在给每台设备分配IP时，会根据一套编号方案进行，本篇文章我们就来详细地了解一下它。一、IP地址的表示IP作...
Python面向对象学习（一）
qq_52383774的博客
01-04 1416
Python面向对象学习 类 定义： 继承 定义： 多态 定义： 重构方法：（需要注意的是，在父类方法名相同，默认调用的是在括号中排前面的父类中的方法）
JavaOOP面向对象（二）
xinin919的博客
06-03 940
JavaOOP面向对象：对象与引用、this关键字、static关键字、代码块、包、访问权限修饰符、封装
JavaScript的作用域说明
vincent先生的博客
08-04 253
在javascript中，对象和函数都属于变量，那么，既然是变量，它就会有自己作用的区域，也就是我么所说的作用域。 变量定义在不同的地方，其作用的区域是不一样的。我们将其分为两大类，局部javascript变量和全局javascript变量。 局部javascript变量：在javascript函数内部声明变量的我们将其称之为局部变量，我们只能够在函数的内部访问它，也就是说该变量的作用范围只在
javascript 分号_JavaScript中的分号
cuk0051的博客
08-30 780
javascript 分号Semicolons in JavaScript divide the community. Some prefer to use them always, no matter what. Others like to avoid them. JavaScript中的分号分隔社区。 有些人更喜欢始终使用它们，无论如何。 其他人喜欢避免它们。 After using ...
web前端基础知识总结提炼大通达
10-20
web前端基础知识总结提炼大通达
web前端开发基础知识总结
10-28
web前端开发基础知识总结，包括html、css、javascript基础知识点，适合初学者学习
《前端基础知识大全》-完整版
12-07
本笔记 主要是记录了前端基础知识等 网页布局 html css jq js 移动端 vue 等 所需的基础知识。主要是采纳了许多人的建议不断创新 最后总结出来的内容，希望对大家有用！
前端基础总结
12-26
前端基础总结，里面包含最基础应该了解 的知识，非常适合，新手学习的。需要的可以看看。
前端知识详细基础总结一
01-02
所以详细前端知识基础总结，超详细
(前端) 上一个输出框的值同步下一个框中
m0_54162653的博客
07-01 99
<div class="col-sm-6"> <div class="form-group"> <label class="col-sm-4 control-label is-required">指数名称：</label> <div class="col-sm-8"> <input n
算法刷题（18）_逆时针打印矩阵学习记录
GoodJob
07-29 1868
算法刷题（18）_逆时针打印矩阵学习记录 【说明】 题目：输入一个矩阵，按照从外向里以顺时针顺序依次打印出每一个数字，例如：如果输入如下矩阵：  1   2   3   4  5   6   7   8  9  10 11 12  13 14 15 16  则依次打印出数字1, 5，9，13，14，15，16，12，8，4，3，2，6，10，11，7. 【算法实现】 package...
JavaScript入门之改变HTML内容 innerHTML
u011333814的专栏
02-26 828
JavaScript 中可通过document.getElementById("Id名")，然后 .innerHTML=“改变后的内容” 第一段JacaScript JavaScript 能改变HTML内容 function myFunction() { x = document.getElementById("demo"); x.innerHTML = "想我吗"; }
js中三种弹出框
weixin_33798152的博客
03-16 6029
javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。 今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′...... 第一种：alert()...
JS的分号可以省掉吗？
Fundebug博客
09-18 5169
摘要： JavaScript语言从设计之初就是考虑带分号的，使用不带分号的编码规则就要小心点啦。 背景 最近在项目中开始使用新的编码规范，一开始ESLint报一大堆错误，改得我想砸键盘，花了好些时间才适应，下面列出一些代表性的规则： 只能使用单引号 函数定义的圆括号和左大括号之间一定要有空格: function(args) { .. } import语句在大括号之后一定要有空格: import ...
Web前端开发 北京林业大学 JavaScript基础-单元测试
nonlinearthink的博客
05-01 3835
1.toString()的作用是（   ）。 编号 选项 A 将任意类型的数据转换为字符串类型 B 将任意类型的数据转换为空值类型 C 将任意类型的数据转换为数字类型 D 将任意类型的数据转换为布尔类型 2.下列代码最终结果不是NAN的是（   ）。 编号 选项 A Number(“12你好”); B pa...
写javascript时要不要省略分号？
对角另一面
10-17 7243
在打算写这篇文章之前，我是一个分号党，在写这篇文章之后，转为了无分号党。
JSP程序设计复习题库(客观题)
热门推荐
qq_44111805的博客
11-14 3万+
一、选择题 1、下面哪一个不是JSP本身已加载的基本类？（B ） A、java.lang.* B、java.io.* C、javax.servlet.* D、javax.servlet.jsp.* 2、以下关于JavaBean的说法中，错误的是（B） A、JavaBean是基于JA V A语言的。 B、JavaBean是JSP的内置对象之一。 C、JavaBean是一种Java类。 D、JavaBean是一个可重复使用的软件组件。 3、下面的说法错误的是：（D） A Jsp可以处理动态内容和静态内容 B 在
写一篇前端程序员年度总结 字数500
最新发布
02-07
好的，我会尽力写出一篇前端程序员年度总结。 作为一名前端程序员，过去的一年中我学到了很多新的知识和技能。首先，我加强了对 HTML 和 CSS 的理解，并学会了使用各种布局技巧和响应式设计原则来制作美观且功能强大的网站。 此外，我还学习了 JavaScript，并了解了如何使用它来操控网页的行为和交互。我掌握了使用 DOM API 操作文档对象模型，并学会了使用各种框架和库，如 React、Vue 和 Angular，来构建复杂的前端应用程序。 在过去的一年中，我还学习了后端知识，包括服务器端开发、数据库设计和 RESTful API 设计。这让我能够与后端工程师更好地协作，并为自己的前端开发打下了坚实的基础。 除了学习新的技能之外，我在过去的一年中还做了很多实际的项目。我参与了一个电商平台的开发，并负责前端的开发工作。我还参与了一个社交媒体应用的开发，并负责应用的移动端适配。这些项目让我学到了很多实际的开发经验，并为我的职

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值