2.JavaScript

最新推荐文章于 2023-12-05 09:06:20 发布

程序员阿磊

最新推荐文章于 2023-12-05 09:06:20 发布

阅读量421

点赞数

分类专栏： # 4.web前端文章标签： javascript 前端 servlet jquery

本文链接：https://blog.csdn.net/m0_62112791/article/details/126593490

版权

4.web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.js(JavaScript)

脚本语言：嵌入执行
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

2.如何学习

相同：

变量
数据类型
运算符
流程控制

不同：

方法/函数
类/原型

Java中

int i = 19;
i += 1;
if(i > 5){
    System.out.println(i);
}

JavaScript中

var i = 19;
i += 1；
if(i > 5){
    document.write(i);
}

typescript

3.js 的引用

行内
内嵌
外部

代码案例：执行顺序：从上往下执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="hellojs.js" type="text/javascript"/>
    <!-- 内嵌 -->
    <script>
        alert("hello world 你好世界！！！！")
        var i = 19;
        var n = "19";
        if (!isNaN(n)){
            alert(i+parseInt(n))
        }else {
            alert(i+n);
        }
    </script>

</head>
<body>
    <!-- 行内 -->
  <a href="javascript:alert('hello world!!!')">click me</a>
</body>
</html>

<!-- 外部 -->
alert("您好，世界？？？？？");

处理网页： BOM DOM

方法和函数的区别：
方法依赖对象执行 method
函数独立执行 function

内置函数
parseInt() 将字符串转为int类型的数字
parseFloat() 将字符串转为float类型的数字
isNaN() 判断字符是不是数字
typeof 判断变量是什么数据类型

js是弱类型编程语言，变量的数据类型在后续的代码中可能随时被更改

4.js 中的数据类型

基本：
undefined 表示没有定义初始化
number
string
boolean

复合：
object: 以下都属于object
null 表示定义了变量，但是变量的值是没有的
Array —- List
Set
Date

5.注释

Java // /**/ /** */
html 
css /* */
javascript  // /* */

6.调试

使用浏览器中的开发者工具

7.运算符

Java有什么就暂时记忆什么，特殊的，以后用到了再查

8.流程控制

Java中的我就用和记住，特殊的，以后用到了再查
forin

js 面向对象

9.js高级

BOM DOM
BOM :
浏览器对象模型
window
.location
.screen
.history
.document
.navigator

DOM:
文档对象模型
document
.xxxx

10.输入输出

prompt() 输入
document.write() 不建议这么做
confirm 询问框

11.响应用户的行为

onXXX

简易计算器:
css 选择器
js 控制

变量的作用域:
全局变量
局部变量
闭包?

12.js 函数定义

function 函数名称(参数){} //定义了一个有名字的函数
let f = function (参数){} // 定义了一个匿名函数并赋值到一个f变量中
(参数) => {} //lambda 表达式写法

13.经典案例

