2021-07-28 JavaScript基础

开发工具与关键技术：IDEA、DW #Web开发
作者：翁一凯
撰写时间：2021/7/28

JavaScript基础
一、JavaScript简介
JavaScript是一门脚本语言。计算机中除了脚本语言还有一下几种语言，这里我们总结一下：
汇编语言
脚本语言
机器语言
高级语言
以下注解可作为拓展材料：
1、脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。
2、汇编语言（assembly language）是一种用于电子计算机、微处理器、微控制器或其他可编程器件的低级语言，亦称为符号语言。在汇编语言中，用助记符代替机器指令的操作码，用地址符号或标号代替指令或操作数的地址。在不同的设备中，汇编语言对应着不同的机器语言指令集，通过汇编过程转换成机器指令。特定的汇编语言和特定的机器语言指令集是一一对应的，不同平台之间不可直接移植。
3、机器语言是机器能直接识别的程序语言或指令代码，勿需经过翻译，每一操作码在计算机内部都有相应的电路来完成它，或指不经翻译即可为机器直接理解和接受的程序语言或指令代码。机器语言使用绝对地址和绝对操作码。不同的计算机都有各自的机器语言，即指令系统。从使用的角度看，机器语言是最低级的语言。
4、高级语言（High-level programming language）相对于机器语言（machine language）是一种指令集的体系。在这种语言下，其语法和结构更类似汉字或者普通英文，且由于远离对硬件的直接操作，使得一般人更容易学习。高级语言通常按其基本类型、代系、实现方式、应用范围等分类。

脚本语言的特点：
对比其他类型语言编程速度更快，不需要编译、简单、易学、易用、灵活性高。当然这样的高灵活性也是有牺牲的，它的运行速度相对于其他的语言可能更慢，运行时更消耗资源。

JavaScript就是脚本语言中的一种，被广泛应用于Web应用开发，常用开为网页添加各式各样的动态功能。

为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：
HTML定义网页的内容
CSS规定网页的布局/样式
JavaScript对网页行为进行编程

JavaScript的应用：淘宝的搜索功能、团立方中的轮播图、产品经理建立项目等等。
JavaScript组成：
ECAMScript：JavaScript语法和基本对象
DOM：文档对象模型
BOM：浏览器对象模型。

二、JavaScript的基本用法
JavaScript应该放在什么位置？
①行内JS
按钮
优点：非常的直观，直接作用于你写的元素
缺点：1、结构分离不清晰(html/csss/js)
2、复用性底
3、不利于后期维护与修改
②内部JS

优点：1、结构分离更清晰(较行内JS)。2、当前页面可复用 3、利于后期维护和修改
缺点：1、只能当前页面使用，不能多页面复用。2、多页面之间的维护比较麻烦。
③外部JS

三、JavaScript 输出
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

四、document.getElementById()方法
语法：document.getElementById("ID ")
翻译：通过ID获取元素。

五、JavaScript 语句、注释、变量
1、JavaScript语句是发给浏览器的命令,这些命令的作用是告诉浏览器要做的事情。
每一句JavaScript代码格式: 语句;
例：alert(“hello!”);就是一个JavaScript语句
2、JavaScript-注释很重要
注释可分为单行注释与多行注释两种
单行注释，在注释内容前加符号 “//”
多行注释以"/“开始，以”/"结束。
3、变量
什么是变量？
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，JavaScript 变量是存储数据值的容器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果…等。
给变量取个名
我们为了区分盒子，可以用box1,box2等名称代表不同盒子，box1就是盒子的名字（也就是变量的名字）。
注意：变量名字可以任意取，只不过取名字要遵循一些规则:
1)必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。例如：mysum _mychar, $numa198
2)变量名区分大小写，如:A与a是两个不同变量。
3)不允许使用JavaScript关键字和保留字做变量名。
例如：mysum, _mychar, $numal
变量声明
声明变量语法: var 变量名;
var mysum;一次声明一个变量
var mysum=12,mynum=“str”;一次声明多个变量
注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。
变量赋值
var mynum=5;//声明变量mynum并赋值
注:这里 "="号的作用是给变量赋值，不是等于号。

六、document.querySelector()
定义和用法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
语法：document.querySelector(CSS selectors)
参数值：