2022-08-24 第六小组 瞒春 学习笔记

前言

今天进行JavaScript的学习,JavaScript的思想与Java类似,都是面向对象的思想,最后再进行一个简易计算器的练习。

作者简介:大家好我是烫嘴的辛拉面,大家可以叫我拉面。
个人主页: weixin_49405762的博客
系列专栏: 经典算法习题集
为大家推荐一款刷题神器哦 点击跳转进入网站

目录

  • 前言
  • ✏️JavaScript
    • ✒️自动类型推断 弱类型
    • ✒️ES6声明变量语法
    • ✒️函数
    • ✒️判断和循环
    • ✒️常用工具对象
    • ✒️Dom编程
  • ✏️练习
  • ☀️总结
  • 必看

✏️JavaScript

JavaScript脚本语言,解释型,主要用来给HTML网页增加动态功能。 通常的js是运行在浏览器环境下的。JS的两种模型:
DOM:文档对象模型 document
BOM:浏览器对象模型 window
nodejs运行在计算机环境下,服务器技术。不能操作BOM和DOM。但是它可以操作文件, 能操作数据库,实际上是一门后端技术。
JS解释器:不同的浏览器,JS解释器不一样。
Chrome v8
node v8
safari JavaScriptCore
ECMAScript ES 一套规范
JavaScript JS 具体的实现
ES6 ES5 ES7…语法
JS基本上是web前端的核心!!!
页面的加载顺序是从上到下
JS是用来控制页面的显示方式
需要等待页面加载完成,再执行JS

✒️自动类型推断 弱类型

            1、数字 number
            2、字符串 string
            3、布尔型 boolean

4、null 空,定义了,但是值为空
5、undefined 未定义,没有声明过
6、NaN 非数字
7、数组
8、对象

✒️ES6声明变量语法

var num = 1;
var num = 2;
document.write(num);
新的声明变量的关键字
let num = 1;
num = 2;
document.writeln(num);
声明常量的关键字

✒️函数

Array()是一个函数,返回值就是一个空数组
JS里"没有"方法这个概念,叫做函数
JS里的方法不是java里的方法
JS里的函数相当于java里的方法
let arr = Array();
Array(),在JS中,函数可以当做《类》使用
let arr = new Array();

        // 可以理解为JS中的数组就是java中的集合

函数(Java的方法)

