Java教程

HTML-JavaScript

本文主要是介绍HTML-JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML-JavaScript

01. JavaScript写在哪里

  • head部分: 用于声明变量，函数，类型，为事件绑定处理函数
  • body部分: 调用脚本执行
  • 外部脚本: 用于定义函数，类型
  • 执行顺序: 在代码中从上往下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="0605-01-HtmlJavaScript.js"></script>
    <title>Document</title>
    <script>
        alert("head");
    </script>
</head>
<body>
    <script>
    alert("body")
    </script>
    
</body>
</html>

02.基础语法

  • 大小写敏感
  • 弱类型语言
  • 分号结尾
  • 字符串可使用单引号和双引号

2.1数据类型

  • 因为JavaScript为弱类型语言，故变量声明只需要使用var ，关键字即可申明任何类型
  • 虽然var关键字可申明为任何类型，但是JavaScript仍有数据类型
    boolean number string Underfined Null Object
    Underfined Null类型只有一个值的数据类型，值分别为underfined与null
  • 查看变量类型可使用typeof方法

2.2 集合

  • 数组 {}
  • 键值对 {"kay1":"value1","kay2":"value2"}
  • 对象数组 {{"kay1":"value1","kay2":"value2"},{"kay3":"value3","kay4":"value4"}}
  • 属性 方法
  • 类型转化

2.3方法的使用

  1. 使用关键字function定义方法
  2. 方法名使用驼峰命名法
  3. 方法可以设置参数和返回值，js中不存在方法的重载
<script>
        var num1 = 3;
        var num2 = 4;
        function ShowInfo(item1,item2){
            return item1 + item2;
        }
        alert(ShowInfo(num1,num2));
    </script>

2.4 匿名方法

  1. 匿名方法可以简单的理解成不需要写方法名称的方法
  2. 匿名方法一般常用两种写法
var fun =  function(params){
....
}
//这种方法可以把匿名方法赋值给一个变量，调用这个变量即可使用该方法
(function(param1,param2){
....
})(1,2);
// 这种方法可以在定义匿名方法的同时传参及调用

03.闭包

目前可以简单的理解成子方法可以使用父方法的变量

04.DOM

  1. DOM用于操作html文档，准确的来说是html标签中的内容
  2. JavaScript中将每一个标签当作对象处理，每隔标签都有自己的属性，也拥有触发事件 方法
  3. 操作DOM对象，一般使用document关键字调用

4.1 Js获取元素的方法

  1. document.getElementById(id): 根据id获取元素节点
  2. document.getElementByClassName(classname): 根据class的值获取一组元素节点
  3. document.getElementByName(name): 根据name获取一组元素节点
  4. document.getElementByTagName(tag): 根据标签名获取一组元素节点
<div id="dv1" class="dv">dv1</div>
    <div id="dv2" class="dv">dv2</div>
    <div id="dv3" class="dv">dv3</div>
    <div id="dv4" class="dv">dv4</div>
    <script>
       alert(document.getElementById("dv1").innerText + "   "+document.getElementsByClassName("dv")[0].innerText)
    </script>

4.2 注册事件

事件常用的注册方式有多种，此处介绍两种，一种直接在元素上注册事件，一种在获取的对象上注册事件

  1. 元素注册法

    <input id="text1" type="text" onclick="ClickMe1()">
    <script>
        function ClickMe1(){
            alert("点我1");
        }
    </script>

  2. 对象注册法

<input id="text2" type="text" onclick="ClickMe2()">
<script>
   document.getElementById("text2").onclick = function(){
    alert("点我2");
   }
</script>

4.3 动态操作元素

  1. document.creatElement(): 创建元素
  2. document.appendChild(): 添加子元素
  3. document.insertBefore(newEl,orgEl): 在莫元素前添加元素
  4. document.firstChild; 获取第一个元素
这篇关于HTML-JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航