JavaScript 基础入门速成上篇
JavaScript 嵌入页面的方式
1. 行间事件
2. script标签
3. 外部引入
函数传参
javascript 的函数中可以传递参数
参数有 "形参" 和 "实参"，形参即形式参数，实参即实际参数，看如下的例子，function sum(num1，num2) { ... } ，这个函数中的num1 和 num2 属于形参，待接收实际的参数进来，而调用函数时 sum(3，4) 中的 3，4 就是实际参数了.
函数 return 关键字
作用：1. 返回函数的值或者对象 2. 结束函数的运行
1. 返回函数的值或对象
2. 结束函数执行
变量与函数的预解析
JavaScript 解析过程分为两个阶段，编译阶段 —— 》执行阶段，在编译阶段会将 function 定义的函数提前，并将 var 定义的变量声明提前，将它赋值为 undefined；
上面的函数定义中是先进行的 【函数的定义】 然后再 【调用函数】；那么 JavaScript 的特点就是有这个预解析(将js代码预读一篇，将定义的代码提前)，可以先调用再定义，如下：
变量也同样，来看一下变量的与解析：可以想一下结果是什么
弹窗的结果为：undefined —— 1 ；var 定义的变量声明提前，将它赋值为 undefined，第一个 alert(num) 为undefined，接着num赋值1，第二个alert(num) 就为 1，主要还是函数的预解析。
条件语句
条件语句 —— 通过条件来控制程序的走向
条件运算符： == 、 === 、> 、>=、<、<= 、!= 、&& 、||、|
if else 语句
numA 是数字类型，numB是字符串类型，== 逻辑运算符会默认的将两边的变量转为同一类型，即隐式转化。== 逻辑运算符判断是不够严谨，那么使用严格的判断可以使用 ===
&&运算符
|| 运算符
多重的 if else 语句
获取元素方法
元素（节点，DOM对象，元素 — 叫法不同）
可以使用内置对象 document 上的 getElementById 方法来获取页面上设置 id 属性的元素，获取的是一个html对象，然后赋值给到一个变量：
这是一个div元素
// 如何来获取？
// class - document.getElementsByClassName('')
// 标签 - document.getElementsByTagName('')
// name - document.getElementsByName('')这里需要注意写法：刚入门的可能容易出错；
错误示范：
Document
这是一个div元素
正确写法：( javascript 代码是从上到下开始执行 )
Document
这是一个div元素
... 这里放置html..
操作元素属性
获取页面元素之后，就可以对页面元素的属性进行操作，例如操作css样式 ，属性操作包括读和写。
操作元素属性：
var 变量 = 元素.属性名.读取属性 | 元素.属性名 = 新属性值.改写属性
属性名在 js 中的写法：
1. html 属性和 js 里面的属性写法一样
2. class 属性写成 className (class 是保留的关键字)
3. style 属性里面的属性，有 ' - ' 的改写驼峰式写法：如 font-size 改写为 fontSize
下面来操作一些DOM元素属性：
Document
在将 150 * 150px的紫色purple盒子通过 js 操作DOM元素属性的方式变成了红色；当然还可以操作它的其他属性，如 style.width 和 style.height 。
这里需要注意的是不推荐以下的这种操作DOM元素属性的写法：
obox.style = " ... "最好的方式就是在style后面跟上节点：style.width 、style.height 、style.fontSize ，虽然浏览器支持这种写法，但不提倡，避免样式被覆盖，要使用可以添加上 cssText
obox.style.cssText = "background: yellow"innerHtml 在页面会被解析
innerText 在页面不会被解析
事件
最常熟悉听到的就是 '点击事件'，即onclick，点击按钮触发 onclick事件等，下面来看事件：
事件有鼠标触发的、键盘触发的还有系统触发，很好理解，鼠标的就可以点击，双击，按下抬起移动这些，键盘也有，系统的就刚刚使用的onload，系统加载完成之后再去触发；
鼠标：
onclick 鼠标单击
ondblclick 双击左键
onmousedown 按下触发
onmouseup 抬起触发
onmousemove 移动触发
onmouseenter 移入
onmouseleave 移出
onmouseover 移入
onmouseout 移出
键盘：
onkeydown 按下键盘
onkeypress 仅监听字母数字 - 特殊字符不监听
onkeyup 松开触发
系统：
onload
onerror ...下面来简单的讲用法，然后可以根据这个自行测试：
鼠标：以刚刚的案例中来完成，将鼠标移入的时候进行弹窗.
Document
键盘：可以通过input，输入的时候触发弹窗.
这里对应的事件后面接着一个匿名函数 function () { } ，当然我们不能直接写一个匿名函数function () { } 使用，这样会报错 !
document.getElementById('btn').onclick = function(){ ... }
// 第二种写法 —— 调用方法
// 定义方法 function 函数名称() { }
function handleClick() { ... }
document.getElementById('btn').onclick = handleClick自定义属性
上述讲到了操作元素属性，那么像 style.width 和 style.background 这里的这些width属性都是定义好了的，那么如何来进行一个自定义属性呢？有这样三个方法分别来获取设置和移除。
1. 获取属性 —— getAttribute()
2. 设置属性 —— setAttribute()
3. 移除属性 —— removeAttribute()
Document
那么了解到这里就需要来完成两个案例了，现在就是测试你对前面内容的理解了；
案例测试一 ：
这个案例可能有些读者见过，投稿来的一个案例，所以这个案例其实也是有比较多涉及上述中所讲的知识点。
实现思路[小白解析]：
对于html和css的部分就不再多讲了，通过这个 " + " 来设置一个点击事件，这个点击事件是实现切出这个输入框的，切出输入框的时候可以进行一个获取输入框的一个焦点，让用户输入内容进行添加，输入input框中的内容需要做一个监听获取，"添加" 也是一个点击事件，首先是拿到input框监听获取到的，通过点击添加将这段内容插入到一个节点当中去，然后进行一个隐藏输入框，那么再隐藏输入框之前需要将input框中的数据清空，避免再点击 " + " 是上次的数据内容。
( 注 ： 建议自己理清楚思路再动手，或者先跟着代码来一遍，最后再自己实现一遍 )
案例测试二 ：
这个案例与前面的案例还是有一些相似点，但还是有一些不一样，一些侧重的部分，主要还是使用 JS 来操作DOM元素及元素属性；
（ 这个案例与前面的案例有类似的点但也有不一样的地方 ）
实现思路[小白解析] :
" 发表 " 做鼠标点击事件将输入框中的内容以及当前的发表的用户头像进行一个整合插入到节点当中去，点击用户头像可以进行一个用户头像切换，头像可以通过属性src获取，那么输入框中的数据与之前一样需要做监听获取。
Document
发表
-
门廊斜风细雨霖铃，墨香氤氲声如许，衣带生风，打湿我的眉心。笑容可以瞒过别人，可心痛却骗不了自己。
本篇内容就此结束，分为上下两篇内容，期待下期再见，感兴趣的读者点赞关注下，感谢大家的支持！！！
