JavaScript的介绍及简单使用_javascripts-CSDN博客

本文详细介绍JavaScript的基本概念，包括其特点、网页中使用方法、编程概述、内置对象的应用，以及通过多个实例演示如何利用Document对象控制HTML元素。

JavaScript的介绍及简单使用

一、什么是JavaScripts

Javascript 是一种基于对象并具有安全性能的脚本语言，是由浏览器内解释器翻译成可执行格式后执行，在概念和设计方面， Java
和 Jvascript 是两种完全不同的语言。
Javascript 的四个特点：基于对象的语言、简单性、动态性、跨平台性

二、网页使用js脚本的三种方式

1.直接添加脚本

<html>
    <head>
        <title>demo1</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!--alert会弹出一个对话框-->
        <input type="button" value="戳我呀" onclick="alert('你刚刚戳了我一下')">
    </body>
</html>

2.使用script标记插入脚本

<html>
    <head>
        <title>demo2</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            function my_button(){
                alert("我被点击了");
            }
            function my_button2(){
                alert("我真的被点击了");
            }
        </script>
    </head>
    <body>
        <!--alert会弹出一个对话框-->
        <input type="button" value="戳我呀" onclick="my_button();my_button2()">
    </body>
</html>

3.链接脚本文件（推荐）

<!--demo3.html-->
<html>
    <head>
        <title>demo2</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js1.js"></script>
    </head>
    <body>
        <!--alert会弹出一个对话框-->
        <input type="button" value="戳我呀" onclick="my_button();my_button2()">
    </body>
</html>

//js1.js
function my_button(){
    alert("我被点击了");
}
function my_button2(){
    alert("我真的被点击了");
}

三、js编程概述

js编程概述

1.js保留关键字

js保留关键字

2.js变量

js变量

3.js数据类型

js数据类型

4.js运算符

js的运算符

5.js的控制语句(同C)

6.js的函数

函数的语法结构:
	function 函数名(参数1,参数2,…){
		函数体
	}

<!--demo.html-->
<html>
    <head>
        <title>demo2</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js.js"></script>
    </head>
    <body>
        
        <input type="button" value="戳我呀" onclick="my_button3(2020,5,27);">
    </body>
</html>

//js1.js
function my_button3(arg1,arg2,arg3){
    var arg = "";
    arg +=arg1;
    arg += ":"
    arg += arg2;
    arg += ":"
    arg += arg3;
    alert(arg);
}

四、js的对象

1、浏览器对象（window对象）

Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象
Window 对象是全局对象
window.open()打开一个新的窗口
window.close()关闭当前窗口
window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页

<!--demo5.html-->
<html>
    <head>
        <title>demo5</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js2.js"></script>
    </head>
    <body> 
        <input type="button" value="打开百度(新窗口)" onclick="my_button1();">
        <input type="button" value="打开百度(当前窗口)" onclick="my_button2();">
        <input type="button" value="当前窗口的url" onclick="my_button3();">
        <input type="button" value="关闭窗口" onclick="my_button4();">
    </body>
</html>

// js2.js
function my_button1(){
    //新窗口打开百度
    window.open("http://www.baidu.com");
}

function my_button2(){
    //当前窗口打开百度
    window.location.href="http://www.baidu.com";
}
function my_button3()
{
    //获取当前窗口的url
    alert(window.location.href);
}

function my_button4()
{
    //关闭当前窗口
    window.close();
}

2.文本对象（Document对象）（重要）

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

提供了从JS脚本中对 HTML 页面中的所有元素进行访问
可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元素
可以通过title，URL属性获取当前文档的标题，URL信息等
可以通过write方法在HTML页面中写入HTML表达式

案例：登录界面获取text内容(.value)

<!--demo6.html-->
<html>
    <head>
        <title>demo5</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js3.js"></script>
    </head>
    <body> 
        用户名: <input type="text" id="usr">
        <br>
        密码：<input type="password" id="pwd">
        <br>

        <input type="button" value="提交" onclick="my_button(1)">
        <input type="button" value="取消" onclick="my_button(0)">
    </body>
</html>

//js3.js
function my_button(arg)
{
    if(arg == 1)
    {
        var usr = document.getElementById("usr").value;
        var pwd = document.getElementById("pwd").value;
        if(usr == "admin" && pwd == "123456"){
            window.location.href = "http://www.baidu.com";
        }
        else{
            alert("用户名或密码错误");
            //清空用户名和密码输入框
            document.getElementById("usr").value = "";
            document.getElementById("pwd").value = "";
        }
    
    }
    else{
        //清空用户名和密码输入框
        document.getElementById("usr").value = "";
        document.getElementById("pwd").value = "";
    }
}

案例 document获得label的内容 (.innerHTML)

