学习周记6

最新推荐文章于 2021-06-14 14:14:05 发布

Ddddd_xr

最新推荐文章于 2021-06-14 14:14:05 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/Ddddd_xr/article/details/116268301

版权

一、JavaScript 用法

HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。
脚本可被放置在 HTML 页面的 < body > 和 < head > 部分中。
浏览器会解释并执行位于之间的 JavaScript 代码

1.< body > 中的 JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		document.write("<h1>JavaScript 能够直接写入 HTML 输出流中</h1>");
		document.write("<p>只能在 HTML 输出流中使用 document.write</p>");
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

2.< head > 中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分
点击后会调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function myFunction(){
			document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
		}
		</script>
	</head>
	<body>
		<h1>把一个 JavaScript 函数放置到 HTML 页面的 < head > 部分</h1>
		<p id="demo">点击下方按钮调用head中的函数</p>
		<button type="button" onclick="myFunction()">点击这里</button>
	</body>
</html>

运行结果在这里插入图片描述
点击后结果

3.< body > 中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分
点击后会调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<h1>把一个 JavaScript 函数放置到 HTML 页面的 < body > 部分</h1>
		<p id="demo">点击下方按钮调用body中的函数</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<script>
		function myFunction(){
			document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
		}
		</script>
	</body>
</html>

运行结果在这里插入图片描述
点击后结果

4.外部的 JavaScript

把脚本保存到外部文件中，文件扩展名是 .js
外部文件通常包含被多个网页使用的代码。
使用外部文件要在 < script > 标签的 “src” 属性中设置该 .js 文件
注：可以将脚本放置于 < head > 或者 < body >中
放在 < script > 标签中的脚本与外部引用的脚本运行效果完全一致。

my Script.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JS文件代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>新建一个外部脚本文件.js</h1>
<p id="demo">将脚本放置于body或head中，点击运行函数</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="my Script.js"></script>
	
</body>
</html>

运行结果
在这里插入图片描述
点击后结果

二、JavaScript 语法

JavaScript 是一个程序语言。
JavaScript 是一个脚本语言。

1、JavaScript 字面量

字面量	分类、示例
数字字面量	整数（1009）或者是小数（3.14）科学计数(e)（123e5）
字符串字面量	单引号（‘John Doe’）或双引号（“John Doe”）
表达式字面量	用于计算(3+4,5*6等 )
数组字面量	定义一个数组
对象字面量	定义一个对象
函数字面量	定义一个函数

上述实例
（a）document.getElementById(“demo”).innerHTML = 123e5; 结果为12300000
（b）document.getElementById(“demo”).innerHTML = ‘John Doe’; 结果为John Doe
（c）document.getElementById(“demo”).innerHTML = 5 * 10; 结果为50
在这里插入图片描述

2、JavaScript 变量

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

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

<p id="demo"></p>
<script>
var d;
d =36;
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

结果
在这里插入图片描述
注：
变量可以通过变量名访问。
在指令式语言中，变量通常是可变的。
字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

3、JavaScript 操作符

JavaScript使用 算术运算符 来计算值（加减乘除表达式）
JavaScript使用***赋值运算符***给变量赋值
实例

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

<p id="demo"></p>
<script>
var x, y, z;
x = 35;
y = 26;
z = (x + y) * 10/2;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

结果
在这里插入图片描述
JS中运算符分类

类型	实例
赋值，算术和位运算符	= + - * /
条件，比较及逻辑运算符	== != < >

4、JavaScript 语句、关键字、注释、数据类型、函数

（1）语句是用分号分隔，如 x = 5 + 6;y = x * 10;
（2）JavaScript 关键字用于标识要执行的操作.如 var 关键字告诉浏览器创建一个新的变量
（3）JavaScript 注释，双斜杠 // 后的内容将会被浏览器忽略
（4）JavaScript 有多种数据类型：数字，字符串，数组，对象等
在这里插入图片描述
（5）
JavaScript 语句可以写在函数内，函数可以重复引用
引用一个函数 = 调用函数(执行函数内的语句)。

三、JavaScript 语句

1.语句实例

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：
document.getElementById(“demo”).innerHTML = “你好 Dolly”;

2、JavaScript 语句标识符

JavaScript 语句通常以一个语句标识符为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块
continue	跳过循环中的一个迭代
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块
for	在条件语句为 true 时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作
return	退出函数
switch	用于基于不同的条件来执行不同的动作
throw	抛出（生成）错误
try	实现错误处理，与 catch 一同使用
var	声明一个变量
while	当条件语句为 true 时，执行语句块

四、JavaScript 对象

1、对象定义

可以使用字符来定义和创建 JavaScript 对象，空格和换行不影响
实例

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

<h>创建 JavaScript 对象。</h>
<p id="a"></p>
<p id="b"></p>
<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
document.getElementById("a").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
document.getElementById("b").innerHTML =
	person.firstName +person.lastName+" 是 " + person.eyeColor + "眼睛";
</script>
	
</body>
</html>

结果
在这里插入图片描述

2、对象方法

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName()+"的学号是"+person.id;
</script>
	
</body>
</html>

结果
在这里插入图片描述
上述实例中用person.fullName()
访问函数
fullName : function()
{
return this.firstName + " " + this.lastName;
}
注意一定要加（）不添加 (), 它会返回函数的定义

五、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1、JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
当调用该函数时，会执行函数内的代码。
注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2、调用带参数的函数

在调用函数时，可以向其传递参数。这些参数可以在函数中使用。
可以发送任意多的参数，由逗号 (,) 分隔
如：myFunction(argument1,argument2)
声明函数时，把参数作为变量来声明：
如：
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
实例

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

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

</body>
</html>

点击后结果
在这里插入图片描述

3、带有返回值的函数

使用 return 语句就可以实现函数将值返回调用它的地方。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
可以不把它保存为变量使用返回值：
document.getElementById(“demo”).innerHTML=myFunction();
实例

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

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(5,7);
</script>

</body>
</html>

结果
在这里插入图片描述

六、JavaScript 事件

1、HTML 事件

在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码)
实例

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

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

</body>
</html>

结果
在这里插入图片描述
点击后

2、常见的HTML事件

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

Ddddd_xr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习周记6

JavaScript基础一、JavaScript 用法HTML 中的脚本必须位于 < script > 与 < /script > 标签之间。脚本可被放置在 HTML 页面的 < body > 和 < head > 部分中。浏览器会解释并执行位于之间的 JavaScript 代码1.< body > 中的 JavaScript<!DOCTYPE html><html> <head> <
复制链接

扫一扫