js基础（一）

于 2023-08-09 21:14:23 发布
阅读量114 收藏
点赞数
文章标签： javascript microsoft 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIYICHENG00/article/details/132197533
版权

一、JS的组成部分

JavaScript是由ECMAScript、文档对象模型（Document Object Model:DOM）、浏览器对象模型

（Brower Object Model:BOM）三部分构成。

  1. ECMAScript，描述了该语言的基础语法和基本对象(包含内置对象)，JavaScript的核心，描述了语言

的基本语法(变量、运算符、表达式、流程控制语句等)和数据类型(数字、字符串、布尔、array、函

数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准.

  1. 文档对象模型（DOM），描述处理网页内容的方法和接口。通过 DOM，可以访问所有的 HTML 元

素，连同它们所包含的文本和属性，可以对其中的内容进行修改和删除，同时也可以创建新的元

素；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成

由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

  1. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。BOM提供了独立于内容而与浏

览器窗口进行交互的对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的

location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象。

二、JS的引入方式

HTML 中的脚本必须位于 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

引入JavaScript需要使用script标签：

script 标签用于定义客户端脚本，script 元素即可包含脚本语句，又可通过 src 属性指向外部脚

本文件。

如果想在页面上使用JavaScript，必须使用 script 标签，把JavaScript源码放入 script 和

/script 之间。

script 标签属性：

type：指定脚本的类型。

src：指定外部脚本的url。

script 和 /script 会告诉 JavaScript 在何处开始和结束。

script 和 /script 之间的代码行包含了 JavaScript：

<script>
//定义JS代码
</script>
//引入外部JS文件
<script src="url"></script>

浏览器会解释并执行位于 之间的 JavaScript 代码。

那些老旧的实例可能会在

了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

2…1 行内引入JavaScript

在标签事件属性中填写JavaScript代码或调用函数时，调用函数时不是 事件=函数名， 而是 事件=函数名

+()

<button onclick="alert('我是一个警告框')" type="button">点击这里</button>
<head>
<script>
function myfunction(){
document.getElementById("demo").innerHTML="onclick事件触发";
}
</script>
</head>
<body>
<h1 id="demo">一个段落</h1>
<button onclick="myfunction()" type="button">点击这里</button>
</body>

2.2内部引入JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，

不会干扰页面的内容。

<!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>
<!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>

2.3 外部引入JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 

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

如果把JS源代码直接写在某个具体的页面上时(通常放在 标签下)，这样的成为内部的JavaScript。

但是当 JS 代码越来越庞大的时候，我们最好把它独立另存为一个JS文件，扩展名为.js，然后在页面上引

入即可，这样的称为外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复

用性高等特点。

三、JS三种输出

3.1向文档写入内容

输出文字。

除了直接输出文字外，它还支持带有HTML标签的输出内容。

比如直接输出一个标题

比如在输出内容中加入br换行标签

比如输入一张图片

…等等

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write("<h1>我是H1的内容</h1>");
</script>
</body>
</html>

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>

3.2警告框

**alert()**方法:

alert()方法会弹出警告框。

可以添加多个alert();他们会按照顺序依次执行。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

3.3控制台

console.log():

写入到浏览器的控制台。

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

四、JavaScript注释及注意事项

单行注释：

// 单行注释内容
var name = 'hm';

多行注释：

/* 多行注释内容 */
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

文档注释

/** 文档注释内容 */

注意事项：

  1. 字母的大小写，Name和name是两个不同的标识符。
  2. 空格和换行。这一点和CSS代码规则类似:多余的空格会被忽略，可以将一行代码分成多行写。
  3. 分号作为一个语句的结束标志，分号之后是新语句的开始。虽然省略不写通常也是没有问题的，但

还是建议大家写上。

五、JavaScript变量和数据类型

5.1标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数（凡是可以自己起名字的地方，都叫标

识符）。

标识符命名规范(包括函数名，变量等)：

由字母、数字、下划线、$符号组成;

不能以数字开头

命名不能是系统的关键字或保留字：比如new ，if，class…；关键字:赋予特殊含义的单词

区分大小写

命名最好用有意义的名称(见名之意)。比如说name，people…

驼峰原则: 首字母小写，多个单词组成，从第二个单词的首字母开始都大写; 比如: getNameById();

常量命名: 全部大写，多个单词组成，每个单词之间由下划线分割;APPLICATION_NAME

需要注意的是ECMAScript 中的一切，包括变量、函数名和操作符(typeof、instanceof、void等)都是严

格区分大小写的。例如：text 和Text 表示两种不同的变量。

5.2变量

可以发生改变的量就是变量，变量可以看做是存储数据的容器。比如一个瓶子，它既可以装入酱油、

醋；也可以装入茅台和二锅头…。

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

使用变量可以方便的获取或者修改内存中的数据。

**在我们平时开发中，使用最多的并不是固定的数据, **而是会变换的数据。

  1. 比如购物车商品的数量、价格的计算等等；
  2. 比如一首歌曲播放的时间、进度条、歌词的展示等等；
  3. 比如微信聊天中消息条数、时间、语音的长度、头像、名称等等；
  4. 比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等；

5.3变量的命名

可以给变量起一个简短名称，这个名称就是变量名。比如 x，或者更有描述性的名称，比如 age、name

等。变量名对大小写敏感（y 和 Y 是两个不同的变量）且必须以字母或下划线开始。可以通过其名称来引

用一个变量，以此显示或改变它的值。

5.4变量的声明

在 JavaScript 中创建变量通常称为“声明”变量，使用关键字 var来声明变量。

向变量赋值，使用等号;可以在声明变量时对其赋值，也可以先声明后赋值。

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可

// 声明一个变量count：
var count;
// 声明一个变量username：
var username;

在以上声明之后，变量并没有值，仅仅只是变量声明，不过可以在声明它们时向变量赋值，”=”是赋值符

号，变量名在赋值符号符号的左边，而需要向变量赋的值在赋值符号的右侧。

// 变量声明并赋值
var count = 5;
var username= "Volvo";

也可以先声明后赋值。

// 先声明后赋值
var count ;
count=100;
var username;
username = “zhangsan”;

注释：在为变量赋文本值时，请为该值加引号（单引号或双引号都可以）。

如果所赋值的变量还未进行过声明，该变量会自动声明。

// 这些语句：
x = 5; carname = "Volvo";
// 与这些语句的效果相同：
var x = 5; var carname = "Volvo";

如果再次声明了 JavaScript 变量，该变量也不会丢失其原始值。

var x = 5;
var x; // 5

在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。 但是如果

是在下面这种情况下，JavaScript 变量的值会改变

var x = 5;
var x = 7;

此时页面输出的值为7。

JavaScript也允许一次定义多个变量：

var a，b，v;

还可以在定义变量的同时给变量赋初始值：

var a=12，b，c=34;

如果一个变量没有赋值，它的值是undefined(未定义)。

5.5变量在内存中的存储

var name = "zhangsan";
var age = 18;

5.6变量的简单使用

1、小明今年20岁，小胡比小明大15岁，请问小胡今年多大?

<script>
//1、声明一个变量,用来存储小明的年龄
var xiaoming_age = 20;
//2、声明一个变量,用来存储小胡的年龄
var xiaohu_age;
//3、通过小明的年龄运算给小胡赋值
xiaohu_age = xiaoming_age + 15;
//4、输出小胡的名字
alert("小胡的年龄是:"+xiaohu_age);
</script>

2、在淘宝网购物，一件衣服55.4元，如果买4件衣服，共花多少钱?

<script>
//1、声明一个变量,用来存储衣服单价
var price = 55.4;
//2、声明一个变量,用来存储衣服的数量
var count = 4;
//3、计算得出总价格,并使用变量存储总价格
var money = price * count;
alert("衣服的总价格是:"+money);
</script>

3、思维题交换两个变量的值不使用临时变量，交换两个数值变量的值

var n1 = 5;
var n2 = 6;
n1 = n1 + n2; // 5 + 6 = 11
n2 = n1 - n2; // 11 - 6 = 5;
n1 = n1 - n2; // 11 - 5 = 6;
console.log(n1, n2);

5.7 数据类型

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序

框架。

Javascript提供了五种原始的数据类型和两种特殊数据类型用来处理数据和文字。

而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

5.8 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号;

变量字符串：如：var text=“HTML5视频教程”

可以使用"+"进行字符串的连接

在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。那么如何输出单引号或者双引号呢？

就要用到转义字符。

JavaScript中常用的转义字符**（转义就是转变原有的意思）**：

代码输出
\’单引号
\"双引号
\\反斜杠
\n换行
\r回车
\ttab(制表符)
\b退格符
\f换页符

字符串长度

length属性用来获取字符串的长度。

var str = 'Hello World';
console.log(str.length);

字符串拼接

字符串拼接使用 + 连接。

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
  1. 两边只要有一个是字符串，那么+就是字符串拼接功能。
  2. 两边如果都是数字，那么就是算术功能。

5.9 **数值（**Number）

JavaScript 只有一种数值类型。数值可以带小数点，也可以不带。极大或极小的数字可以通过科学（指

数）计数法来书写：3e4。

数值可以通过运算符进行计算。

浮点数值的最高精度是16位小数，但是在进行算术计算时其精度远远不如整数。例如，0.1加0.2的结果

不是0.3， 而是0.30000000000000004。这个舍入误差会导致无法测试特定的浮点数值。

数字可以写成十进制、八进制、十六进制。

八进制在js中表示是第一位一定要是0，后面就是八进制字数序列（0~7）

十六进制字面量前两位必须是0x，后面跟十六进制数字（09及AF）。字母A~F不区分大小写。

**温馨提示：**科学（指数）计数法、八进制、十六进制表示的数字在输出时统统会转换成十进制。

数值字面量：数值的固定值的表示法。

5.10 布尔（Boolean）

Boolean（布尔）类型用于表示真假:

比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；

比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英

雄、皮肤等；

Boolean **类型仅包含两个值：**true 和 false:

就两个值，一个是true，一个false，true表示真 false表示假

前面，讲的string或number数据类型，对应的值有无数个

5.11数组**（**Array）

2.4.4.1、为什么需要数组?

之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此

时该如何存储？

2.4.4.2、数组的概念

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就

称之为数组。

2.4.4.3、数组的定义及使用

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

使用关键字new创建或[]

创建数组的方式：

var 数组名=[数组值…值N];

var 数组名= new Array(值1…值N);

var 数组名= new Array();

可以通过数组的下标来访问数组的元素：

数组元素的顺序从0开始

数组名[0]=值;

数组名[1]=值; …

/**
JavaScript数组的创建方式:
1. 构造函数创建
var 数组名 = new Array(); -- 得到一个空数组
var 数组名 = new Array(数组); -- 创建指定长度的数组
var 数组名 = new Array(值1，值2，值3...) 创建数组并赋予值
2. 快捷创建
var 数组名 = [];
var 数组名 = [值1，值2，值3....];
JavaScript数组的属性:
length属性 用来获取数组的长度
JavaScript数组的特点:
JS数组可以存储任意数据类型
JS数组自动扩容，不是固定长度
注意事项:
当JS变量只有声明没有赋值的时候，去调用，那么undefined
当JS根本没有这个变量的时候，去调用，那么报错 arr is not defined
*/
var arr1 = new Array();
document.write("数组1的长度为:" + arr1.length + "<br>");
var arr2 = new Array(5);
document.write("数组2的长度为:" + arr2.length + "<br>");
//给数组存储数据: 通过下标来存储数据
//语法: 数组名[下标] = 值;
arr2[0] = 10;
arr2[1] = 20;
arr2[2] = 30;
arr2[3] = 40;
arr2[4] = 50;
arr2[10] = 100;
//调用数组里面的值
//语法: 数组名[下标]
document.write("下标1的值是:" + arr2[1] + "<br>");
document.write("下标20的值是:" + arr2[20] + "<br>");
document.write("数组2的长度为:" + arr2.length + "<br>");
var arr3 = new Array(5,"Hello",true,44.22);
document.write("数组3的长度为:" + arr3.length + "<br>");
var arr4 = []; //创建一个空数组 类似于 new Array();
var arr5 = [1,3,5,7]; //创建数组并赋值
var arr6 = [7];
document.write("数组6的长度为:" + arr6.length + "<br>");
// 补充 :数组 的长度 可以动态改变
var scores = []; // 空数组
console.log(scores.length);
// 清空数组
scores.length = 0;
console.log(scores);
LIYICHENG00
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值