[学习笔记]JavaScript基础

最新推荐文章于 2025-07-18 22:14:40 发布

原创最新推荐文章于 2025-07-18 22:14:40 发布 · 6.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文全面介绍了JavaScript的基础知识，包括其发展历程、特点、语法、变量类型、流程控制等内容，并提供了丰富的示例帮助理解。

JavaScript概述

1. JavaScript定义

JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言，只能由浏览器解释执行。

其中：

脚本语言：解释运行（由浏览器来解释执行），无需编译。

基于对象：有一些内置的对象共我们使用，但是不能完全实现继承，封装和多态，只能模拟。

事件驱动：必须由事件触发。

2. JavaScript的发展历程

在1995年时，由网景（Netscape）公司在Netscape浏览器上首次设计实现而成。因为网景公司与升阳（Sun）公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了获取技术优势，微软（Microsoft）推出了JScript，CEnvi推出ScriptEase，与JavaScript类似同样可在浏览器上运行。为了统一规格，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由网景、升阳、微软和Borland公司组成的工作组确定统一标准：ECMA-262。因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。目前规范：ECMA-262。

3. JavaScript的特点

交互性（信息的动态交互）
跨平台性（不允许直接访问本地硬盘）
安全性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript的语言组成

1. 核心语法（ECMA Core）

2. 浏览器对象模型（BOM，Browser Object Model）

3. 文档对象模型（DOM，Document Object Model）

JavaScript和HTML的结合方式

方法1：

直接写在事件中，当浏览器不能正确解释时，在前面加上“javascript:”，例如：javascript:alert('写在事件中')。

<input type="button" value="方法1" onclick="alert('写在事件中')" />

方法2：

使用script标签，在标签内写js代码。注意：script标签，必须有独立的结束标签。

<script  type="text/javascript" >
function _second(){
	alert("使用script标签，在标签内写js代码");
}
</script>
 
<input type="button" value="方法2" onclick="_second()" />

方法3：

引入外部js文件，<script>和</script>间不可以有JavaScript代码。

<script type="text/javascript" src="demo.js" ></script>
 
<input type="button" value="方法3" onclick="_third()" />

注意：

JavaScript每句最后的分号“;”非必须，但是建议加上。
JavaScript的变量，方法和运算符对大小写敏感。
JavaScript可以写在网页<html>标签内的任意地方，但是一般在<head>标签内。
只有需要使用JavaScript打印输出，才将JavaScript写在<body>标签内。

JavaScript的基本语法

1. 注释

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

2. 变量定义

使用var关键字进行变量定义，也可以不使用：

var a = 1;
a = "test";
a = 3.1415926;
a = false;
b = 3;

由于JavaScript是弱类型语言，所以数据类型由值确定。

3. 变量类型

五种基本数据类型：Undefined、Null、Boolean、Number 和 String，存储在栈区。

引用数据类型：存储在堆区。

var v1 = 10; //number
var v2 = 15.6; //number
var v3 = "abc"; //string
var v4 = false; //boolean
var v5; //undefined
var v6 = null; //基本数据类型是null，用typeof验证的时候是object

Undefined：typeof()测试为Undefined。
null：typeof()测试为Object。
var str = "abc";：基本数据类型字符串。
var str = new String("abc");：引用数据类型字符串对象。
基本数据类型字符串可以直接调用字符串对象的方法，因为JavaScript为弱类型语言。

4. 弱类型转换

var v1 = "1.5";
var v2 = 3;
var v3 = v2 + v1; //string
var v4 = v2 - v1; //number
var v5 = v2 * v1; //number
var v6 = v2 / v1; //number

5. 运算符

加减乘除：，字符串+数字返回的是字符串，其余全是返回number。
与或非：&&：左右两边都成立则为真；||：左右有一边为真即是真；！：取反。
条件运算，两个等号比较的值的内容，三个等号比较的是值的内容和数据类型。

示例

var u = 10;
var t = "10";
alert(u==t); // true
alert(u===t); // false

三元运算符：判断表达式 ? 表达式1 : 表达式2;
在javaScript当中，''、0、false、undefined、NaN、null是假，其余全是真。

示例

var v = NaN ? 10 : 20; // 20

6. 流程控制

6.1 条件

if (condition1) {
  statement1;
} else if (condition2) {
  statement2;
} else {
  statement3;
}

其中，else if 和 else 不是必须的。

6.2 循环

方式一：

while (condition) {

statement;

}

方式二：

do {

statement;

} while (condition);

方式三：

for (初始化表达式; 循环条件表达式; 循环后操作表达式) {

statement;

}

while 循环是先判断，后执行；do-while 循环是先执行后判断。
for 循环先执行初始化表达式，然后判断循环条件表达式，如果满足则执行循环体，接着执行循环后操作表达式，然后循环判断循环条件表达式，直到不满足为止。也就是说初始化表达式只在一开始执行一次，接下来就是条件表达式->循环体->操作表达式的循环执行。

6.3 多重选择

switch (choice) {
  case 1:
    statement1;
    break;
  case 2:
    statement2;
    break;
  default:
    // bad input
    statement3;
    break;
}

case 标签可以是任意数据类型 var。
switch 语句从与选项值（choice）相匹配的 case 标签处开始执行，直到遇到 break 语句，或者执行到 switch 语句的结束为止。如果没有相匹配的 case 标签，而有 default 子句，就执行这个子句。

6.4 案例

动态打印表格

<html>
 
<head>
    <title>动态打印表格</title>
</head>
 
