01.JavaScript初体验

• JavaScript简介

• JavaScript 是脚本语言;
• JavaScript 是一种轻量级的编程语言;
• JavaScript 是可插入 HTML 页面的编程代码;
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行.

---

• JavaScript加入HTML两种方式

• 方式一 :

    
        
        
    
    
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可以在head或body中加入script标签加入js代码;
2.一般情况下,将函数定义在head中,或body的尾部,便于阅读理解代码;

• 方式二 :

    
        
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可在head或body内,通过引人js文件的方式

---

• JavaScirpt关键字

1. 此类关键字在JavaScirpt中拥有自己特殊的含义;
2. 在定义标识符时,不可与关键字重复.

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

---

• JavaScript保留字

1. 保留字是为将来的关键字所预留的;
2. 和关键字一样,保留字也不要作为标识符.

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

---

• JavaScript常用功能简介

① 写入HTML输出

    
        
    
    
        
这是标题HTML
        
这是段落HTML
        

        
        

        Click
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.write(),输出文档写内容;
2.若文档加载完成后,执行此方法,会覆盖原整个HTML文档.

点击之前

点击之后

② 点击事件

    
        
    
    
        点击
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.button:定义一个按钮;
2.onclick:定义点击事件,当点击时,执行等号后面的动作;
3.alert():弹出框,携带提示信息.

点击前

点击后

③ 改变元素内容

    
        
    
    
        
这是标题HTML
        
这是段落HTML
        

        
        Click
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.getElementById():可以通过元素的id定位到元素;
2.innerHTML:可以改变元素内容.

点击前

点击后

④ 改变图片

    
        
    
    
        ![](img/small.png)
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.src:定位到元素的src属性,且可通过赋值修改其属性值;
2.element.title:定位到元素的title属性,且可通过赋值修改其属性值;
3.match():此方法可对字符串进行匹配.

点击前

点击后

⑤ 改变样式

    
        
    
    
        
点击按钮,我会变色!
        点击
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.style:获取到元素的样式,颜色,大小等;
2.style.color:获取到元素的颜色并进行赋值修改.

未点击

点击1

点击2

⑥ 验证输入

    
        
    
    
        
请输入数字
        
        校验
        
    

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.value:获取当前元素的值;
2.isNaN:判断是否为非数字,非数字为True,数字为False.

CASE1

CASE2

CASE3

CASE4