前端三剑客之JavaScript初体验

最新推荐文章于 2024-06-23 23:55:33 发布

Bryce李小白

最新推荐文章于 2024-06-23 23:55:33 发布

阅读量551

点赞数

分类专栏： Web前端知识体系

本文链接：https://blog.csdn.net/lijizhi19950123/article/details/83058908

版权

Web前端知识体系专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为什么学习JavaScript？

从这两年的发展趋势来看，大前端应该是打了实锤了，而JavaScript作为web前端的主要编程语言，自然是不容小觑。HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 决定网页的行为。

JavaScript是什么？

JavaScript是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript直接写入Html输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>

<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

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

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

JavaScript：点击事件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>点击事件范例</title> 
</head>

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

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

<button type="button" onclick="alert('你最帅!')">点我!</button>
	
</body>
</html>

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>改变html的内容</title> 
</head>

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

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

您会经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>点击灯泡可以打开关闭这盏灯</title> 
</head>

<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>

<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

JavaScript：改变 HTML 样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>改变HTML样式</title> 
</head>

<body>

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

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>

<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

JavaScript:验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>验证输入</title> 
</head>

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

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

<input id="demo" type="text">

<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

JavaScript 显示数据

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

使用window.alert(),你可以弹出警告框来显示数据

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>弹出警告框来显示数据</title>
</head>

<body>

<h1>我的第一个页面</h1>

<p>我的第一个段落。</p>

<script>
window.alert(5 + 5);
</script>
	
</body>
</html>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>操作 HTML 元素</title> 
</head>

<body>
	
<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落。</p>

<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

写到 HTML 文档

document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>写到控制台</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>

<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>

<script>
a = 500;
b = 20;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

JavaScript变量

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

<!DOCTYPE html>
<html>

<head> 
<meta charset="utf-8"> 
<title>JavaScript变量</title> 
</head>

<body>

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

<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

</body>
</html>

JavaScript 字面量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e),如3.14，100,123e5
字符串（String）字面量可以使用单引号或双引号:如"Lee", ‘Lee’
表达式字面量用于计算如：5+5,6*6
数组（Array）字面量定义一个数组：[2,0,1,3,1,4]
对象（Object）字面量定义一个对象：{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量定义一个函数,如下所示

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

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 10; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = “ljz”; // String 通过字符串字面量赋值
var cars = [“lee”, “zhang”, “wang”]; // Array 通过数组字面量赋值
var person = {firstName:“lee”, lastName:“zhang”}; // Object 通过对象字面量赋值

JavaScript函数

JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
   	return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 字母大小写

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 语句标识符

在这里插入图片描述

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。在 JavaScript中，几乎所有的事物都是对象。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对象定义</title> 
</head>

<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>

<script>
var person = {firstName:"李小白", lastName:"苏小轼", age:23, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.lastName + " 现在 " + person.age 
	+ " 岁,"+"他的眼睛是"+person.eyeColor+"色";
</script>

</body>
</html>

访问对象属性

通过.property来访问对象属性

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>通过.property来访问对象属性</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>

<p>
你可以使用 .property 或 ["property"].
</p>

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

<script>
var person = {
    firstName : "A",
    lastName : "B",
    id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

通过[“property”]来访问对象属性

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>通过["property"]来访问对象属性</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性: 
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "A",
    lastName : "B",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>访问对象方法</title> 
</head>

<body>

<p>创建和使用对象方法。</p>

<p>对象方法作为一个函数定义存储在对象属性中。</p>

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

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

如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>访问 person 对象的 fullName 属性</title> 
</head>

<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "你",
    lastName : "好 帅",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
	
</body>
</html>