00-JavaScript基础-基本概念

简介: 计算机常识计算机只能识别0和1计算机所能识别的指令都是由0和1组成的计算机中存储和操作的数据都是0和1计算机程序是什么?一组计算机能识别和执行的指令(机器语言)程序是为了告诉计算机"做某件事或解决某个问题"而用"计算机语言编写的命令序...

计算机常识

  • 计算机只能识别0和1
  • 计算机所能识别的指令都是由0和1组成的
  • 计算机中存储和操作的数据都是0和1

计算机程序是什么?

  • 一组计算机能识别和执行的指令(机器语言)
  • 程序是为了告诉计算机"做某件事或解决某个问题"而用"计算机语言编写的命令序列(语句)"
  • 只要让计算机执行这个程序,计算机就会自动地、有条不紊地进行工作,计算机的一切操作都是由程序控制的,离开程序计算机将一事无成

什么是编程语言?

  • 编程语言就是人和计算机交流的工具,人类通过编程语言来控制、操作计算机
  • 编程语言和我们说的中文、英文本质上没有区别,只是语法比较特殊

编程语言分类

  • 机器语言

    • 所有的代码里面只有0和1, 0表示不加电,1表示加电(纸带存储时 1有孔,0没孔)
    • 优点:直接对硬件产生作用,程序的执行效率非常高
    • 缺点:指令又多又难记、可读性差、无可移植性
  • 汇编语言

    • 符号化的机器语言,用一个符号(英文单词、数字)来代表一条机器指令
    • 优点:直接对硬件产生作用,程序的执行效率非常高、可读性稍好
    • 缺点:符号非常多和难记、无可移植性
  • 高级语言

    • 非常接近自然语言的高级语言,语法和结构类似于普通英文
    • 优点:简单、易用、易于理解、远离对硬件的直接操作、有可移植性
    • 缺点:有些高级语言写出的程序执行效率并不高
  • 对比(利用3种类型语言编写1+1)

  • 机器语言
  • 10111000 00000001 00000000 00000101 00000001 00000000
  • 汇编语言
  • MOV AX, 1 ADD AX, 1
  • 高级语言
  • 1 + 1

了解更多请点我


什么是JavaScript?

  • JavaScript简称JS,是前端开发的一门脚本语言(解释型语言)
    • 解释型语言:程序执行之前,不需要编译,直接运行时边解析边执行的语言
      • img_21bc19e7a0bca8914813567e03d2dd80.png
    • 编译型语言:程序执行之前,需要一个专门的编译过程,把程序编译成为机器语言的文件,比如exe文件
      • img_55dfe8f3da691925a0dab036ec80ff92.png

JavaScript作用

  • HTML 提供网页上显示的内容(结构)
    • img_470c13bc6a18e2613c0228210ec0a292.jpe
  • CSS 美化网页(样式)
    • img_755502d3901b8a8030a793d82f6bd852.jpe
  • JavaScript 控制网页行为(行为)
    • img_cf545b94362d2d5210d3e74d795b3500.jpe

JavaScript发展史

  • JavaScript起源于Netscape公司的LiveScript语言
    • 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
    • 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题,网景公司录用Brendan Eich(布兰登·艾奇),他在 10 天内开发出 LiveScript 语言
    • 在 Netscape Navigator 2.0 即将正式发布前,Netscape 将LiveScript 更名为 JavaScript, 目的是为了蹭Java的热度
    • 所以Java和 JavaScript之间的关系就像老婆和老婆饼一样

参考文献


JavaScript组成

  • ECMAScript:JavaScript的语法标准
    • ECMA是European Computer Manufacturers Association的缩写,即欧洲计算机制造商协会
    • ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
    • JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
  • DOM(Document Object Model):JavaScript操作网页上的元素(标签)的API
  • BOM(Browser Object Model):JavaScript操作浏览器的部分功能的API


    img_b52d9c173ac0be11a8ef34b390cf912d.png

ECMAScript起源


JavaScript书写格式

  • 和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
  • 和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离

  • 行内式格式(不推荐)
<div onclick="alert('hello world');">我是div</div>

  • 内嵌式格式
</body>
... ...
<script type="text/javascript">
       alert("hello world");
</script>
</body>
  • 内嵌式注意点
    • 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
    • HTML页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
    • 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
<head>
    <script>
        window.onload = function () { // 必须添加这句
            alert("hello world");
        }
    </script>
</head>

  • 外链式格式
<script type="text/javascript" src="01-js书写格式.js"></script>
  • 外链式注意点
    • 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="01-js书写格式.js">
    alert("hello world"); // 不会被执行
</script>
  • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度

学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038

相关文章
|
4月前
|
自然语言处理 JavaScript 前端开发
JavaScript中闭包:概念、用途与潜在问题
【4月更文挑战第22天】JavaScript中的闭包是函数及其相关词法环境的组合,允许访问外部作用域,常用于数据封装、回调函数和装饰器。然而,不恰当使用可能导致内存泄漏和性能下降。为避免问题,需及时解除引用,减少不必要的闭包,以及优化闭包使用。理解并慎用闭包是关键。
|
4月前
|
存储 JavaScript 前端开发
解释 JavaScript 中的作用域和作用域链的概念。
【4月更文挑战第4天】JavaScript作用域定义了变量和函数的可见范围,静态决定于编码时。每个函数作为对象拥有`scope`属性,关联运行期上下文集合。执行上下文在函数执行时创建,定义执行环境,每次调用函数都会生成独特上下文。作用域链是按层级组织的作用域集合,自内向外查找变量。变量查找遵循从当前执行上下文到全局上下文的顺序,若找不到则抛出异常。
43 6
|
3月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
43 7
|
5天前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
本文深入探讨了JavaScript中闭包的概念,从定义、作用域链和实际应用等方面进行了详细阐述。通过生动的比喻和实例代码,帮助读者理解闭包在函数执行上下文中的重要性,以及如何在实际开发中有效利用闭包解决复杂问题。同时,文章也指出了过度使用闭包可能导致的潜在问题,并给出了相应的优化建议。
|
26天前
|
JavaScript 前端开发
js bom的概念
js bom的概念
26 1
|
1月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
30 1
|
1月前
|
JavaScript 前端开发
JavaScript 事件的概念
JavaScript 事件的概念
48 1
|
1月前
|
JavaScript 前端开发 Java
JavaScript中的闭包概念讲解
闭包是指函数内部嵌套另一个函数,并且内部函数引用了外部函数的数据(如变量或函数)。这样的内部函数被称为闭包。以示例代码为例,`fn1` 中有两个闭包函数 `fn2` 和 `fn3`,它们都可以访问并修改 `fn1` 中的变量 `a`。
13 1
|
3月前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
53 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
|
3月前
|
JavaScript 前端开发
JavaScript函数核心概念:用于代码复用与管理。
【6月更文挑战第25天】JavaScript函数核心概念:用于代码复用与管理。示例包括定义(无参、有参、有返回值)与调用,参数按值传递。函数内修改参数不影响外部变量。
26 1