【创造者】JavaScript基础

JAVAScript是一门编程语言。

• HTML 定义网页的内容
• CSS 规定网页的布局
• JavaScript 对网页行为进行编程

下面就是关于JS的基础：

JS的组成

javascript包括ECMAScript(语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型).

ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

ECMAScript是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

下面开始体验一下

JS查找HTML元素

getelement:获取元素 document:用文件证明感觉翻译一下更加好记的样子。

查找id="demo"的HTML元素，并把元素内容(innerHTML)更改为"Hello JS"

document.getElementById("demo").innerHTML = "Hello JavaScript";

提示：JavaScript 同时接受双引号和单引号：

document.getElementById("demo").innerHTML = 'Hello JavaScript';

根据JavaScript能够改变HTML属性的特性，来尝试改变一张HTML图像

改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

也就是说使用document.getElementById('指定的ID').什么什么东西

改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

document.getElementById("demo").style.fontSize = "25px";

可通过改变 display 样式来隐藏 HTML 元素：

document.getElementById("demo").style.display="none";

可通过改变 display 样式来显示隐藏的 HTML 元素：

document.getElementById("demo").style.display="block";

也就是说在某些时候JS是能够写很多style的样式的，而且还挺方便的。

弹出框：

内联式

<script>
			// 弹出警示
			alert("hello,js!")
</script>

外联式

HTML文件内：<script src="js/Js1.js"></script>
js文件内：alert("你好，JS")

行内式

HTML：<button onclick="alert('hello,world')">按钮</button>

而这三种都具有相应的优点的缺点：

比如行内式可以将部分js写在HTML标签的事件属性中比如说onclick:"javascript:alert('hello,js')"。这种带有on的这种，用户相对主动的事件属性。

内嵌（内联）式就比如说我们在HTML最下面写的

<script>
      alert(''hello js);
</script>

这种。

外部js（外联式）就是建一个外部js文件像是建一个外部css文件那样。更加美观方便把。

<script src="my.js"></script>

ok下一部分

JS基本的语法

1.注释

不知道有啥好解释的

单行注释快捷键：ctrl + /

多行注释快捷键：shift + alt + a

• vscode中修改快捷键方式：vscode➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认

2.输入输出语句：

比如上面的内联外联举得例子alert就是输出语句的一种

alert(msg)浏览器弹出一个警示框（浏览器弹框）。主要用来给用户显示消息

console.log(msg) 浏览器控制台打印输出信息。主要用来给程序员看自己运行时候的消息。（alt+b然后再打开控制台可以看到）

prompt(info)浏览器弹出输入框，用户可以输入。

3.定义变量的语句

在这种就是定义变量

可以从变量获取数据也能改变变量的数据。

变量是用于存放数据的容器，可以存放数据。

var用来声明变量（variable），程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。这个空间就是存放变量的空间。

//定义变量
var userName;
//为变量赋值
userName = prompt("请输入你的名字");
//输出变量
console.log("你的名字是",userName);
//字符串输入到页面里面
document.write("<h1>" + userName = "</h2>");

当然在声明变量的时候也能直接赋值

注意变量名

严格区分大小写，字母，数字，下划线和美元符号$都可以用，不能是关键字不能用数字开头，遵循驼峰命名法（这样式的：myFirstName）

JS把数据分成两种类型，基本数据(number,string,boolean,undefined(未定义的),null)和复杂数据(Object)。

Boolean：布尔值类型，如true，false，等价于1和0

number:既可以保存整数值，又可以保存小数（浮点数）。

数字型进制：二进制八进制十进制十六进制（十六进制数字序列范围1~9，A~F）

在JS中八进制前面加0，十六进制前面加0x

数组

数组是用来保存多个数据的一种结构。