JavaScript引入方式和常用输出方式-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第1章-课后作业)

【案例1-2】 JavaScript引入方式

一、案例描述

  1. 考核知识点

JavaScript的几种引入方式

  1. 练习目标
  • 掌握JavaScript的引入方式。
  1. 需求分析

在网页中编写JavaScript时,分别演示通过嵌入式、外链式、行内式3中方式来引入JavaScript代码。

  1. 案例分析
  1. 嵌入式

直接使用

  •    
  • 根据上面的分析,通过外链式来引入JavaScript代码,具体代码如下:

    1.    
    2.        
    3.         </span><span style="color:#000000;">外链式</span><span style="color:#000000;">
    4.    
    5.    
    6.         // test.js为外部.js文件
    7.    

    根据上面的分析,通过行内式来引入JavaScript代码,具体代码如下:

    1.    
    2.        
    3.         </span><span style="color:#000000;">行内式</span><span style="color:#000000;">
    4.    
    5.    
    6.       
      打开空白页
    7.    

    【案例1-3】常用输出语句

    一、案例描述

    1. 考核知识点

    alert()、console.log()、document.write()

    1. 练习目标
    • 掌握alert()函数的应用。
    • 掌握console.log()函数的应用。
    • 掌握document.write()函数的应用。
    1. 需求分析

    在浏览网页时,经常会看到一些弹出的警示框,用于提醒用户当前的操作是否完成,例如,在电商网站中,当完成付款时,会弹出支付情况的警示框。

    console.log()用于在控制台输出结果,可以帮助开发人员在项目开发时调试内容。

    document.write()用于在HTML文档输出内容。

    1. 案例分析
    1. alert()效果如图1-3所示。

    JavaScript引入方式和常用输出方式-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第1章-课后作业)_第1张图片

     

    1. “登录成功!”效果展示
    1. console.log()效果如图1-4所示

     

    1. “控制台输出”效果展示

    1. document.write()效果如图1-5所示

    JavaScript引入方式和常用输出方式-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第1章-课后作业)_第2张图片

     

    1. “HTML文档中输出”效果展示

    二、案例实现

    根据上面的分析,实现这3种方式,具体代码如下::

    1.    
    2.        
    3.         </span><span style="color:#000000;">常用输出语句</span><span style="color:#000000;">
    4.    
    5.    
    6.        
    7.    

    你可能感兴趣的:(JavaScript,javascript,前端,html)