JS学习(一)JavaScript用法_javascript:amssubmit(123031,399048)-CSDN博客

本文链接：https://blog.csdn.net/weixin_44024159/article/details/103592392

JS简介

JavaScript是一种轻量级脚本语言，易于上手。
JavaScript可以插入HTML页面的代码当中，插入后，页面直接由浏览器执行。

JS在HTML中的位置

JS需要写在<script> 和 </script> 标签之间，一般<script>标签放在HTML代码中的<body>和</body>或者是<head>和</head>标签之间。这样不会干扰页面内容。

在script标签之间

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
  </head>
  <body>
    <script type="text/javascript">
      alert('test1');
    </script>
  </body>
</html>

在老旧的实例中可能会在 <script> 标签中使用 type=“text/javascript”。但现在不需要这样做了，在现代浏览器以及HTML5中，默认脚本为JavaScript。

在<head>和</head>的script标签之间
上面的alert是直接写在body里的，因此是全局的，在打开页面加载时就会直接执行这个代码，若不像这样，我们可以设置一个按钮，点击这个按钮时在执行这段代码。
例如：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <script>
      function alertTest1(){
        alert('test1');
      }
    </script>
  </head>
  <body>
    <button type="button" name="button" onclick="alertTest1()">test1</button>
  </body>
</html>

有个函数用的很频繁：
document.getElementById('xxx')：根据HTML中定义的组件来获取或操纵该组件的参数
可以用console.log(xxx)，把document.getElementById('xxx')获取到的元素的相关参数在控制台中显示出来。例如：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function myFunc(){
        console.log(document.getElementById('input1'));
      }
    </script>
  </head>
  <body>
    <input id='input1' type="text" name="" value="testjs">
    <button id='button1' type="button" name="button" onclick="myFunc()">button</button>
  </body>
</html>

点击button就会在控制台中显示出关于input的相关参数，如下图：
在这里插入图片描述
点开之后，如下：

里面包含了所有关于input的参数，我们可以在document.getElementById(‘input1’)后面，加上".参数=‘xxxx’"，来对input1这个元素进行操作，例如，修改输入框的值，修改输入框的值是要对value这个参数的值进行修改，如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function myFunc(){
        document.getElementById('input1').value='lala';
      }
    </script>
  </head>
  <body>
    <input id='input1' type="text" name="" value="testjs">
    <button id='button1' type="button" name="button" onclick="myFunc()">button</button>
  </body>
</html>

修改输入框的值前：
在这里插入图片描述
修改后：

再比如，修改段落的内容，如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <script>
      function alertTest1(){
        document.getElementById('para1').innerHTML = 'my first JS';
      }
    </script>
  </head>
  <body>
    <p id='para1'>lalalalala</p>
    <button type="button" name="button" onclick="alertTest1()">test1</button>
  </body>
</html>

修改前：
在这里插入图片描述
修改后：

3. 在HTML中引入外部js
例如：我们把刚才写的函数单独放在一个js文件中。
test.js文件

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

在HTML中引入该js文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <script src="test.js"></script>
  </head>
  <body>
    <p id='demo'>original</p>
    <input id='textfield1' type="text" name="" value="">
    <button type="button" name="button" onclick="myFunc()">button</button>
  </body>
</html>