JavaScript ,js基础

最新推荐文章于 2022-11-15 14:36:37 发布

qq_53587164

最新推荐文章于 2022-11-15 14:36:37 发布

阅读量1.4k

点赞数

文章标签： html 前端 js

本文链接：https://blog.youkuaiyun.com/qq_53587164/article/details/123505592

版权

本文档详细介绍了JavaScript的基础知识，包括它作为脚本语言的角色，如何直接插入HTML，对事件的响应，改变HTML内容和样式，以及验证用户输入。通过实例展示了如何使用JavaScript操作HTML元素，如改变文本、图像和样式。此外，还讲解了变量的声明、数据类型以及算术运算。最后，提到了`typeof`操作符、`null`和`undefined`的区别，并展示了`Number`和`String`对象的相关属性和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 简介

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

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript：直接写入 HTML 输出流

实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

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

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

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

</body>

</html>

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

JavaScript：对事件的反应

实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我的第一个 JavaScript</h1>

<p>

JavaScript 能够对事件作出反应。比如对按钮的点击：

</p>

</body>

</html>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我的第一段 JavaScript</h1>

JavaScript 能改变 HTML 元素的内容。

</p>

function myFunction()

{

x=document.getElementById("demo"); // 找到元素

x.innerHTML="Hello JavaScript!"; // 改变内容

}

</script>

</body>

</html>

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

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

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源（src）：

点亮灯泡

点击以下灯泡查看效果：

点击灯泡就可以打开或关闭这盏灯

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我的第一段 JavaScript</h1>

JavaScript 能改变 HTML 元素的样式。

</p>

function myFunction()

{

x=document.getElementById("demo") // 找到元素

x.style.color="#ff0000"; // 改变样式

}

</script>

</body>

</html>

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

JavaScript：验证输入

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

实

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

function myFunction()

{

var x=document.getElementById("demo").value;

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){

alert("不是数字");

}

</script>

</body>

</html>

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

实例

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

boolean

最简单的数据类型，表示真值，用true或false表示，不区分大小写，运算时类型自动转换（大部分数据类型一样），用（bool）和（boolean）强制转换

当转换为 boolean 时，以下值被认为是 FALSE：

布尔值 FALSE 本身

整型值 0（零）

浮点型值 0.0（零）

空字符串，以及字符串 "0"

不包括任何元素的数组

特殊类型 NULL（包括尚未赋值的变量）

从空标记生成的 SimpleXML 对象

所有其它值都被认为是 TRUE（包括任何资源和 NAN）。

js代码写法

1.内部引入

2.外部引入

3.行内引入

在webstotm中

1右上角浏览器点击

2快捷键ail+f2回车

//js代码的注意问题

1.在一对script的标签中有错误的js代码,那么该错误的代码后面的s代码不会执行

2.如果第一一对的script 标签中有错误，不会影响后面的script标签中的js代码执行3. script的标签中可以写什么内容type="text/javascript "是标准写法或者写

Language= "JavaScript”都可以

但是，目前在我们的htmL页面中，type和anguage都可以省略，原因htmL是遵循h5的标准

4.有可能会出现这种情况: script标签中可能同时出现type和Language的写法。

script标签在页面中可以出现多对

6.script标签- -般是放在body 的标签的最后的，有的时候会在head标签中目前讲课的时候都在body标签的后面(body中的最后)

7.如果cript标签是引入外部jS文件的作用，那么这对标签中不要写任何的js代码，如果要写，重新写-对script标签，里面写代码

JavaScript 变量

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

实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var x=5;

var y=6;

var z=x+y;

document.write(x + "<br>");

document.write(y + "<br>");

document.write(z + "<br>");

</script>

</body>

</html>

就像代数那样

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; // 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量 // const 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;

script标签在页面中可以出现多对

6.script标签- -般是放在body 的标签的最后的，有的时候会在head标签中目前讲课的时候都在body标签的后面(body中的最后)

7.如果cript标签是引入外部jS文件的作用，那么这对标签中不要写任何的s代码，如果

要写，重新写-对script标签，里面写代码
变量:========>

操作的数据都是在内存中操作

* js中存储数据使用变量的方式(名字，值--->数据)

本js中声明变量都用var---->存储数据，数据应该有对应的数据类型* js中的字符串类型的值都用双引号或者单引号

*存储一个数字10变量的声明及赋值* var num=10;

*存储一个名字

* var name="小黑”;

变量---作用存储数据的或者是操作数据*变量声明(有var有变量名字没有值)*变量初始化(有var有变量名字有值)

*变量声明的方式var变量名字:

var number;//变量的声明，此时是没有赋值的，//一次性声明多个变量

var x,y,z,ht,j;//都是声明，没有赋值

变量的命名规范

#变量名必须是字符数字下划线组成且不能是关键字或者数字开头

#变量名字要起的有意义

如：namne=‘老王’

#常量一般约定成俗的用大写字母，命名规则和变量是一样的

如：NAME = '老王'

#变量---input

#' input'用来获取用户输入的信息可以赋值给一个变量名字：

