>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25817 个阅读者 刷新本主题
 * 贴子主题:  JavaScript 入门 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-12 21:26:29     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript  入门

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

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

<script> 标签

     如需在 HTML 页面中插入 JavaScript,请使用  <script> 标签。

    <script> 和 </script>  会告诉 JavaScript 在何处开始和结束。

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

< script >
alert ( " 我的第一个 JavaScript " ) ;
</ script >

      您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码?

            
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 那些老旧的范例可能会在  <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
            

  <body> 中的 JavaScript

        在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:                    

范例

< ! DOCTYPE   html >
< html >
< body >
.
.
< script >
document.write(" < h1 > 这是一个标题 </ h1 > ");
document.write(" < p > 这是一个段落 </ p > ");
</ script >
.
.
</ body >
</ html >

JavaScript 函数和事件

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

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

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

在 <head> 或者 <body> 的JavaScript

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

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

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

<head> 中的 JavaScript 函数

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

范例

< ! DOCTYPE   html >
< html >
< head >
< script >
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</ script >
</ head >
< body >
< h1 > 我的 Web 页面 </ h1 >
< p   id = " demo " > 一个段落 </ p >
< button   type = " button "   onclick = " myFunction() " > 尝试一下 </ button >
</ body >
</ html >

<body> 中的 JavaScript 函数

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

范例

< ! DOCTYPE   html >
< html >
< body >
< h1 > 我的 Web 页面 </ h1 >
< p   id = " demo " > 一个段落 </ p >
< button   type = " button "   onclick = " myFunction() " > 尝试一下 </ button >
< script >
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</ script >
</ body >
</ html >

外部的 JavaScript

     也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

     外部 JavaScript 文件的文件扩展名是 .js。

     如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:                            

范例

< ! DOCTYPE   html >
< html >
< body >
< script   src = " myScript.js " > </ script >
</ body >
</ html >

        你可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

    myScript.js  文件代码如下:

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

                
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 外部脚本不能包含  <script> 标签。





程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-26 11:27:34 重新编辑]
  Java面向对象编程-->多线程(上)
  JavaWeb开发-->Servlet技术详解(Ⅰ)
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->创建非阻塞的HTTP服务器
  精通Spring-->Vue组件开发高级技术
  Vue3开发-->Vue组件开发基础
  Webpack 插件开发指南
  前端Vue单页面应用性能优化
  vue30道面试题
  本以为精通Vue,没想到被前阿里大佬虐哭了......
  深入理解Vue的响应式系统
  Node.js 实现远程桌面监控
  vue实现Word或Excel文档导出的功能,转换文件名乱码或者json...
  JavaScript中数组的常用方法(含ES6)
  JavaScript的HTML DOM Track 对象
  CSS margin(外边距)
  CSS Border(边框)
  HTML标签的全局属性
  HTML支持的多媒体(Media)
  HTML5 内联 SVG
  JavaScript 的代码规范
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。