JavaScript_Day1

小满_
72 阅读5分钟

一、JavaScript介绍

1.1 Javascript 是什么

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

2.作用：

  1. 网页特效(监听用户的一些行为让网页作出对应的反馈)
  2. 表单验证(针对表单数据的合法性进行判断)
  3. 数据交互(获取后台的数据，渲染到前端)
  4. 服务端编程(node.js)

3.JavaScript的组成

  1. ECMAScript:规定了js基础语法核心知识。 比如:变量、分支语句、循环语句、对象等等
  2. Web APis :
    • DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
    • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

1.2 Javascript 书写位置

1.内部 JavaScript：直接写在html文件里，用script标签包住

  • 规范:script标签写在</body>上面
    • 为什么要将<script>放在HTML文件的底部附近？

    原因是浏览器会按照代码在文件中的顺序加载 HTML。

    1. 提高页面加载性能：当浏览器加载 HTML 页面时，它会按照从上到下的顺序处理内容。如果 JavaScript 代码位于页面顶部，浏览器在执行脚本时可能会阻塞页面的渲染，导致用户在脚本加载和执行完成之前看到空白页面或不完整的页面布局。将其放在底部可以让页面的主要内容（如文本、图像等）先加载和显示，提供更好的用户体验。
    2. 避免依赖未加载的元素：如果 JavaScript 代码在页面顶部运行，并且依赖于页面中尚未加载的元素（例如通过 DOM 操作获取某个元素），可能会导致错误。将脚本放在底部，此时页面的大部分元素已经加载完毕，减少了出现此类错误的可能性。
    3. 提高代码的可维护性：将 JavaScript 与 HTML 的结构部分分开，使代码结构更清晰，更易于维护和理解。

    2.外部 JavaScript：代码写在以.js结尾的文件里

  • 语法:通过script标签，引入到html页面中

    • 注意：

  • script标签中间无需写代码，否则会被忽略!
  • 原因：当使用< script>标签引入外部 JavaScript 文件时，浏览器的处理方式是只关注 src 属性指定的外部文件路径，并下载和执行该文件中的代码。 如果在带有 src 属性的< script>标签中间写了代码，浏览器会忽略这些代码，而只去下载并执行 src 所指向的外部脚本文件。这是符合 HTML 和 JavaScript 规范的预期行为。 这样的设计主要是为了保持代码的清晰性和可维护性。通过将 JavaScript 代码分离到独立的外部文件中，可以使 HTML 文件更加简洁，专注于页面结构和内容，同时也方便对 JavaScript 代码进行单独的开发、调试和管理。
  • 外部avaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

    • 3.内联 Javascript：代码写在标签内部

    1.3 JavaScript 输入输出语法

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

    1.document.write('要出的内容')

  • 作用:向body内输出内容
  • 注意:如果输出的内容写的是标签，也会被解析成网页元素

    • 2.alert('要出的内容')

  • 作用:页面弹出警告对话框

    • 3.console.log('控制台打印')

  • 作用:控制台输出语法，程序员调试使用

    • 4.prompt('请输入您的姓名:)

  • 作用:显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

    • JavaScript 代码执行顺序是怎样的？
  • 按HTML文档流顺序执行JavaScript代码
  • alert()和 prompt()它们会跳过页面渲染先被执行

    • 二、变量

    2.1 变量是什么

    1.概念：变量是程序在内存中申请的一块用来存放数据的小空间，是计算机中用来存储数据的“容器”它可以让计算机变得有记忆。

    2.注意:变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

    2.2 变量的基本使用

    1.声明变量:要想使用变量，首先需要创建变量(也称为声明变量或者定义变量)

    1. 语法:let 变量名
    2. 声明变量有两部分构成:声明关键字、变量名(标识)
    3. let 即关键字(let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明(定义)变量的词语

    2.3 拓展-let和var的区别

    1.let 和 var 区别:

  • 在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。
  • var现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
  • let 为了解决 var 的一些问题。

    • 2.var 声明的局限性:

  • 可以先使用 在声明(不合理)
  • var 声明过的变量可以重复声明(不合理)
  • 比如变量提升、全局变量、没有块级作用域等等

    • 三、数据类型

    3.1 分类

    1.原始数据类型（类似Java的基本数据类型）

    1. number：表示数字、小数、NaN（not a number 一个不是数字的数字类型）
    2. string：表示字符或字符串，由 “” 或者 ‘’ 表达
    3. boolean：true和false
    4. null：一个对象为空的占位符 object
    5. undefined：未定义。如果一个变量没有初始化给值，则会被默认赋值为undefined

    2.引用数据类型（对象） object

    avatar
    文章
    阅读
    粉丝