01.JavaScript初体验

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

JavaScript加入HTML两种方式
方式一 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script>
            function xx(){
                xxx;
            }
        </script>
    </head>
    <body>
        <script>
            var xxx;
            if (xxx) {
                xxx
            }
            
            function xx(){
                xxx;
            }
        </script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可以在head或body中加入script标签加入js代码;
2.一般情况下,将函数定义在head中,或body的尾部,便于阅读理解代码;

方式二 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="myScript.js" />
    </head>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可在head或body内,通过引人js文件的方式

JavaScirpt关键字

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

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保留字

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

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输出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>这是标题HTML</h1>
        <p>这是段落HTML</p>
        <hr />
        <script>
            document.write("<h1>这是标题JS</h1>");
            document.write("<p>这是段落JS</p>")
        </script>
        <hr />
        <button onclick="myFunction()">Click</button>
        <script>
            function myFunction(){
                document.write("点击后,会覆盖原加载的文档流!")
            }
        </script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.write(),输出文档写内容;
2.若文档加载完成后,执行此方法,会覆盖原整个HTML文档.

点击之前

点击之后

② 点击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <button type="button" onclick="alert('弹出框')">点击</button>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.button:定义一个按钮;
2.onclick:定义点击事件,当点击时,执行等号后面的动作;
3.alert():弹出框,携带提示信息.

点击前

点击后

③ 改变元素内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>这是标题HTML</h1>
        <p id="contentP">这是段落HTML</p>
        <hr />
        <script>
            function changeContent(){
                contentP = document.getElementById("contentP");//通过id定位到元素
                contentP.innerHTML = "改变后的段落JS";//更改元素内容
            }
        </script>
        <button onclick="changeContent()">Click</button>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.getElementById():可以通过元素的id定位到元素;
2.innerHTML:可以改变元素内容.

点击前

点击后

④ 改变图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        ![](img/small.png)
        <script>
            function changeImage(){
                image1 = document.getElementById("image");//通过id定位到元素
                //判断图片来源字符串中所包含的字符串值,即判断当前图片是哪一个
                if (image1.src.match("small")) {
                    image1.src = "img/big.png";
                    image1.title = "big";//若当前是small,则点击更改为big
                } else{
                    image1.src = "img/small.png";
                    image1.title = "small";//若当前不是small,则点击更改为small
                }
            }
        </script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.src:定位到元素的src属性,且可通过赋值修改其属性值;
2.element.title:定位到元素的title属性,且可通过赋值修改其属性值;
3.match():此方法可对字符串进行匹配.

点击前

点击后

⑤ 改变样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <p id="demo">点击按钮,我会变色!</p>
        <button type="button" onclick="changeColor()">点击</button>
        <script>
            function changeColor(){
                x = document.getElementById("demo");//通过id定位到元素
                //判断元素颜色,进行相应的改变
                if(x.style.color.match("red")){
                    x.style.color = "black";
                }else{
                    x.style.color = "red";
                }
            }
        </script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.style:获取到元素的样式,颜色,大小等;
2.style.color:获取到元素的颜色并进行赋值修改.

未点击

点击1

点击2

⑥ 验证输入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h3>请输入数字</h3>
        <input id="demo" type="text"/>
        <button type="button" onclick="verifyNums()">校验</button>
        <script>
            function verifyNums(){
                Nums = document.getElementById("demo").value;//获取元素值
                //判断是否为空或是否不是数字
                if (Nums == "" || isNaN(Nums)) {
                    alert("不是数字");
                }else{
                    alert("是数字")
                }
            }
        </script>
    </body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.value:获取当前元素的值;
2.isNaN:判断是否为非数字,非数字为True,数字为False.