1.案例1：计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #main{
            width: 300px;
            border: 7px aqua outset;
            /* 离上面有点距离*/
            margin: 50px auto;
            padding-bottom: 10px;
        }
        /*<!-- 子选择器中的第几个孩子 -->*/
        #main>div:nth-child(1){
            background-color: blanchedalmond;
            text-align: right;
            padding-right: 10px;
            font: normal 24px 黑体;
            line-height: 48px;
        }
        #main>div:nth-child(2){
            margin-left: 40px;
        }

        #main>div:nth-child(2),#main>div:nth-child(3){
            border: 3px black inset;
            display: inline-block;
            width: 100px;
            text-align: center;
            margin-top: 10px;
            cursor: pointer;
            line-height: 40px;
        }
        #main>div:nth-child(3)~div{
            border: 2px black inset;
            display: inline-block;
            width: 62px;
            margin-top: 10px;
            margin-left: 5px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        #main>div:nth-child(1)~div:hover{
            background-color: blue;
            color: red;
        }
    </style>

    <script>

        // 当前可以被修改的
        let nums = "";
        let flag = false;

        function  initMyJiSuanQi(){
            // let 定义变量  const 变量定义常量
            const elementsByName = document.getElementsByTagName("div");
            // 取div,从第三个开始
            for (let i = 2; i < elementsByName.length; i++) {
                elementsByName[i].onclick = show;
                //alert(elementsByName[i].innerText);
            }
        }
        function show(e){
            //alert("hello,world");
            //alert(e.target.innerText);
            let ping = document.getElementsByTagName("div")[1];
            switch (e.target.innerText){
                case "0":
                case "1":
                    /*if (ping.innerText == '0'){
                        ping.innerText = "1";
                    }else {
                        ping.innerText = ping.innerText+"1";
                    }
                    break;*/
                    //opsNum(e.target.innerText,ping)
                case "2":
                case "3":
                case "4":
                case "5":
                case "6":
                case "7":
                case "8":
                case "9":
                case "0":
                    opsNum(e.target.innerText,ping);
                    break;
                case "退格":
                    flag=false;
                    if (ping.innerText == '0'){
                        ping.innerText = "0";
                    }else {
                        if (ping.innerText.length == 1){
                            ping.innerText = "0";
                        }else {
                            ping.innerText = ping.innerText.substr(0,ping.innerText.length-1);
                        }
                    }
                    break;
                case "清除":
                    ping.innerText = '0';
                    break;
                case "+":
                case "-":
                case "*":
                case "/":
                    opsSuanShuYunSuan(e.target.innerText,ping);
                    break;
                case ".":
                    opsDian(e.target.innerText,ping);
                    break;
                case "=":
                    jiSuan(e.target.innerText,ping);
                    break;
            }
        }
        // 数字的操作
        function opsNum(num,obj){
            flag = false;
            if (obj.innerText == "0"){
                obj.innerText = num;
            }else {
                obj.innerText=obj.innerText+num;
            }
            nums+=n;
        }

        // 算术运算符
        function opsSuanShuYunSuan(n,obj){
            // flag 判断不让连加
            if (!flag){
                obj.innerText = obj.innerText+n;
                flag=true;
                nums = "";
            }
        }
        // 点   indexOf():包含
        function opsDian(n,obj){
            if (!(nums.indexOf(".")>-1)){
                obj.innerText = obj.innerText+n;
                nums+=n;
            }
        }
        // 等于
        function jiSuan(n,obj){
            let rs = eval("("+obj.innerText+")");
            obj.innerText += n+rs;
        }
    </script>
</head>
<body onload="initMyJiSuanQi()">
  <div id="main">
      <div>0</div>
      <div>清除</div>
      <div>退格</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>+</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>-</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>*</div>
      <div>0</div>
      <div>.</div>
      <div>=</div>
      <div>/</div>
  </div>
</body>
</html>

