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

相关文章
|
10月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
287 1
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
97 7
|
10月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
404 1
|
11月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
1238 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
11月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
115 4
|
11月前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
11月前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
本文深入探讨了JavaScript中闭包的概念,从定义、作用域链和实际应用等方面进行了详细阐述。通过生动的比喻和实例代码,帮助读者理解闭包在函数执行上下文中的重要性,以及如何在实际开发中有效利用闭包解决复杂问题。同时,文章也指出了过度使用闭包可能导致的潜在问题,并给出了相应的优化建议。
|
11月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
11月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
199 0