JavaScript入门(part2)--JS书写方式及注释

学习笔记,仅供参考,有错必纠

参考自:pink老师教案


文章目录

    • JavaScript入门
      • JS书写方式
        • 行内式
        • 内嵌式
        • 外部JS文件
      • JS注释



JavaScript入门


JS书写方式


JS有3种书写方式,分别为行内、内嵌和外部,下面我们将进行一一演示。


行内式


  • 举个例子

HTML代码:


"en">


    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    JS导入方式



    "button" value="点我" οnclick="alert('Hi~')" />



页面:

JavaScript入门(part2)--JS书写方式及注释_第1张图片


  • 注意事项
    • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以on开头的属性,如:onclick)
    • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
    • 可读性差, 在html中编写JS大量代码时,不方便阅读;
    • 引号易错,引号多层嵌套匹配时,非常容易弄混;

内嵌式


  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS导入方式title>
    <script>
        alert('Hello  World~!');
    script>
head>

<body>

body>

html>

注意,可以将多行JS代码写到script标签中。

页面:

JavaScript入门(part2)--JS书写方式及注释_第2张图片


外部JS文件


  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS导入方式title>
    <script src="js/jsDemo1.js">script>
head>

<body>

body>

html>

页面:

JavaScript入门(part2)--JS书写方式及注释_第3张图片


  • 注意事项
    • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
    • 引用外部 JS文件的成对script标签中不可以写代码
    • 该引用方式,适合于JS 代码量比较大的情况

JS注释


单行注释的注释方式如下:

// 我是一行文字

多行注释的注释方式如下:

/*
  我是第1行
  我是第2行
*/

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