前端三剑客之JavaScript初体验

为什么学习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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值