#input获取的都是 str

如：name = input('what is your name')

注释用‘’#‘’ 和 “ ‘’‘ ”三引号

写代码注释非常重要

#识别变量啥数据类型：

#如：a = 1

type(a)

isinstance（a,int）#判断a是不是 int

:交量作用:用来操作数据的(可以存储，可以读取)

*变量的声明:没有赋值

变量名;

*变量的初始化:有赋值

var变量名=值;

*注意的基本的代码的规范

* js中声明变量都用var

js中的每行代码结束都应该有分号;(写代码有分号的习惯)

js中的大小写是区分的: var N=10; n

* js中的字符串可以使用单引号，也可以使用双引号，目前我们暂时使用双引号

*变量名的注意问题---变量名的命名规范，要遵循驼峰命名法

* 1.变量的名字要有意义，

* 2.变量名有一定的规范:一般以字母，$符号,下划线开头，中间或者后面可以有$符号，字母,数字

* 3.变量名一般都是小写的

不可以使用关键词
不会单词可以用拼音，要遵循驼峰命名法
变量交换

单行注释来解释代码：

实例

// 输出标题： 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 typeof, null, 和 undefined

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

实例

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

你可以设置为 null 来清空对象:

实例

var person = null; // 值为 null(空), 但类型为对象

你可以设置为 undefined 来清空对象:

实例

var person = undefined; // 值为 undefined, 类型为 undefined

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

实例

var person; // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.

实例

person = undefined; // 值为 undefined, 类型是undefined

undefined 和 null 的区别

实例

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

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

Number 对象

Number 对象是原始数值的包装对象。

Number 创建方式 new Number()。

语法

var num = new Number(value);

注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

Number 对象属性

属性	描述
constructor	返回对创建此对象的 Number 函数的引用。
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
NaN	非数字值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	允许您可以向对象添加属性和方法。

Number 对象方法

方法	描述
isFinite	检测指定参数是否为无穷大。

toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

ES6 新增 Number 属性

ES 6 增加了以下三个 Number 对象的属性：

EPSILON: 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
MIN_SAFE_INTEGER: 表示在 JavaScript中最小的安全的 integer 型数字 (-(253 - 1))。
MAX_SAFE_INTEGER: 表示在 JavaScript 中最大的安全整数（253 - 1）。

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<h2>Number 对象属性</h2>

<p>EPSILON、MIN_SAFE_INTEGER、MAX_SAFE_INTEGER</p>

<p id="demo-x"></p>

<p id="demo-y"></p>

<p id="demo-z"></p>

<script>

var x = Number.EPSILON;

var y = Number.MIN_SAFE_INTEGER;

var z = Number.MAX_SAFE_INTEGER;

document.getElementById("demo-x").innerHTML = " Number.EPSILON: " + x;

document.getElementById("demo-y").innerHTML = " Number.MIN_SAFE_INTEGER: " + y;

document.getElementById("demo-z").innerHTML = " Number.MAX_SAFE_INTEGER: " + z;

</script>

</body>

</html>

ES6 新增 Number 方法

ES 6 增加了以下两个 Number 对象的方法：

Number.isInteger(): 用来判断给定的参数是否为整数。
Number.isSafeInteger(): 判断传入的参数值是否是一个"安全整数"。

Number.isInteger() 在参数是整数时返回 true。

实例

Number.isSafeInteger()判断传入的参数值是否是一个"安全整数"。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>JavaScript Number 方法</h2>

<p>isInteger() 方法判断参数是否为整数，如果是返回 true，否则返回 false。</p>

document.getElementById("demo").innerHTML =

Number.isInteger(10) + "<br>" + Number.isInteger(10.5);

</script>

</body>

</html>

安全整数范围为 -(253 - 1)到 253 - 1 之间的整数，包含 -(253 - 1)和 253 - 1。

实例

Number.isSafeInteger(10); // 返回 true Number.isSafeInteger(12345678901234567890); // 返回 false

String 对象

String 对象用于处理文本（字符串）。

String 对象创建方法： new String()。

语法

var txt = new String("string");

或者更简单方式：

var txt = "string";

了解 String 对象教程，请查看 JavaScript String 对象教程。

String 对象属性

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

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
endsWith()	判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白。
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

JavaScript 运算符

运算符 = 用于赋值。

运算符 + 用于加值。

运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

实例

指定变量值，并将值相加：

y=5;
z=2;
x=y+z;

在以上语句执行后，x 的值是：

JavaScript 算术运算符

<p算术运算符用于执行变量与或值之间的算术运算。="" <="" p="" style="color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><p给定y=5，下面的表格解释了这些算术运算符：

运算符	描述			例子			x 运算结果		y 运算结果
*	乘法			x=y*2			10		5
+			加法			x=y+2		7	5
-			减法			x=y-2		3	5
/		除法			x=y/2			2.5	5
%		取模（余数）			x=y%2			1	5
++		自增			x=++y			6	6
					x=y++			5	6
--		自减			x=--y			4	4
					x=y--			5	4