JavaScript第一天

本文只介绍 js 的作用，编写位置，常用的功能，作为了解

1、什么是JavaScript: 它是一中脚本语言，轻量级，可以写在html页面的编程语言。简单，功能强大。和 Java 语言没有任何关系。

2、js代码写在<script></script>标签中

3、js代码的书写位置：可以写在<head>或<body>中，一般都写在<head>中或者<body>的最后边，不写在<body>的页面代码中，不好看。也可以写在外部文件中，可以重复使用。

4、js的作用：直接输出HTML输入流、对触发的事件做出反应、更改页面样式、更改图片、更改页面内容、输入验证

5、js的输出：

　　　　（1）、document.write():在html文档中输入内容。如果在页面加载完成后再触发此方法，里边的内容就会覆盖整个页面

　　　　（2）、window.alert():弹框显示内容

　　　　（3）、innerHTML :向html元素中输入内容

　　　　（4）、console.log():在浏览器控制台输出内容

6、示例：

　　（1）、直接输出Html输入流

　　　　在<head>中写js代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
          <script>
            document.write("hello world!!!");
        </script>
 </head>
 <body>

 </body>
</html>

View Code

　　　　在<body>中写js代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

 </head>
 <body>
        <script>
            document.write("hello world!!!");
        </script>
 </body>
</html>

View Code

　　注：以下示例都是在<head>中

　　（2）、对触发的事件做出反应

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
        function dianji(){
            document.getElementById("next").innerHTML="惟有饮者留其名";
        }
  </script>
 </head>
 <body>
    <p>古来圣贤皆寂寞</p>
    <p id="next">下一句？？？</p>
    <button type="button" onclick="dianji()">点一下</button>
 </body>
</html>

View Code

　　（3）、对HTML元素的内容进行改变

　　　　如（2）

　　（4）、对HTML样式进行改变

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
        function dianji(){
            document.getElementById("next").style.color="yellow";
        }
  </script>
 </head>
 <body>
    <p>古来圣贤皆寂寞</p>
    <p id="next" style="color:red">下一句？？？</p>
    <button type="button" onclick="dianji()">点一下</button>
 </body>
</html>

View Code

　　（5）、对图形进行改变

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
        function dianji(){
            var img=document.getElementById("img");
            if(img.src.match("img1")){
                img.src="img/1.webp"
            }else{
                img.src="img/img1.jpg";
            }
         }
  </script>
 </head>
 <body>
    <p>古来圣贤皆寂寞</p>
    <img id="img" src="img/img1.jpg" width="200px" height="200px"/>
    <button type="button" onclick="dianji()">点一下</button>
 </body>
</html>

View Code

　　（6）、进行输入验证

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
        function dianji(){
            var x=document.getElementById("input").value;
            <!-- isNaN()判断值是否为字符，如果为字符返回true -->
            if(x==""||isNaN(x)){    
                alert("正确");
            }
         }
  </script>
 </head>
 <body>
    <p>古来圣贤皆寂寞</p>
    <input id="input"></input>输入下一句</br>
    <button type="button" onclick="dianji()">点一下,判对错</button>
 </body>
</html>

View Code