可以有参数列表
参数可以有多个

        function plus(a,b) {
            let a = 1;
             let b = 2;
             console.log(a + b);
             返回值

return的作用

                return可以终止函数的执行
<script>
            function plus(){}
            // 对象
            // Array()返回一个空数组
            // Object()返回一个空对象
            // let obj = new Object();
            function User(name) {
                this.name = name;
            }
            // 创建了一个user对象
            // 我们之前定义的this.name就是这个对象的属性
            // 我现在的user对象中有一个name属性,值是张三
            let user = new User("张三");
            console.log(user.name);

            let obj = Object();
            // JS对象的属性
            obj.name = "李四";
            obj.age = 30;
            // JS对象的方法
            obj.eat = function() {
                console.log("我正在吃东西...");
            }
            // 对象调方法
            obj.eat();

            // json串
            let teacher = {
                name:"王五",
                age: 35,
                drank: function() {
                    console.log("我正在喝酒...");
                }
            }
            // teacher.drank();
            console.log(teacher['drank']());
        </script>

✒️判断和循环

            在JS中,if(条件)
            规定:
            0,null,undefined为false
            剩下的都是true
 <script>
            let arr = [1,2,3,4,5];
            // for(let i = 0;i < arr.length;i++) {
            //     console.log(arr[i]);
            // }
            // for(i in arr){
            //     console.log(arr[i]);
            // }

            let student = {
                name: "小明",
                age: 10
            }
            // 遍历对象
            // console.log(student.length);
            for(attr in student) {
                console.log(attr);
                console.log(student[attr]);
            }
            /*
                中间省略了运算符 ===
            */
        </script>

✒️常用工具对象

            Array()
<script>
            /*
                常用工具对象
                Array()
            */
           let arr1 = [1,2,3];
           let arr2 = [9,8,7];
        //    console.log(arr1.concat(arr2));
           arr1.push(10);
           // 移除数组中的最后一个元素
           arr1.pop();
           // 移除数组中的第一个元素
           arr1.shift();
           console.log(arr1);
        </script>
 <script>
            // let name = "你好";
            // 对字符串进行编码
            // document.write(escape(name));
            let js = "alert('哈哈哈')";
            js = "1+1";
            // 把一个字符串解析成js代码执行
            // document.write(eval(js));
            // document.write(js);

            // isNaN 判断一个值是不是数字,是false,不是true
            // document.write(isNaN("哈哈"));
            // parseInt(); 转整数
            // parseFloat(); 转小数
            // document.write(10 / 4);

            // Number() 把一个值转成数字
            // document.write(Number("11111"));

            // String() 把一个值转成字符串
            document.write(String(123));
        </script>
            String:
                charAt,indexOf,lastIndexOf,
                replace,concat,match,
                substring,substr,toUpperCase
                toLowerCase
            Math:
                random,ceil,
                floor,round
            Date:
                getDate,getDay
                getMonth,getYear
                getHours,getMinutes
        */

✒️Dom编程

Document Object Model

文档本身就是一个文档对象document
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本是文本节点
注释节点(一般不用)
获取元素节点
根据id属性获取对应的元素节点
通过id获取到的是唯一的一个节点
let div = document.getElementById(“div1”);
根据标签名获取对应的元素节点
通过标签名获取到的是一堆标签元素节点

let div = document.getElementsByTagName(“div”);

根据class样式获取对应的元素节点
通过class样式获取的时一堆标签元素节点

let div = document.getElementsByClassName(“div1”);
console.log(div[0]);

新方式
querySelector找到和传入的选择器匹配的第一个元素
返回值是一个元素节点
et div = document.querySelector(“div”);
console.log(div);

querySelectorAll找到和传入的选择器匹配的所有元素
返回值一堆元素节点

<script>
            let div = document.querySelector("div");
            // innerHTML可以获取到HTML标签
            console.log(div.innerHTML);
            // innerText只能获取到文本
            console.log(div.innerText);

            let div2 = document.querySelector(".div2");
            div2.innerHTML = "

我是div2里面的h1

"
; div2.innerText = "

我是div2里面的h1

"
; </script>
  <body>
        <button onclick="delOne()">删除某一个子元素</button>
        <button onclick="del(this)">删除自己</button>
        <button onclick="delAll()">清空</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>

            function delOne() {
                let ul = document.querySelector("ul");
                let lis = document.querySelectorAll("li");
                ul.removeChild(lis[2]);
            }

            function delAll() {
               // 清空ul
               let ul = document.querySelector("ul");
               ul.innerHTML = ""; 
            }

            function del(obj) {
                // console.log(obj);
                // 找到要删除的元素
                // let btn = document.querySelector("button");
                // console.log(btn)
                // 元素.remove方法直接删除
                // btn.remove();
                obj.remove();

                /*
                    删除当前的记录
                    清空所有记录
                */

            }
        </script>

✏️练习

制作一个简易的计算器

<!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">
        <title>Document</title>
    </head>
    <body>
        <input type="text" class="num1">
        <select class="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" class="num2">
        <button onclick="calc()">=</button>
        <input type="text" readonly class="result">
        <hr>
        <button onclick="cls()">清空历史记录</button>
        <ol id="history"></ol>

        <script>
            /* 定义一个不重复的变量,用它来当做
                button和li共同的id
            */
            let r = 1;
            function calc() {

                // 获取第一个数
                let num1 = document.querySelector(".num1").value;
                // 获取第二个数
                let num2 = document.querySelector(".num2").value;
                let result = document.querySelector(".result");
                /* 
                    下拉菜单我们要找的元素是select,选择的是哪一个
                    选项,这个select的value值就是哪一个选项的value值
                */
                let oper = document.querySelector(".oper");

                result.value = eval(num1 + oper.value + num2);

                let li = document.createElement("li");
                // 生成历史记录的时候,加上按钮
                /*
                    并且处理id的问题,加单击事件
                */
                li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "";

                // 自我删除
                /*
                    li按照自定义的规则,li处理id的问题
                */
                li.setAttribute("id","l"+r);
                // 标记自增
                r++;

                let ol = document.querySelector("#history");
                ol.append(li);

                document.querySelector(".num1").value = "";
                document.querySelector(".num2").value = "";
                
            }  
            
            function cls() {
                // 拿到历史记录的ol
                let ol = document.querySelector("#history");
                ol.innerHTML = "";
            }

            function remself(obj) {
                // 把拿到的b1转换成li
                let li = document.getElementById(String(obj.id).replace("b","l"));
                // 删除自己
                li.remove();
            }

        </script>
    </body>
</html>

☀️总结

JS应该说是介于前后台之间的。JS应该是有志在网络编程方向发展的青年必学的东西,它是基础。例如Ajax的就要用到js。如果不是侧重于网络方面,js就不太重要了。但如果做网站方面,js就是很重要的,必然会用到他。

必看

算法对程序员来说及其重要,语言和开发平台不断变化,但是万变不离其宗的是那些算法和理论,刷算法最最最直白的原因就是找一个好的工作,那刷题一定是必不可少的
现在算法刷题平台还是蛮多的,给大家介绍一个我认为与大厂关联最深的平台——牛客网
2022-08-24 第六小组 瞒春 学习笔记_第1张图片

相较于其他平台,他们的题单更和工作,大厂靠拢,不光有面试必刷的101到题目,还有大量大厂真题,内容也全程免费,相较于其它会员费结算的来说 非常的友好
2022-08-24 第六小组 瞒春 学习笔记_第2张图片

牛客网还支持ACM模式,没有练习过的一定要提前适应!像某团、某为,都要求自己处理输入输出,如果不提前练习会很吃亏的!
牛客的题解更新迭代也很快,讨论区也有奇技淫巧的分享,能帮你把所有盲点扫清楚,整体来说还是非常推荐去练习的~
传送门:牛客网

你可能感兴趣的