<!--demo7.html-->
<html>
    <head>
        <title>demo5</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js3.js"></script>
    </head>
    <body> 
        地址: <label id="addr">BJ</label>
        <br>
        <input type="button" value="单击改变地址" onclick="change_fun()">
    </body>
</html>

//js3.js
function change_fun()
{
    var text = document.getElementById("addr").innerHTML;
    alert("获取的内容为:"+text);
    document.getElementById("addr").innerHTML = "SZ";
}

案例 document获得img的src (.src)

<!--demo8.html-->
<html>
    <head>
        <title>demo8</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js.js"></script>
    </head>
    <body>
        此处有照片
        <br>
        <img src="./image/p01.jpg" id="img">
        <br>
        <input type="button" value="单击改变图片" onclick="change_img()">
    </body>
</html>

// js.js
function change_img()
{
    document.getElementById("img").src = "./image/p02.png"
}

案例:document获得单选框的内容(.checked)

<!--demo9.html-->
<html>
    <head>
        <title>demo9</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js.js"></script>
    </head>
    <body>
        请选择你的性别:
        男<input type="radio" name="sex" id="man">
        女<input type="radio" name="sex" id="female">
        <br>
        <input type="button" value="单击获取性别" onclick="get_sex();">
    </body>
</html>

//js.js
function get_sex()
{
    if(document.getElementById("man").checked)
    {
        alert("男");
    }
    else if(document.getElementById("female").checked)
    {
        alert("女");
    }
}

案例 document获得复选框的内容(.selectedIndex)

<!--demo9_2.html-->
<html>
    <head>
        <title>demo9_2</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js.js"></script>
    </head>
    <body>
        <select onchange="addr_fun();" id="addr">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
            <option>杭州</option>
        </select>
    </body>
</html>

//js.js
function addr_fun()
{
    //获取下拉列表框被选中的索引号
    var index = document.getElementById("addr").selectedIndex;

    //根据索引号 从选项数据中option[]中得到选中的内容
    var addr = document.getElementById("addr").options[index].value;
    alert("你选择的地点为：" + addr);
}

3.内部对象：Date对象

Date对象方法：

getFullYear()：返回当前年份
getMonth()：返回当前月份，0～11
getDay()：返回星期中的某一天，0~6,0表示周日
getDate()：返回一月中的某一天
getHours()：返回当前时间的小时，0～23
getMinutes()：返回当前时间的分钟，0～59

getSeconds()：返回当前时间的秒，0～59
案例：Date的使用(在js中写网页)

<!--demo11.html-->
<html>
    <head>
        <title>demo11</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js10.js"></script>
    </head>
    <body onload="get_time();"> 
       当前的时间为:
       <div id="div"></div>
    </body>
</html>

//js10.js
function get_time()
{
    setInterval("get_time_fun()", 1000);
}
function get_time_fun()
{
    //在js中写网页
    var d = new Date();
    var text = "<table border='1'>";
    //首行
    text += "<tr><td>时</td><td>分</td><td>秒</td></tr>";
    text += "<tr><td>";
    text += d.getHours();
    text += "</td><td>";
    text += d.getMinutes();
    text += "</td><td>";
    text += d.getSeconds();
    text += "</td></tr>";
    text += "</table>";
    // document.write(text);
   document.getElementById("div").innerHTML = text;
}

4.内部对象：Math对象

Math对象

5.内部对象：String对象

String对象用于处理文本（字符串，字符串是 JavaScript 的一种基本的数据类型。
String 对象定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符等

常用方法：
charAt()返回在指定位置的字符
indexOf()检索字符串
substr()从起始索引号提取字符串中指定数目的字符串
substring()提取字符串中两个指定的索引号之间的字符串

indexof()函数
在这里插入图片描述
indexof实例 substring()函数

在这里插入图片描述 案例：“2020:05:28” 提取:号之间的字符串

<!--demo12.html-->
<html>
    <head>
        <title>demo12</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="./js10.js"></script>
    </head>
    <body onload="my_string()"> 
    
    </body>
</html>

//js10.js
function my_string()
{
    alert("AMOS");
    var text = "2020:05:28";
    document.write("字符串的长度:" + text.length + "<br>");
    document.write("第0个字符为:" + text.charAt(0) + "<br>");

    var start = 0;
    var stop = 0;

    while(1)
    {
        stop = text.indexOf(":", start);
        if(stop == -1)
        {
            //提取最后一个字符串
            var tmp = text.substring(start, text.length);
            document.write("提取的内容为:"+tmp+"<br>");
            break;
        }
        var tmp = text.substring(start, stop);
        document.write("提取的内容为:"+tmp+"<br>");

        start = stop+1;
    }
}