Javascript的基本认知

zxp鹏
113 阅读4分钟

js概念和组成

  • 一个前端网页主要由三门语言组成，他们之间是缺一不可的关系

    • HTML：确定网页的结构

    • CSS: 确定网页的样式

    • JavaScript: 确定网页的行为(交互)

      • 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
  • 总结：因为前端网页由三部分组成,HTML、CSS、JavaScript

JavaScript作用

  • JavaScript作用:确定网页的行为交互

    • 大白话： 教网页做事请。

JavaScript三个组成部分

  • ECMAScript - JavaScript的核心

    • ECMAScript定义了JavaScript的语言规范
    • JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

  • DOM - 文档对象模型

    • 一套操作页面元素的API
    • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

  • BOM - 浏览器对象模型

    • 一套操作浏览器功能的API
    • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

js三种书写位置

  • JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致

  • 1.行内样式：不推荐，因为不便于维护

    • <button onclick="window.alert('js行内写法')">欢迎来到中国</button>

  • 2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐

    • <script >alert("这是JS内联样式")</script >

  • 3.外部样式：写在js文件中，使用script的src属性导入

    • <script src="./01-JS外联写法.js"></script>

复习CSS代码的三种写法

  • 1.行内样式：不推荐，因为不便于维护

    • <h1 style="background: bisque">哈哈哈</h1>

  • 2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐

    • <style>.div{background: hotpink;}</style>

  • 3.外部样式：写在css文件中，使用link导入

    • <link rel="stylesheet" href="./01-css外联样式.css">
    • css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码

细节注意点

  • 1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
  • 2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中

js两种注释写法

  • 代码注释的作用：

    • 1.理清思路，方便自己以后阅读代码
    • 2.规范编程，方便以后别人接手代码便于维护

  • JS注释有两种写法

    • // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少

      • vscode快捷键 CTRL + /

    • /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下

      • vscode快捷键 CTRL + /

输入与输出语句

输出语句1 : 在网页弹出一个提示框，输出数据

//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");

输出语句2：在控制台打印某个数据

//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到中国");

输出语句3：将数据显示到网页

//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("中国最强");

输入语句1：在网页弹出一个输入框，让用户输入数据

//输入语句1：弹出一个输入框，可以用来输入数据
prompt("中国无敌");

输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一

//输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一
confirm("你确定你已经成年了吗？");

js代码执行原理介绍

  • 1.软件

    • 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、webstorm
    • 系统软件：windows，Linux，unix，OSX，iOS，android

  • 2.硬件

    • 三大件：CPU,内存,硬盘
    • 输入设备：鼠标,键盘,摄像头等
    • 输出设备：显示器,打印机,投影仪等

代码运行的原理

image.png

  1. 计算机将存储在硬盘中的html文件读取到内存中
  2. 浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
  3. CPU处理与计算
  4. CPU将我们代码在运行时产生的数据保存到内存中
avatar
文章
阅读
粉丝