2.案例2：购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        *{
            <!-- 内外边距 -->
            margin: 0px;
            padding: 0px;
        }
        h1{
            text-align: center;
            color: aqua;
            line-height: 80px;
        }
        button{
            /*外边距*/
            margin-left: 530px;
            padding: 10px;
            color: red;
        }
        table{
            border: gainsboro 2px solid;
            text-align: center;
            width: 500px;
            margin: 20px auto;
        }
        thead{
            background-color: blanchedalmond;
        }
        tbody>tr:nth-child(even){
            background-color: aquamarine;
        }
        tfoot td{

            color: darkorange;
        }
        tbody a{
            color: blue;
            /*给文本添加下划线---underline*/
            text-decoration: underline;
            /*模拟超链接的小手---pointer*/
            cursor: pointer;
        }
        tbody>tr>td:nth-child(4){
            color: fuchsia;
        }
    </style>
    <script>
        // 准备数据源
        const goods = [
            {
                name:"HUAWEI X50",
                price:3998
            },
            {
                name: "Redmi k40",
                price: 4999
            },
            {
                name: "OPPO 6X",
                price: 4990
            },
            {
                name: "三星 6X",
                price: 2990
            }
        ]
        function rdGood(){
            const rd = parseInt(Math.random()*goods.length)
            return goods[rd]
        }
        function addGood(){
            let rdGood1 = rdGood();
            // 获取要改变内容的对象
            let tbody = document.getElementsByTagName("tbody")[0];
            // 利用DOM 创建一个tr元素对象
            let tr = document.createElement("tr");
            // 元素中有五个列
            // 名字
            let nametd = document.createElement("td");
            nametd.innerText=rdGood1.name;
            // 追加一条信息的name列
            tr.appendChild(nametd)
            // 价格
            let pricetd = document.createElement("td");
            pricetd.innerText=rdGood1.price
            tr.appendChild(pricetd)
            // 数量
            let counttd = document.createElement("td");
            counttd.innerText="1"
            counttd.addEventListener("dblclick",(evt => {
                // 双击后得到的目标
                let td = evt.target;
                // 获得td中的第一个孩子
                let firstChild1 = td.firstChild;
                let ninput = document.createElement("input");
                ninput.setAttribute("type","number");
                // 设置最小值，类型于min的参数都是关键字
                ninput.setAttribute("min","1");
                ninput.setAttribute("value",firstChild1.textContent);
                // 给文本框加一个事件：失去焦点 blur
                ninput.addEventListener("blur",ev => {
                    // 获取新的值
                    let newvalue = ninput.value;
                    // 创建文本 ，然后给新值放进去
                    let text = document.createTextNode(newvalue);
                    // 让新值替换td
                    td.replaceChild(text,ninput);

                    // 获得数量
                    let count = parseInt(newvalue);
                    // 获取单价: 获取td的前一个内容
                    let price = parseFloat(td.previousElementSibling.innerText);
                    let nexttd = td.nextElementSibling;
                    // 计算，单价，数量
                    countJiSuan(price,count,nexttd);
                });
                td.replaceChild(ninput,firstChild1);
            }))
            tr.appendChild(counttd)
            // 合计
            let hetd = document.createElement("td");
            hetd.innerText = rdGood1.price
            tr.appendChild(hetd)
            // 操作
            let opstd = document.createElement("td");
            // 删除的超链接
            let dela = document.createElement("a");
            dela.innerText= "删除"
            dela.addEventListener("click",deleteRow)
            // appendChild追加一个孩子
            opstd.appendChild(dela)
            // 追加一条信息的删除操作列
            tr.appendChild(opstd)
            // 追加到tbody中
            tbody.appendChild(tr)
            suan();

        }
        // 根据单价和数量计算
        function countJiSuan(price,count,obj){
            // 总合计
            obj.innerText = price*count;
            suan();
        }

        /*删除*/
        function deleteRow(e){
            let target = e.target;
            let currentRow = target.parentElement.parentElement;
            currentRow.remove();
            suan();
        }
        // 计算合计
        function suan(){
            let hetds = document.querySelectorAll("tbody>tr>td:nth-child(4)");
            let he = 0;
            // 第一种 fori
            /*for (let i = 0; i < hetds.length; i++) {

            }*/
            // 第二种 foreach1
            //hetds.forEach(jh)
            // 第三种 foreach2
            /*hetds.forEach(function (n,index){

            })*/
            // lambda
            hetds.forEach((n,index) => {
                he+=parseFloat(n.textContent)
            })
            let zong = document.querySelector("tfoot>tr>td:nth-child(4)");
            zong.textContent = he;
        }
    </script>
</head>
<body>
    <h1>开心购物车</h1>
    <button onclick="addGood()">添加商品</button>
    <table>
        <thead>
            <tr>
                <td>名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>合计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!--<tr>
                <td>小米</td>
                <td>2332</td>
                <td>1</td>
                <td>2332</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>小米</td>
                <td>2332</td>
                <td>1</td>
                <td>2332</td>
                <td><a href="#">删除</a></td>
            </tr>-->
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>总计</td>
                <td>0</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>