JS基础知识之初识JS

木可倾心
225 阅读3分钟

js基础知识

认识JS

1. 什么是JS

JS是JavaScript的简称

是一种运行在客户端(浏览器)的编程语言，实现人机交互效果

2. JS的作用

  • 网页特效（监听用户的一些行为让网页做出对应的反馈）
  • 表单验证（针对表单数据的合法性进行判断）
  • 数据交互 （获取后台数据，渲染到页面）
  • 服务编程（node.js）

3. JS的组成

  • ECMAScript ：规定js基础语法的核心知识（js规范）

    • 比如：变量，分支语句，循环语句，对象等

  • Web APIs

    1. DOM 页面文档对象模型

      • 操作文档,比如对页面元素进行移动，大小，添加删除等操作

    2. BOM 浏览器对象模型

      • 操作浏览器,比如页面弹窗，检查窗口宽度，存储数据到浏览器等
      • DOM属于BOM

      image-20220324203928148.png

JS的书写位置（引入方式）

1. 内部

  • 直接写在html文件里面，用script标签包住
  • script标签写在</body>上面

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        alert("你好！娇贵的小火子")
    </script>
</body>

</html>

注意：将<script>放在html文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载，如果放在上面，就会先加载JS,有可能由于HTML没有被加载而失效。

2. 外部

  • 代码写在以.js结尾的文件里
  • 通过<script>标签里面的src属性引入到html页面

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
 	<!-- 在标签中不要写代码，会被忽略 -->   
    <script src="./js/xx.js"></script>
</body>

</html>

注意：

  • script标签中间无需写代码，否则会被忽略！
  • 外部js会使代码更加有序，更容易复用，且没有脚本混合，HTML也会更加易读

3. 内联

  • 代码写在标签内部（不推荐）

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="alert('点击我月薪过百万')">点击我月薪过百万</button>
</body>

</html>

JS注释

注释是编写程序时，写程序的人给一个语句，代码段，函数等的解释或提示，能提高代码的可读性，不会被计算机编译

1. 单行注释

  • 符号：//

  • 作用：//右边代码会被忽略，不会被编译

  • 默认快捷键：ctrl+/

    image.png

2. 快注释

  • 符号：/* */

  • 作用：在/* 和 */之间的所有内容都会被忽略

    image.png

了解JS结束符

1. 结束符

  • 代表语句结束
  • 英文分号 ;
  • 可写可不写，为了风格统一要么每句都写要么都不写（按照团队要求）

JS输入输出语法

1. 什么是语法：

  • 人和计算机打交道的规则规定
  • 我们要按照这个规则去写
  • 我们程序员需要操作计算机，需要计算机看懂

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

2. JS常见的输出语法:

  • document.write() : 直接在body标签中书写内容

    document.write("要输出的内容");
//输入的内容是标签，会被解析成网页元素，注意：必须用反引号
document.write(`<button>我是按钮</button>`)

  • console.log() ：控制台输出,程序员调试使用

    console.log('要输出的内容')

  • alert() 页面弹窗输出

    alert("控制台打印")

3. JS常见的输入语法

  • prompt() 显示一个对话框，包含提示文字，获取输入的内容是字符串。

    prompt("请输入内容")

4. 注意

  • 输入输出语法括号里面加单引号和双号是没有区别的
  • 如果是单引号包裹，内容里面不能再有单引号，双引号也是如此
avatar
文章
阅读
粉丝