前端基础——JavaScript

最新推荐文章于 2024-08-03 17:05:14 发布

qingqing今天掉头发了吗

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量302

点赞数 2

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

本文链接：https://blog.csdn.net/qq_63373917/article/details/122807733

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript

1.HTML 定义了网页的内容
2.CSS 描述了网页的布局
3.JavaScript 控制了网页的行为

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。
可以使用字符来定义和创建 JavaScript 对象（可以跨越多行，空格跟换行不是必须的）。

对象属性

JavaScript 对象是属性和方法的容器。
键值对在 JavaScript 对象通常称为对象属性。
访问对象属性如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>
<p id="demo"></p>
<script>
    var person = {firstName:"John",lastName:"Doe"};
    document.getElementById("demo").innerHTML=person.firstName+" "+person.lastName;
    document.getElementById("demo").innerHTML=person["firstName"]+" "+person["lastName"];
</script>
</body>
</html>

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
访问对象方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>

<p id="demo"></p>
<script>
    var person = {
        firstName: "John", lastName: "Doe",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo").innerHTML=person.fullName();
</script>
</body>
</html>

补充：通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
如果使用 fullName 属性，不添加 (), 它会返回函数的定义：

JavaScript 函数

当调用函数时，会执行该函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

在调用函数时，您可以向其传递值，这些值被称为参数。
可以发送任意多的参数，由逗号 (,) 分隔；声明函数时，要把参数作为变量来声明。
变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除。

调用带参数的函数

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>

<p>点击下方调用函数</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Paris')">点击这里</button>
<script>
    function myFunction(name,job)
    {
        alert("Welcome"+name+",the"+job);
    }
</script>
</body>
</html>

调用带有返回值的函数

通过使用 return 语句就可以实现函数将值返回调用它的地方。
在使用 return 语句时，函数会停止执行，并返回指定的值。
注意：整个 JavaScript 并不会停止执行，其将继续从调用函数的地方执行代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>

<p id="demo"></p>
<script>
    function myFunction(a,b)
    {
        return a+b;
    }
    document.getElementById("demo").innerHTML = myFunction(8,7);
</script>
</body>
</html>

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
在这里插入图片描述
HTML 事件属性可以直接执行 JavaScript 代码。
HTML 事件属性可以调用 JavaScript 函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用，在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
严格模式下，如果单独使用，this 也是指向全局(Global)对象。
在函数中，this 表示全局对象。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

显示函数绑定

在 JavaScript 中函数也是对象，就有方法，例如：apply 和 call。这两个方法异常强大，他们允许切换 this 绑定的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笨鸟先飞</title>
</head>
<body>

<p id="demo"></p>
<script>
    var person1={
        fullName:function ()
        {
            return this.firstName + " "+ this.lastName;
        }
    }
    var person2={
        firstName :"John",
        lastName : "Bob",
    }
    var x =person1.fullName.call(person2);
    document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript break 和 continue 语句

break 和 continue 语句仅仅是能够跳出代码块的语句。
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

break 语句跳出循环后，会继续执行该循环之后的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>笨鸟先飞</title>
</head>
<body>

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	for (i=0;i<10;i++)
	{
		if (i==5)
		{
    			break;
		}
    	x=x + "该数字为 " + i + "<br>";
    }
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	for (i=0;i<10;i++)
	{
  		if (i==8)
  		{
    		continue;
    	}
		x=x + "该数字为 " + i + "<br>";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>