这篇博客详细介绍了JavaScript的基础知识，包括JavaScript的作用、组成、变量、数字、字符串、数组、字典以及流程控制语句。讲解了JavaScript作为前端语言在网页中的重要角色，以及如何使用JavaScript进行变量声明、数据类型判断、数字运算、字符串操作和数组处理。此外，还涵盖了流程控制的条件语句和循环语句，以及函数的运用。
JavaScript快速入门学习笔记
JavaScript简述
HTML 可以为网页搭建结构并提供内容，CSS 可以为网页提供了样式和排版。有了 HTML 和 CSS 这两个标记型语言，一个完整的网页可以制作完成并呈现到用户浏览器上，那么，为什么还需要学习 JavaScript 呢？相比 HTML/CSS，JavaScript 是一个真正意义上的 Web 前端语言，它是专门为 Web 而生的面向对象的客户端脚本语言。JavaScript语言可以直接嵌入网页运行，实现动态特效、表单验证、创建Cookies、修改 HTML 等 一系列高级功能。按照 HTML/CSS/JavaScript 这三种技术在网页中的功能，我们这样总结它们各自的功能：HTML 实现网页的结构层、CSS 实现网页的表现层、JavaScript 实现网页的行为层。
JavaScript 只运行在 web 前端，是一种浏览器语言，在此基础上拓展为多种前端框架。
JavaScript组成
完整的 ECMAScript 标准并不仅仅是 JavaScript，还包括了 DOM 和 BOM。JavaScript 描述了该语言的语法和基本对象；DOM（文档对象模型）描述了处理网页内容的方法和接口；BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口。
JavaScript使用位置
JS 脚本可以放置在三个位置，包括 HTML 的 head 区域、HTML 的 body 区域、以及外部 JS 文件中。
当放置在 HTML 页面中时，不管是head 还是 body 区域，都需要使用 <script></script> 标签包含起来。
JS的每条语句之间用分号 ; 隔开，代码块用花括号 { } 括起来，代码块缩进为4个空格。
JavaScript变量
变量可以是任意的数据类型，包括数字、字符串、数组、词典等，变量（variable）是存储信息的“容器”。通过变量可以实现复杂运算和高级编程。JS 的变量需要提前声明，并且需要通过关键字 var 来实现（variable的缩写），JS 是一种动态脚本语言，不需要制定变量的数据类型，声明之后直接指定值即可。
JavaScript 解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量，并将其初始化为指定的值，这是该语言的便利之处（其实Python语言就无需声明，直接采用上面的语法），不过如果不能紧密跟踪变量，这样做也很危险，最好的习惯是像使用其他程序设计语言一 样，总是声明所有变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<script>
var a; // 变量申明，JS中没有赋值的变量，默认值为undefined
var x = 1; // 变量申明并赋值
var y = 2;
var z = x + y;
var name = "xiaoming"; // 变量相当于一个容器，可以映射不同数据类型的内容，包括数字、字符串、数组等
var age = 18;
var b = 2, c = 3, d = 4; // 一个JS语句多个变量赋值
var f = function myFisrtFunction () { // 变量也可以是一个函数
}
document.write(z + "<br>");
document.write(name + ' is ' + age);
</script>
</body>
</html>
document.write();
console.log()；
二者的区别是 document.write() 是将值输出到浏览器页面；而 console.log() 是将值输出到 console 日志中。
ECMAScript 中有5种简单数据类型(也称为基本数据类型)：Undefined、Null、Boolean、Number和 String；
还有1种复杂数据类型：Object。
typeof(变量) 可以用于检测变量的类型。
JavaScript数字
JavaScript数字（Number）对象只有一种数据类型，就是 Number 类型，不区分整数、浮点数等。数字对象可以支持十进制、八进制、十六进制、科学计数法等，可以实现的算术运算包括加法、减法、乘法、除法、求余、累积、递减等。另外，由于 JavaScript 类似 Java 和 Python 等面向对象语言，所以数字对象也具备属性和方法。
关于 JS 数字的存储方式和精确度，JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，所有数字都存储为根为 10 的 64 位（8 比特）的浮点数。因此，整数最多为 15 位，小数的最大位数是 17，但是浮点运算并不总是 100% 准确。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Number数字对象</title>
</head>
<body>
<script>
//JS中数字不分为整数、浮点数等区别，统一为Number对象
var a = 10; // 整数，最多为15位
var b = 3.14; // 浮点数
var c = 123e5; // 科学计数法，12300000
var d = 0.1 + 0.2; // 浮点数相加不精确，最大位数17位
var e = 0123; // 八进制在数字前面加0
var f = 0x1F; // 十六进制在数字前面加f
// 算术运算
var x = 1;
var y = 2;
var z1 = x + y; //加法运算
var z2 = x - y; //减法运算
var z3 = x * y; //乘法运算
var z4 = x / y; //除法运算
var z5 = x % y; //求余运算
var z6 = x ++; //累加运算
var z7 = x --; //递减运算
// 算法方法
var g = parseFloat("0.123abcdef");
document.write(g+'<br>');
var h = parseInt("100px");
document.write(h+"<br>");
// HTML输出
document.write(z1 + '<br>')
document.write(z2 + '<br>')
document.write(z3 + '<br>')
document.write(z4 + '<br>')
document.write(z5 + '<br>')
document.write(z6 + '<br>')
document.write(z7 + '<br>')
</script>
</body>
</html>
JavaScript字符串
JavaScript 字符串（String）对象用于处理字符串信息，字符串可以存储一系列的字符信息，例如 hello,world ，与Python语言相同，JS的字符串采用单引号和双引号括起来。字符串对象具备一系列属性和方法，可以实现字符串相加、查询、匹配、替代等处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript String字符串对象</title>
</head>
<body>
<script>
// 字符串创建
var s = 'Hello';
var x = 'World!';
var k = "what's your name?";
// 字符串相连
var y = s + x;
// 字符串索引
s[0];
s[1];
x[0];
x[1];
// 字符串长度
var l1 = s.length;
var l2 = x.length;
// 字符串处理
var a = y.toUpperCase(); //全部转换为大写；
var b = y.toLowerCase(); //全部转换为小写；
// 字符串搜索
var c1 = y.indexOf('o'); // 返回搜索字符所在的下标位置
var c2 = y.lastIndexOf('o'); // 返回搜索字符所在的下标位置
// 字符串截取
var d1 = y.substr(0, 3); // 返回字符串区间内容
var d2 = y.substring(0, 3); // 返回字符串区间内容
var d3 = y.slice(0, 3); // 返回字符串区间内容
// HTML输出
document.write(s+'<br>')
document.write(x+'<br>')
document.write(a+'<br>')
document.write(b+'<br>')
document.write(c1+'<br>')
document.write(d1+'<br>')
// 字符串应用（邮箱信息截取）
function getMail(){
var mail = prompt("登录邮箱"); // 通过prompt方法获取用户输入
var pos = mail.indexOf("@"); // 获取@字符的位置
var name = mail.slice(0, pos); // 获取开头到pos的字符
var address = mail.substr(pos+1); // 获取pos及之后的字符(含pos自身)，可以通过加1去除自身字符
document.write("您输入的用户名是: "+name+"<br>");
document.write("您输入的邮箱域名是: "+address+"<br>");
}
getMail(); // 执行函数
// 字符串应用（网址信息截取,获取后缀名）
var url = "http://www.baidu.com/index.html";
function getFileFormat(url) {
var pos = url.lastIndexOf("."); // 获取.的位置
return url.substr(pos+1); // 通过substr返回后缀名
}
var formatName = getFileFormat(url); // 调用函数并赋值给变量formatName
document.write("文件后缀为: "+ formatName); // 打印后缀名到html
</script>
</body>
</html>
JavaScript数组
JavaScript 数组（Array）对象可以存储一系列信息的“容器”，包括数字、字符串、数组、布尔值等。与字符串类似，数组对象有一系列的属性和方法，可以实现相加、索引、截取等操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Array数组对象</title>
</head>
<body>
<script>
// 创建数组
var a = [1, 2, 3, 4, 5]; // 纯数字的数组
var b = [1, 'a', 2, 'b', 3, 'c']; // 既有数字和字符串的数组
var c = [10, 20, 'hello', 'arry', [1,2,3], true]; // 有数字、字符串、数组、布尔值的数组
// 数组索引
var d = a[0];
var e = b[1];
var f = c[4][0];
// 数组长度
var g = a.length
// 数组截取
a.slice(0,2);
b.slice(1,3);
// 数组相连
var h = a.concat(b);
// 数组搜索
a.indexOf(5);
a.lastIndexOf(5)
c.indexOf('hello');
// 数组赋值(修改）
a[0] = 10;
b[1] = 'hello';
// HTML输出
document.write(a + '<br>')
document.write(b + '<br>')
document.write(c + '<br>')
document.write(d + '<br>')
document.write(e + '<br>')
document.write(f + '<br>')
document.write(g + '<br>')
document.write(h + '<br>')
</script>
</body>
</html>
JavaScript字典
JavaScript 字典对象通过映射的方式实现一系列键值对的存储。字典可以访问、修改、判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript对象(字典)</title>
</head>
<body>
<script>
// 创建对象
var dict =
{
a:1,
b:2,
c:'hello',
d:'world',
};
// 访问属性
var e = dict.a;
var f = dict.b;
// 修改属性
dict.c = 'hi';
var g = dict.c;
// 属性判断
var h = 'a' in dict;
var i = 'toString' in dict
var j = dict.hasOwnProperty('toString')
// HTML输出
document.write(e + '<br>')
document.write(f + '<br>')
document.write(g + '<br>')
document.write(h + '<br>')
document.write(i + '<br>')
document.write(j + '<br>')
</script>
</body>
</html>
JavaScript流程控制之条件语句
JavaScript 流程控制语句（statement）包括 if、for 、while、switch、continue、break语句，通过这些语句，程序根据不同情况执行不同动作。
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if条件语句</title>
</head>
<body>
<script>
'use strict'
// if(){}语句
var a = -10;
if (a > 5)
{
var b = 11
}
// if(){} else{}语句
var c = 10;
if (c < 0)
{
var d = 15
}
else
{
d = 20
}
// if(){} else if(){} else{}语句
var e = 60;
if (e > 90)
{
var f = 200;
}
else if(e > 80)
{
f = 150;
}
else
{
f = 0;
}
// HTML输出
document.write(b + '<br>')
document.write(d + '<br>')
document.write(f + '<br>')
// 期末考试分数判断
var e = prompt("请输入您的期末考试成绩：");
if (e > 80)
{
var f = "优秀，戒骄戒傲！";
}
else if(e > 70)
{
var f = "良好，再接再厉！";
}
else if(e > 60)
{
var f = "中等，仍需努力！";
}
else
{
var f = "学渣，回家种田！";
}
document.write(f);
</script>
</body>
</html>
switch 语句 - 使用该语句来选择多个代码块之一来执行（一般当if判断超过3个的时候使用此语句）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Switch语句</title>
</head>
<body>
<script>
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;
default: // 规定不匹配时，默认执行的语句
x = "星期六";
}
document.write(x)
</script>
</body>
</html>
JavaScript流程控制之循环语句
若有重复的动作需要执行，则会采用循环语句。循环语句可以根据需求，执行一定次数的代码块。
JavaScript 支持以下循环语句：
for - 循环代码块一定的次数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for语句</title>
</head>
<body>
<script>
// for语句（循环代码块一定的次数直到条件不满足）
var x = 0;
var i;
for (i=1; i<=100; i++) // 初始变量；循环条件；递增条件（循环代码块被执行之后执行）
{
x = x + i;
}
document.write(x+'<br>');
// for语句（遍历数组）
var arr = ['Apple', 'Google', 'Microsoft'];
var n, y;
for (n=0; n<arr.length; n++)
{
y = arr[n];
document.write(y + '<br>');
}
//for语句（遍历数组）
cars = ["BMW", "Volvo", "Saab", "Ford"];
var r=0;
for (;cars[r];)
{
document.write(cars[r] + "<br>");
r++;
}
// for_in语句（循环遍历对象的属性）
</script>
</body>
</html>
for/in - 循环遍历对象的属性。
while - 当指定的条件为 true 时循环指定的代码块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>While语句</title>
</head>
<body>
<script>
var x=0, i=0;
while (i < 5)
{
x = x + i;
i++;
document.write(x + "<br>");
}
// while循环读取数组元素
cars = ["BMW", "Volvo", "Saab", "Ford"];
var n = 0;
while (cars[n])
{
document.write(cars[n] + "<br>");
n ++;
}
</script>
</body>
</html>
do/while - do/while 循环是 while 循环的变体，该循环会执行一次代码块，在检查条件是否为真之前， 如果条件为真的话，就会重复这个循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do_while语句</title>
</head>
<body>
<script>
var x="", i=0;
do
{
x = x + " The number is " + i + "<br>";
i ++;
}
while (i < 5)
document.write(x)
</script>
</body>
</html>
JavaScript流程控制之终止语句
很多时候，循环语句需要根据特定条件来终止循环，此时就需要用到循环语句，JavaScript 支持 break 和 continue 语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Break语句</title>
</head>
<body>
<script>
var x = "", i = 0;
for (i=0; i<10; i++)
{
if (i == 3)
{
break;
}
x = x + " The number is " + i + "<br>";
}
document.write(x)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Continue语句</title>
</head>
<body>
<script>
var x = "", i = 0;
for (i=0; i<10; i++)
{
if (i == 3)
{
continue;
}
x = x + " The number is " + i + "<br>";
}
document.write(x)
</script>
</body>
</html>
JavaScript函数
函数（Function）是封装好的、可直接调用的、可重复使用的代码块，一般由变量、数据类型、表达式、流程控制等语句组成。函数是一种更高维度的编程方法，合理的创建和使用函数，可以让代码更加简洁，也可以实现更复杂的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script>
// 不含参函数
function abs() {
var x = -1;
if (x >= 0)
{
return x;
}
else
{
return -x;
}
}
document.write(abs());
// 含参函数
function abs(x)
{
if (x >= 0)
{
return x;
}
else
{
return -x;
}
}
// var a = abs(-10)
// document.write(a)
// 获取用户输入再取绝对值
var a = prompt("输入一个数字:")
var b = abs(a)
document.write(b)
</script>
</body>
</html>
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
