首页 > 编程语言 >JavaScript用法

JavaScript用法

时间:2023-08-09 16:23:24浏览次数:40  
标签:函数 Title 外部 代码 JavaScript 用法 document

JavaScript 用法

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

<script>标签

<script>和</script>之间的代码包含了JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    alert("我的第一个JavaScript代码")
</script>
<body>

</body>
</html>

浏览器会解释并执行位于<script>和</script>之间的JavaScript代码

<body>中的JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    document.write("<h1>你好,JavaScript</h1>")
    document.write("<p>JavaScript是一门优秀的脚本语言!</p>")
  </script>
</body>
</html>

JavaScript 函数和事件

上述代码中的JavaScript语句,会在页面加载时执行。通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。把JavaScript代码放入函数中,就可以在事件发生时调用该函数。

在<head>或者<body>的JavaScript

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

<head>中的JavaScript函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "我的第一个JavaScript函数"
      }
    </script>
</head>
<body>
  <h1>欢迎来到JavaScript的世界</h1>
  <p id="demo">你好,JavaScript~~</p>
  <button type="button" onclick="myFunction()">点我试试!</button>
</body>
</html>

<body>中的JavaScript函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
  <h1>欢迎来到JavaScript的世界</h1>
  <p id="demo">你好,JavaScript~~</p>
  <button type="button" onclick="myFunction()">点我试试!</button>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "我的第一个JavaScript函数"
    }
  </script>
</body>
</html>

外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个页面使用的代码。外部JavaScript文件的文件扩展名是.js。如果使用外部文件,需要在<script>标签的src属性中设置该.js文件;

function myFunction() {
    document.querySelector("#demo").innerHTML = "外部调用JavaScript函数"
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="myScript.js"></script>
</head>
<body>
    <h1>欢迎来到JavaScript的世界</h1>
    <p id="demo">你好,JavaScript~~</p>
    <button type="button" onclick="myFunction()">点我试试!</button>
</body>
</html>

注意:外部脚本不能包含<script>标签。

标签:函数,Title,外部,代码,JavaScript,用法,document
From: https://www.cnblogs.com/codingbao/p/17617120.html

相关文章

  • JavaScript:表单生成器
    JavaScript:表单生成器一条小橘猫于2021-12-0116:10:56发布3393收藏38分类专栏:JavaScript文章标签:经验分享javajavascripthtml前端版权华为云开发者联盟该内容已被华为云开发者联盟社区收录加入社区JavaScript专栏收录该内容45篇文章55订阅已订阅表单属性有姓......
  • excel wps宏编辑器,用JavaScript自定义函数设置单元格符合条件后,那一行都变色
        functionjudge(){varapp=Application;//WPS表格的应用程序对象varwb=app.ActiveWorkbook;//当前工作簿varsheet=wb.ActiveSheet;//当前工作表vardataRange=sheet.UsedRange;//使用的数据范围varnumRows=dataRange.Rows......
  • 【javascript】关于 AbortController
    相关概念:https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController需求描述:后台返回10000条图片url,前端拿到后需要做成假分页,假设1页显示20张图,分成50页。部分逻辑:1for(leti=0;i<imgUrlList.length;i++){2letimage=newImage()3image.src=imgUrlLi......
  • CefSharp (铬) javascript增加内存限制
    https://stackoverflow.com/questions/55099372 好了,伙计们,我已经想出了一个解决方案。当您将这些参数传递给chrome可执行文件以将javascript内存限制设置为16it时,chrome会将其设置为3.5it。--js-flags="--max_old_space_size=16384"复制似乎将内存大小设置为3.5GB以上......
  • Go语言中三个点的用法
    在Go语言中,三个点...在不同的上下文中有不同的含义。以下是一些常见的情况:可变参数(VariadicParameters):在函数定义中,...用于表示可变参数,允许函数接受不定数量的参数。这些参数被封装在一个切片中。funcfoo(values...int){//values是一个int切片for_,v......
  • vue import 调用方法 Import是javascript中的一种模块加载方式,在Vue中也可以使用impor
    vueimport调用方法Import是javascript中的一种模块加载方式,在Vue中也可以使用import来加载组件、库或其他模块。使用import语句,可以将需要的模块导入到当前模块的作用域中,以使其可用于当前模块内的执行。原文链接:https://www.yzktw.com.cn/post/1248672.htmlImport是javascri......
  • c++中template的用法是什么?
    下文由ChatGPT生成在C++中,template是一种通用编程工具,用于创建通用的函数或类。通过使用模板,可以编写可以应用于不同数据类型的函数或类,从而实现代码的重用性和灵活性。template的使用方法如下:1.函数模板(FunctionTemplates)函数模板允许定义一个通用的函数,可以在不同数据类......
  • select的错误用法
     执行 manselect 会有如下提示 说明调用select函数时传入的timeval的值会变,所以在重复调用select的场景下,每次调用select,timeval的值都需要重新设置,如下是一个错误的示例,需要将设置时间值的代码移到while(1)里面 ......
  • 【JavaScript29】call和apply
    概率每个函数都包含两个非继承而来的方法:apply()和call()call和apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性作用call()方法和apply()方法的作用相同:改变this指向区别call():第一个参数是this,其余参数都是直接传递给......
  • merge into语句用法
    原文地址:https://zhuanlan.zhihu.com/p/47884584使用merge语句从一个或多个源中选择行以进行更新或插入表或视图。可以指定条件以确定是update还是insert目标表或视图。merge语句是组合多个操作的便捷方式。它可以让你避免多次使用INSERT,UPDATE和DELETE语句去操作数据。语法:m......