<body>
    <script type="text/javascript">
    //document 是DOM中的内置对象,有一个输出方法write()
    document.write("<table border='1' width='600px' height='300px'>");
    for (var i = 0; i < 5; i++) {
        document.write("<tr>");
        for (var j = 0; j < 5; j++) {
            document.write("<td align='center'>第" + (i + 1) + "行，第" + (j + 1) + "列</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
    </script>
</body>
 
</html>

效果

打印倒三角

<script type="text/javascript">
var icon = "\u263a";
for (var i = 0; i < 6; i++) {
    for (var j = 0; j < i; j++) {
        document.write("  ");
    };
    for (var j = 0; j < (6 - i); j++) {
        document.write(icon+"  ");
    };
    document.write("<br />");
};
</script>

效果

JavaScript方法的定义

定义方法的关键字：function。

方法1：

function 方法名(参数){

方法体

（有可能有返回值，有可能没有返回值）

}

示例

//没有参数没有返回值
function _myfunction() {
    alert("hello world");
}
//调用方式 
_myfunction();
 
//没有参数，有返回值
function _myfunction() {
    return "hello world";
}
//调用方式
alert(_myfunction());
 
//有参数，没有返回值
function _myfunction(str) {
    alert(str);
}
//调用方式
_myfunction("hello World");
 
//有参数和返回值
function _myfunction(str) {
    return ("hello javascript " + str);
}
//调用方式
alert(_myfunction("test"));

方法2：

var 方法名 = function(参数){

方法体

（可能有返回值，也可能没有）

}

示例

var _myfunc = function() {
    alert("hello second defined function ");
}

//调用方式
_myfunc();
alert(_myfunc); // 把等号后面的内容当成变量的值输出
alert(_myfunc()); // 先运行方法体，然后输出undefined

方法3（不常用）：

var 方法名 = new Function(参数1, 参数2, 参数n, 方法体内容);

示例

var _mytest = new Function("a", "b", "return a+b;");

//调用方式
alert(_mytest(1, 2));

JavaScript全局方法

1. isNaN

当不是数字时返回true，是数字时返回false。

var a = "test";
alert(isNaN(a)); // true

2. parseInt，parseFloat

对字符串进行解析。parseInt解析成整数，如果是整数则正常解析，如果是浮点数则返回整数部分，如果不是数字返回NaN。parseFloat解析成浮点数，如果是浮点数则正常解析，如果不是一个数字则返回NaN。

示例

var s = "1";
alert(parseInt(s)+1); // 2
var t = "s";
alert(parseInt(t)); // NaN
var u = 3.1415926;
alert(parseInt(u)); // 3
 
var a = "3.1415926";
alert(parseFloat(a)); // 3.1415926
var b = "test";
alert(parseFloat(b)); // NaN

3. eval

将eval的参数当成js代码来执行。

eval("alert(1+2)"); // 3

4. escape和unescape

对字符串进行编码和解码，这样就可以在所有的计算机上读取该字符串而不受平台影响。

var v1 = "      test";
var v2 = "你好";
alert(escape(v1)); // "%20%20%20%20%20%20test"
alert(escape(v2)); // "%u4F60%u597D"
 
var v3 = "%20%20%20%20%20%20test";
var v4 = "%u4F60%u597D";
alert(unescape(v3)); // "      test"
alert(unescape(v4)); // "你好"

5. encodeURI和decodeURI

把字符串作为 URI 进行编码和解码。

var uri = "      test你好";
document.write(encodeURI(uri)); // "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD"
var _uri = "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD";
document.write(decodeURI(_uri)); // "      test你好"

JavaScript常用对象

1. Array

数组定义可以不指定数组长度，数组中的数据类型可以任意并混合。
初始化数组的方法比较自由。
方法较多，具体查阅文档。

var arr = new Array(); // 创建数组
arr[0] = "a";
arr[1] = 3;
arr[15] = 5;
alert(arr[14]); // undefined
 
var arr1 = new Array(5); // 初始化一个数组，长度为5
var arr2 = new Array(1, 2, 3, 4); // 初始化一个数组长度为4，并初始化了元素
var arr3 = [5]; // 初始化一个数组长度为1，并初始化了元素

常用方法

按指定分隔符转化为字符串
join()
向数组末尾添加和删除元素
push()
pop()
对数组进行字典排序
sort()

2. String

可以对基本数据类型String类型变量使用String对象方法。

常用方法（多数与Java类似）

字符串截取
subString(a, b)：从a截取到b，含头不含尾。
subStr(a, b)：从a开始截取b个字符。
方法较多，具体查阅文档。

示例

var s = "hello-world";
var s1 = s.substring(2,5);
document.write(s1+"<br />"); // "llo"
var s2 = s.substr(2,5);
document.write(s2+"<br />"); // "llo-w"

3. Date

与Java类似。方法较多，具体查阅文档。

var mydate = new Date();
alert(mydate.getDate()); // 日：15
alert(mydate.getMonth()); // 月1：0
alert(mydate.getDay()); // 星期四：4

4. Math

与Java类似。方法较多，具体查阅文档。

var t = Math.random(); // 返回的是0-1之间的随机数
var f = Math.floor(-5.9999); // 下舍入：-6
var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp

5.1 正则表达式对象的建立

使用new创建对象：var _reg = new RegExp("正则表达式");
直接使用正则表达式创建对象：var _reg = /^正则表达式/，注意：不可以有双引号。

5.2 正则表达式的使用

test()方法用于匹配正则表达式。方法较多，具体查阅文档。

<script type="text/javascript">
function _check() {
    var _reg = /^[0-9]{11}/;
    var _tel = document.getElementsByName("tel")[0].value;
    if (_reg.test(_tel)) {
        alert("是一个电话号码");
    } else {
        alert("不是一个电话号码");
    }
}
</script>
电话号码：
<input type="text" name="tel" />
<br/>
<input type="button" value="检查是否是电话号码" onclick="_check()" />