学习周记5 JavaScript

最新推荐文章于 2022-02-26 22:20:13 发布

「理想家」

最新推荐文章于 2022-02-26 22:20:13 发布

阅读量172

点赞数 1

本文链接：https://blog.csdn.net/estheri/article/details/115360491

版权

javascript

JavaScript 用法

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript

body 中的 JavaScript 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>body中的JavaScript函数</h1>
		<p id="demo"><button>点这里</button></p>
		<button type="button" οnclick="myFunction()">please click here</button>
		<script>
		function myFunction(){
			document.getElementById("demo").innerHTML="<button type='botton' οnclick='myFunctions()'><p id='wow'>让你点这里了！</p></button>";
		}
		function myFunctions(){
		    document.getElementById("wow").innerHTML="<button type='botton' οnclick='myFunctions1()'><p id='wow1'>再点五下！</p></button>";
		}
		function myFunctions1(){
		    document.getElementById("wow1").innerHTML="再点五下！！";
		}
		
		</script>
	</body>
</html>

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

	<button type="button" οnclick="myFunction()"><img id="image" src="smiley.gif" width="160" height="120"></button>
<script>
	function myFunction(){
document.getElementById("image").innerHTML="<button><img landscape.jpg></button>";
	}
	</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

head中的JavaScript函数

<head>
<meta charset="utf-8"> 
<title>head中的JavaScript函数</title> 
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>

JavaScript 对象

<script>
var person = {firstName:"朱", lastName:"一龙", eyeColor:"黑"};
document.getElementById("demo").innerHTML =
	person.firstName +person.lastName +" 的眼睛是 " + person.eyeColor + " 色的.";
</script>

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

JavaScript 函数

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
**function functionname()
{
    // 执行代码
}**
当调用该函数时，会执行函数内的代码。

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

调用带参数的函数

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

<p>点一下下面的按钮！</p>
<button onclick="myFunction('我的世界','小公主')">点击这里</button>
<script>
function myFunction(myworld,girl){
	alert("欢迎来到" + myworld + ", 我娇贵的" + girl);
}
</script>

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

JavaScript 事件

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

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