javaScrip入门

最新推荐文章于 2023-08-06 08:23:15 发布

向你丢了一个BUG

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量491

点赞数 4

分类专栏： Javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_62917168/article/details/126871379

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、常用单词

1.getElementsByTagName：获取元素通过标签名字
2.addEventListener：添加事件监听器
3.script：脚本
4.document.write：文档写入
5.alert：提示 -弹窗
6.onclick：鼠标点击
7.console.log：控制台显示
8.typeof：运算符，关键字
9.prompt：键盘输入
10.undefined ：未定义
11.length：数组长度
12.Array：数组
13.for-in：遍历数组
14.onmouseover：鼠标进入时 /事件
15.parseFloat：字符串转换成浮点数-parseInt：字符串转换成整数
16.isNaN：是否为非数值 /是则为真
17.number：数字
18.boolean：布尔
19.sort：升序
20.break：截断跳出
21.index：索引
22.floor：向下取整
23.ceil：向上取整
24.round:四舍五入
25.abs：返回绝对值
26.eval：解析字符串并运算
27.max：比较最大值
28.return：返回
29.min：比较最小值
30.random：随机数
31.function：函数
32.onmouseout：鼠标移出事件
33.function：函数（方法)
34.close（）：关闭当前窗口
35.onkeydown：键盘按下事件（前）
36.onkeyup：键盘松开事件
37.onkeypress：键盘按下事件（后）
38.getFullYear（）：年份
39.getMonth（）：月份（0–11）
40.getDate（）：几号
41.getDay（）：星期几（周一至周六）
42.getHours（）：小时（0–23）
43.getMinites（）：分钟
44.getSeconds（）：秒数（0–59）
45.getMilliseconds（）：毫秒数
46.getTime（）：从1970至今的毫秒数
47.Date.now（）：从1970至今的毫秒值
获取元素对象方式:
getElementByld
getElementsByName
gatElementsByTagName
getElementByClassName

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

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

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

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

二、JavaScript输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

使用window.alert()

window.alert("我是一个弹窗") ；

写到 HTML 文档

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

<!DOCTYPE html>
<html>
<body>
<p id="demo">这是一个段落</p>i
<script>
document.write("段落已经修改！");
</script>

</body>
</html>

写到控制台

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

console.log("去浏览器控制台找我。");

三、 JavaScript 数据类型

数字（Number）可以是整数或者是小数，或者是科学计数(e)

3.14
1001
123e5

字符串（String） 可以使用单引号或双引号

"字符串"

'字符串'

数组（Array）定义一个数组：

[ 4 , 5 , 6 , 7]

对象（Object） 定义一个对象：

{ name:"John", age:50, age:18 }

函数（Function）方法定义一个函数：

function num (a, b) { return a * b;}

四、JavaScript变量

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

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

var x；//创建未赋值默认，undefined
x = 5；

变量是一个名称。字面量是一个值。

一条语句，多个变量

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

var name="Jock", age=30;

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

var a,b=1;

a为undefined , b为1；

五、JavaScript运算符

运算符 = 用于赋值。

var a = 5;

运算符 + 用于加值，和字符串结合可用于拼接。

var a = "拼接";

var b= "字符串";

document.write(a+b); //输出：拼接字符串

算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	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

JavaScript 赋值运算符

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

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值
==	等于	x==8	false
==	等于	x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
===	绝对等于（值和类型均相等）	x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

条件运算符又称三元运算符

语法： var num =(表达式)?value1:value2

//如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

var flag=(age<18)?"年龄太小":"年龄已达到";

六、注释

单行注释：

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

// 输出标题：

document.write("欢迎来到我的主页");

多行注释：

多行注释以 /* 开始，以 */ 结尾。

/*

这是多行注释

*/

document.write("欢迎来到我的主页");

七、 JavaScript 条件语句

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

if 语句

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

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

//请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

if...else 语句

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

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

if...else if...else 语句

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

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

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

switch(n) {

        case 1:

                执行代码块 1 break;

        case 2:

                 执行代码块 2 break;

        default:

                与 case 1 和 case 2 不同时执行的代码

}

JavaScript break 和 continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

break 和 continue 语句仅仅是能够跳出代码块的语句。

八、JavaScript 循环

不同类型的循环

JavaScript 支持不同类型的循环：

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

for循环：

语法：

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 1 初始化开始前执行

语句 2 定义运行循环条件

语句 3 迭代部分

for (var i=0; i<5; i++) {

x=x + "该数字为 " + i + "<br>";

}

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件)
{
需要执行的代码

}

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
需要执行的代码
}
while (条件);

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

九、JavaScript 函数（方法）

函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function，关键词 function 必须是小写：

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

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

function myFunction(var1,var2)
{
代码
}

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

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

在使用 return 语句时，函数会停止执行，并返回指定的值。

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

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

调用 JavaScript 函数：

作为一个函数调用

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

这是调用 JavaScript 函数常用的方法，但不是良好的编程习惯
全局变量，方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口（window 对象）。

该实例返回 this 的值是 window 对象:

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

函数作为全局对象调用，会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试以下！修改 fullName 方法并返回 this 值:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

函数作为对象方法调用，会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。
this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

十、JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

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

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

十一、字符串

字符串长度

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

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

特殊字符

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：

转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

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

字符串可以是对象

通常， 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 对象。它会拖慢执行速度，并可能产生其他副作用。

字符串属性：

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

字符串方法：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值