JavaScript基础知识点

了解 JavaScript

JavaScript是什么

  • JavaScript是一种运行在客户端(浏览器)高级的、解释型的编程语言的,实现人机交互效果
  • 由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持
  • JavaScript乍一听与Java在名字上相似,但其实是雷锋与雷锋塔、老婆和老婆饼的关系hhh
  • 一般简称JS,以下都以JS称呼

JS的作用(做什么)

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

JS的组成(有什么)

JS 是由ECMAScript和WebApi 组成。WebApi又由DOM(页面文档对象模型)和BOM(浏览器对象模型)构成

  • ECMAScript是由网景的布兰登·艾克开发的一种脚本语言的标准化规范;最初命名为Mocha,后来改名为LiveScript,最后重命名为JavaScript[1]。
  • DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
  • Bom 操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等

JS的位置

内部引入

  • 直接在HTML文件中引入(一般在标签的底部使用)
    <script>
        alert('我是内部引入的JS')
    </script>

外部引入

  • 是指将JS文件外置在HTML文件的外部,在head标签内引入相对路径中的JS文件
  • 使代码更加有序,易于复用,且没有了脚本的混合,HTML也会更加易读
    <head>
        <script src="./my.js"></script>
    </head>
    

内联使用

  • 在标签内部使用
    <button onclick="alert('我是内联JS')">我是按钮</button>

JS注释

  • 单行注释 // xxx
  • 多行注释 /* xxx */

字面量

  • 了解什么是字面量前,先知道什么是语法?

    是人和计算机打交道的规则—我们按照这个规则去敲代码

  • 比如输入语法:
    document.write('输出的文字-文字展示到页面')
    document.write('<h1>我是嵌套的h1标签</h1>')
    
    alert('要输出的内容-弹框形式展示到页面')
    
    console.log('控制台打印的内容')
  • 在计算机科学中,字面量(literal)是在计算机中描述 事/物
    比如:
  • 初级前端开发薪水是:8k 此时8k就是数字字面量
  • ‘hello world’ :这是字符串字面量
  • 还有其他数组字面量、对象字面量

变量

变量是什么?

  • 通俗来讲:变量是计算机存储数据的“容器”
  • 白话:变量就是一个装东西的盒子
  • 变量不是数据本身,它们仅仅是一个用于存储数值的容器,可以理解为是一个个用来装东西的盒子~
    例如:用户在网页输入自己姓名或者电话等信息时候,就是通过变量存储。

变量的声明方式

在JS中创建变量被称为声明变量,JS中变量声明又分为显示声明和隐式声明。其中显示声明中,声明关键字有var、let、const、function、class、import

  • let 变量名
  • 语法:声明关键字 + 变量名
  • let 即关键字(let:允许、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语
  • 注意let不能多次声明一个变量名
  • 可以一次声明多个变量 let age=18,name=’zimo’;
    // 声明关键字 + 变量名
    let age;
    age = 18;   // 变量声明后一般会赋值 也可以连写let age = 18;
    age = 19;   // 变量可以更新值  
    document.write(age);
  1. 案例:用户输入姓名后,页面显示刚才用户输入的姓名
    <script>
       let name = (prompt('请输入您的姓名'))
       document.write(name)
    </script>
  2. 案例:交换变量的值
    需求:2个不同变量的变量去交换其值。
    <script>
        let num1 = 10
        let num2 = 20
        let num3 = ''
        num3 = num1
        num1 = num2
        num2 = num3
        console.log(num1,num2);
    </script>

变量本质

先了解一下内存:是计算机存储数据的地方,相当于一个空间
变量:是程序在内存中申请的一块用来存放数据的小空间

变量的命名规则与规范

  • 不能用关键字
    比如:let var if for等
  • 只能使用下划线、字母、数字、$组成,且数字不能开头
  • 字母严格区分大小写
  • 起名要有意义
  • 遵守小驼峰命名法 (第一个单词首字母小写,后面每个单词首字母大写,如:UserName)

拓展 let 与 var 区别

  • let为了解决var的一些问题
  • var可以先使用 在声明(不合理)
  • var声明过的变量可以重复声明(不合理)
  • 比如变量提升、全局变量、没有块级作用域等等