JavaScript

最新推荐文章于 2024-05-03 11:47:20 发布

77887723

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量156

点赞数

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46788168/article/details/119134218

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.JavaScript和html代码的结合方式

第一种方式

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

alert是JavaScript语言提供一个警告框函数

他可以接受任意类型的参数，这个参数就是警告框的提示信息

第二种方式

使用script标签引入单独的JavaScript代码文件

使用script标签引入外部js文件来执行

src属性专门用来引入js文件路径（可以是相对路径也可以是绝对路径）

总结：script标签可以用来定义js代码，也可以用来引入js文件

但是，两种方式二选其一，不能同时用

2.变量

JavaScript里的变量类型：

数值类型： number

字符串类型： string

对象类型： Object

布尔类型： Boolean

函数类型： function

JavaScript里的特殊值：

undefined 未定义，所有js变量未赋予初始值的时候，默认值都是undefined

null 空值

NAN 全称是：not a number 。非字符，非数值

js中的定义变量格式

var 变量名

var 变量名= 值

3.关系运算

等于 = 等于是简单的字面数值比较

全等于 == 除了字面值的比较之外，还会比较两个变量的数据类型

4.逻辑运算

且运算： &&

或运算： ||

取反运算：！

在JavaScript语言中，所有的变量，都可以作为一个Boolean类型的变量使用

0、 null 、 undefined 、 “”(空串)都认为是false；

5.数组

格式：

var 数组名 = []；空数组

var 数组名 = [1,‘abc’,true]; 定义数组同时赋值元素

JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组扩容

6.函数

第一种 用function关键字来定义函数

格式：

function 函数名 ( 形参列表 ) { 函数体 }

**注意：**函数必须被调用才可用

在JavaScript语言中，定义有返回值的参数，直接用return语句返回值即可

第二种

var 函数名 = function( 形参列表 ) { 函数体 }

重载

在JavaScript中函数的重载会直接覆盖掉上一次的定义

结果为无参函数fun()

arguments隐形参数

在function函数中不需要定义，但却可以用来获取所有参数的变量

function fun(){

alert(arguments[0]);

alert(arguments[1]);

alert(“无参函数fun()”😉

}

fun(1,abc);

结果为：1 abc

7.JS中的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性名 = 值； //定义一个属性

变量名.函数名 = function(){} //定义一个函数

例子：

var obj = new Object();

obj.name = “小王”;

obj.fun = function(){

alert(“姓名：” + this.name)

}

对象的访问：

变量名.属性/函数名();

例子：

obj.fun();

{}花括号形式的自定义对象

对象的定义：

var 变量名 = { //空对象

属性名：值， //定义一个属性

函数名：function(){} //定义一个函数

}

例子：

var obj = {

name：“鹏鹏”，

fun : function(){

alert(“姓名：” + this.name)

}

访问：

alert(obj.name);

obj.fun();

8.JS中的事件

常用的事件

onload 加载完成事件

onclick 单击事件

onblur 失去焦点事件

onchange 内容发生改变事件

onsubmit 表单提交事件

时间的注册分为静态注册和动态注册两种：

静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码

动态注册事件：通过JS代码得到标签dom对象，然后通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码

动态注册基本步骤：

1.获取标签对象

2.标签对象.事件名 = function(){}

8.1 onload

静态注册

    <script type="text/javascript">
       function onloadFun() {
           alert('静态注册onload事件');
       }
    </script>
</head>
<body onload="onloadFun()">
</body>

动态注册

    <script type="text/javascript">
       window.onload = function (){
           alert('动态注册onload事件');
       }
    </script>

8.2 onclick

静态注册

  <script type="text/javascript">
    function onclickFun() {
      alert('静态注册onload事件')
    }
  </script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>

动态注册

  <script type="text/javascript">
    window.onload = function () {
    var btobj = document.getElementById("bt01")
      //通过标签对象（btobj）.事件名 = function（）{}
         btobj.onclick = function (){
      alert("动态注册的onclick")
         }
    }
  </script>
</head>
<body>
<button id="bt01">按钮2</button>

8.3 onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
         function onblurFun() {
           console.log("静态注册失去焦点事件")
         }
         window.onload = function (){
           var passwordobj = document.getElementById("password")
           passwordobj.onblur = function (){
             console.log("动态注册失去焦点事件")
           }
         }
  </script>
</head>
<body>
 用户名：<input type="text" onblur="onblurFun();"><br/>
 密  码：<input id="password" type="text">
</body>
</html>

用户名为静态注册

密码为动态注册

8.4 onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("年龄已经切换")
        }
        window.onload = function (){
            var seltobj = document.getElementById("slt01");
            seltobj.onchange = function (){
                alert("年龄已经切换")
            }
        }
    </script>
</head>
<body>
<select onchange="onchangeFun()";>
    <option>18</option>
    <option>17</option>
    <option>16</option>
    <option>15</option>
</select>
<select id="slt01">
    <option>999</option>
    <option>888</option>
    <option>777</option>
    <option>666</option>
</select>
</body>
</html>

上面为静态，下面为动态

8.5 onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onsubmitFun(){
      alert("静态注册表单提交事件")
      return false;
    }
    window.onload = function (){
      var formobj = document.getElementById("f01");
      formobj.onsubmit =function (){
      alert("动态注册表单提交事件");
      return false;
      }
    }
  </script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()";>
  <input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="f01">
  <input type="submit" value="动态注册"/>
</form>
</body>
</html>

9.DOM模型

DOM全称是Document Object Model 文档对象模型

就是把文档中的标签，属性，文本转换为对象来管理

Document对象的理解：

1.Document管理了所有的HTML文档内容

2.Document是一种树结构的文档。有层级关系。

3.让我们把所有的标签都对象化

我们可以通过documen访问所有的标签对象

9.1Document对象中的方法介绍

document.getElementById(elementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementByName(elementIdName)

通过标签的name属性查找标签dom对象，elementIdName)是标签的name属性值

document.getElementByTagName(Tagname)

通过标签名查找标签dom对象，tagname是标签名

document.createElement(tagname)

方法，通过给定的标签名，创建一个标签对象，tagname是要创建的标签名

77887723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1.JavaScript和html代码的结合方式第一种方式只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码alert是JavaScript语言提供一个警告框函数他可以接受任意类型的参数，这个参数就是警告框的提示信息第二种方式使用script标签引入单独的JavaScript代码文件使用script标签引入外部js文件来执行src属性专门用来引入js文件路径（可以是相对路径也可以是绝对路径）总结：script标签可以用来定义js代码
复制链接

扫一扫