JavaScript基本使用语法

一、JavaScript用法🔥

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

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中（通常放在body）

JavaScript代码可以有三种书写方式：

  • 行内式

  • 内嵌式

  • 外链式

1）行内式

<button onclick="JS代码"></button>

🔺注意：这种使用JS代码的方式局限性很大，只针对事件进行添加。并且代码分离性最差，可读性不强（用得少）

 

2）内嵌式

<script>
  /*
      JS代码
      ...
  */
</script>

内嵌式的方式就是将JavaScript代码放在 <script> </script> 标签中，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

🔺注意：那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 老旧的实例中使用 type="text/javascript" -->
        <script type="text/javascript">
            
        </script>
        
        <!-- 当前不需要 -->
        <script>
            alert("我是JavaScript代码~")
        </script>
    </body>
</html>

当然可以把 <script> </script> 标签放在head标签，但是由于浏览器进行渲染的时候是从上到下的执行顺序进行渲染，这样会导致浏览器在加载页面时出现延迟空白现象，影响用户体验 <script> </script> 放在body标签的末尾

 

3）外链式

可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码，外部 JavaScript 文件的文件扩展名是.js

外部js文件（myScript.js）：

alert(“我是外部.js文件里的JavaScript代码，我可以供多个网页使用~”)

引入外部js文件：

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

外链式JavaScript代码需要写在单独的 .js 文件中，供其他html页面引入使用。

引入方式是通过 <script src=''></script> 中src属性引入

🔺注意：

（1）使用外链的 script 标签中不能写任何内容

（2）外部脚本中不能包含 script 标签

二、JavaScript语法🔥

JavaScript 是一个脚本语言，它是一个轻量级，但功能强大的编程语言。

每一行代码都是一条指令，需要一个结束符 ; 

JavaScript语法严格区分大小写！

2.1 字面量

在编程语言中，一般固定值称为字面量，如 3.14

  • 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)
  • 字符串（String）字面量 可以使用单引号或双引号
  • 表达式字面量 用于计算
  • 数组（Array）字面量 定义一个数组
  • 对象（Object）字面量 定义一个对象
  • 函数（Function）字面量 定义一个函数
//数字字面量
3.14

//字符串字面量
"John Doe"

//表达式字面量
1 + 2

//数组字面量
["吃饭","睡觉","打代码"]

//对象字面量
{"name":"张三","age":"18"}

//函数字面量
function fun(){...}

2.2 变量

在编程语言中，变量用于存储数据值，JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

<script>
var a = 1;
var b = 2;
</script>

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。

注意：变量是一个名称。字面量是一个值

2.3 运算符

JavaScript 使用算数运算符（+ - * /）来计算值

<script>
    document.getElementById("demo").innerHTML = (7 + 8) * 10;
</script>

JavaScript 使用赋值运算符（=）向变量赋值

<script>
    var a,b;
    //变量赋值
    a = 1;
    b = "JS"
</script>

2.4 关键字

JavaScript 关键字用于标识要执行的操作。和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到：

let、new、case、class、if、else....等关键字都是不能被var声明成变量使用的！

2.5 注释

单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）

<script>
    //我是注释内容，不会被显示
</script>

也可以把注释放到代码结尾处：

<script>
    var x=5;    // 声明 x 并把 5 赋值给它
    var y=x+2;  // 声明 y 并把 x+2 赋值给它
</script>

多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略

<script>
    /*
        这是多行注释，
        所有内容都不会被解析执行
    */
</script>

更多基础语法会在后续详细讲解~

参考文章：https://www.runoob.com/js/js-howto.html

posted @ 2021-12-30 10:41  不知名前端李小白  阅读(224)  评论(0)  编辑  收藏  举报