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  不知名前端李小白  阅读(48)  评论(0编辑  收藏  举报