JavaWeb_05_JS基础

最新推荐文章于 2024-07-29 11:53:27 发布

柳絮，曾轻语

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量35

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42788897/article/details/131209208

版权

《JS基础》

一、JS编程

JavaScript（简称“JS”）是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。支持面向对象、命令式、声明式、函数式编程范式，主要作为Web页面开发的脚本语言而出名。

引用方式

内联式（写在标签中，与事件绑定）

<div onclick="alert('hello world！')"></div>

内部式（使用script标签，写在页面中）

<script>
    ...
</script>

外部式（使用script标签引入，写在head标签中）

<head>
    ...
    <script src="./index.js"></script>
</head>

案例一

// 变量声明：var
var userId = 1001;
var userName = "Alice";
var weight = 65.5;

// 方法定义
function show() {
    document.write("<h1>" + userId + "——" + userName + "——" + weight);
}

function add(a, b) {
    return a + b;
}

//方法调用
show();
//console.log 前端日志打印输出
console.log("30+50=" + add(30, 50));

二、事件处理

三要素

事件源
事件监听
事件处理

常用事件

click：点击事件
mouseup：鼠标抬起事件
mousedown：鼠标按下事件
mouseover：鼠标移入事件
mouseout：鼠标移除事件
focus ：获取焦点事件
blur：失去焦点事件
submit：表单提交事件
…

案例二

html

<!--其中alert、confim、prompt是window(窗口)对象的内置函数 -->
<button onclick="alert('登录成功！')">信息提示框</button>
<button onclick="confirm('确认退出吗？')">确认提示框</button>
<button onclick="prompt('请输入卸载原因：')">输入提示框</button>
<button onclick="skip()">路径跳转</button>

function skip() {
    if (confirm("确定前往其他网页吗？")) {
        location.href = "http://www.baidu.com";
    }
}

三、dom操作

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，可以动态地访问程序和脚本，更新其内容、结构和样式风格。

请添加图片描述

案例三

html

<body>
    <button onclick="addNode()">添加节点</button>
    <button onclick="removeNode()">删除节点</button>
    <div id="container"></div>
</body>

td {
    border: 1px solid black;
}

//1.通过id获取元素
var container = document.getElementById("container");

//2.添加节点（九九乘法表）
function addNode() {
    //创建节点
    var table = document.createElement("table");
    for (var i = 1; i <= 9; i++) {
        var tr = document.createElement("tr");
        for (var j = 1; j <= i; j++) {
            var td = document.createElement("td");
            td.innerHTML = j + "*" + i + "=" + (i * j);
            //添加单元格
            tr.appendChild(td);
        }
        //添加行
        table.appendChild(tr);
    }
    //添加表格
    container.appendChild(table);
}

// 3.删除节点
function removeNode() {
    container.lastChild.remove();
}