Javascript入门篇（一）

最新推荐文章于 2023-07-29 18:48:02 发布

JUNBUZHI

最新推荐文章于 2023-07-29 18:48:02 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/JUNBUZHI/article/details/84025662

版权

Javascript简介

Javascript是最流行的脚本语言，它被设计为向HTML增加交互性，在我目前的学习中，它有两个方面的运用，一个是为网页增加各种特效，另一个是与Ajax配合完成数据交互。

在网页中添加Javascript片段

添加Javascript片段的格式如下：

<script type="text/javascript">
     xxxxxxx
</script>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

一共有三种方式在网页中添加Javascript代码：

<head>中的Javascript函数：

<head>

<script>
alert("我的第一个 JavaScript");
</script>

</head>

<!--这里的语句还不是函数，在Javascript中写的函数要在HTML标签中调用-->

<body>中的Javascript:

<body>

<h1>我的 Web 页面</h1>

<button type="button" onclick="myFunction()">尝试一下</button>

<script>

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

</script>

</body>

<!--这个函数是一个鼠标点击事件,无需知道函数的意思，只要明白调用方法即可-->

外部的Javascript文件（这是在大型的开发中最常用的方式，在独立的文件中编写需要的函数，再在HTML代码中引入js文件，这样可以随时反复调用，还便于维护）：

<!--HTML代码，这里只需记住格式，不用明白函数意思，后面会讲-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>

    <script src="../js/login.js"><!--这里用src引入login.js即js文件相对于当前文件的路径(相对路径)，“..”指的是文件路径向上一级-->

    </script>
</head>
<body>
<div class="div1">
    <form action="Defaut.html" name="login" method="post" onsubmit="return check()"><!--这里调用check()函数-->
        请输入学号
        <input type="text" style="width: 150px;height: 20px" id="id">
        <input type="submit" value="登录" style="width: 50px;height: 27px">
    </form>
</div>
</body>
</html>


<!--文件名后缀为js的代码-->
<!--js文件中不能出现script标签，只需编写函数-->
function check() {
    var id = document.getElementById("id").value;
    var idInt = parseInt(id);
    var idString = idInt.toString();
    if (idString.length == 9 && idString.slice(0,4) == "2017"){
        alert('账号正确');
        return true;
    }
    else {
        alert('账号错误');
        return false;
    }
}

JS的基础语法：

和其他的编程语言一样，JS里面的量有变量和常量，常量也有字符型，数字，数组等，整型也可以用科学计数法表示，字符型也要加双引号等，这里按下不表。JS中无论定义数字还是字符变量，皆用 var 定义，使用 function 来定义函数，这里后面会详细讲解，除此之外，JS的数值运算符和逻辑运算符与其他的语言相同。

<script>
    var a;
    a = 1;
    a = "hfsk";
    a = [1,2,3,4,5];
    document.write(a[1]);//数组元素的调用同样是用下标调用，另外在JS里面双斜扛打注释
</script>

一些基本输出数据的方法（Javascript没有输出函数，以不同的方式输出数据）：

window.alert() （弹出警告框）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>web页面</h1>
<p>我的第一个Javascript</p>

<script>
    window.alert("欢迎");
</script>

</body>
</html>

document.getElementById().innerHTML获取标签中的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>Web页面</h1>

<p id="demo">我的第一个Javascript</p>

<script>
    document.getElementById("demo").innerHTML = "内容已修改。"; <!--document.getElementById("demo")是获取id为demo的标签中的内容，然后进行修改-->
    <!--
     var a=document.getElementById("demo").innerHTML;  
    window.alert(a);  与前一个方法结合，这里弹出的是“我的第一个Javascript”
    -->
</script>

</body>
</html>

document.write() 写入内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>Web页面</h1>

<p id="demo">我的第一个Javascript</p>

<script>
    document.write("欢迎"); <!--将“欢迎”写入HTML文档中-->
</script>

</body>
</html>

值得注意的是，如果该语句在页面加载后执行，则原有的内容将会被函数中的内容覆盖。例如将该语句写成一个鼠标点击事件的函数，那么在加载玩页面点击特定位置后执行该语句，就会产生覆盖。