JavaScript-body 中的 JavaScript 函数\head 中的 JavaScript 函数

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

<head> 或 <body> 中的 JavaScript

可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

body 中的 JavaScript 函数

<!--注意

innerHTML="My First JavaScript Function 不能写成innerHTML("My First JavaScript Function");

<button type="button" onclick="myFunction()">Try it</button> 这行代码不能放在<script>标签中

否则不生效-

-->

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>

<head>

</head>

<body>

<center>

<h1>This is a Java Script Page</h1>

<p id="demo">Hello Java Script</p>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

<button type="button" onclick="myFunction()">Try it</button>

</center>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<head>

<title></title>

</head>

<center>

<body>

<script>

document.write("<h1>This is my first Java Script</h1>");

document.write("<p>Come with me!</p>");

</script>

</body>

</center>

</html>

-----------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------

head 中的 JavaScript 函数

<!--

<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

-->

<!--<button type="button" onclick="myFunction()">Try it</button>

在函数调用的过程中将函数的名称写错

-->

<!DOCTYPE html>

<html>

<center>

<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>

<head>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

</head>

<body>

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

</body>

</center>

</html>

时间: 2024-07-31 03:16:31

JavaScript-body 中的 JavaScript 函数\head 中的 JavaScript 函数的相关文章

javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别

项目中有个需求,事件第一次执行(立即执行)与后几次执行不同,但是直接传递定义好的命名函数,返回结果一样..如果通过匿名函数内再嵌套具名函数,结果就能返回正确!代码如下: 代码 <button class="button">按钮</button> (function(w) { //第一次定义需要执行的代码块 var fn = function() { console.log(1); }; var btn = document.querySelector('.but

Javascript入门基础知识和在HTML中的引用方式以及与JAVA之间的关系

JavaScript的基本语法: 一.执行顺序 JavaScript程序是按照出现在HTML文档中出现的顺序逐行执行的,如果需要在整个HTML文档中执行,最好将其放在HTML文件标签中.某些代码,如函数体内的代码,不会被立即执行,只有当所在函数被其他程序调用时,该代码才会被执行. 二.区分大小写 JavaScript是严格区分大小写的.例如str和Str这是两个完全不同的变量. 三.分号和空格 在JavaScript中,语句的":"是可有可无的,但大家最好每一句末尾都加上":

给大家分享12个或许能在实际工作中帮助你解决一些问题的JavaScript的小技巧

使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: 01 function Account(cash) { 02 this.cash = cash; 03 this.hasMoney

javascript 技巧总结积累(正在积累中)

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消

(转)深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head> 4.  <meta charset="utf

【转】【译】JavaScript魔法揭秘--探索当前流行框架中部分功能的处理机制

推荐语: 今天推荐一篇华为同事的同事翻译的一篇文章,推荐的主要原因是作为一个华为员工居然晚上还能写文章,由不得小钗不佩服!!! 其中的jQuery.angular.react皆是十分优秀的框架,各有特点,各位可以看看 编辑:github 原文链接:Revealing the Magic of JavaScript jnotnull发布在 JavaScript译文 我们每天都在使用大量的工具,不同的库和框架已经成为我们日常工作的一部分.我们使用他们是因为我们不想重新造轮子,虽然我们可能并不知道这些

浏览器中的JavaScript执行机制:08 | 调用栈:为什么JavaScript代码会出现栈溢出?

前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录 在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript 引擎先会对其进行编译,并创建执行上下文.但是并没有明确说明到底什么样的代码才算符合规范. 那么接下来我们就来明确下,哪些情况下代码才算是“一段”代码,才会在执行之前就进行编译并创建执行上下文.一般说来,有这么三种情况: 1.当 JavaScript 执行全局代码的时候,会编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局执行上下文只有一份. 2.当调用

Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用android方法,在这里我个人觉得有点和DWR相似. 为了让大家容易理解,我写了一个简单的Demo,具体步骤如下: 第一步:新建一个Android工程,命名为WebViewDemo(这里我在assets里定义了一个html页面). 第二步:修改main.xml布局文件,增加了一个WebView控件还有But