JS相关介绍

news2024/11/26 15:33:48

1.JS引入:

        内部:直接在html文件内部使用script标签调用

        外部:另外新建JS文件,再在html文件中调用

2.输入输出:

        输入:prompt('请输入您的姓名:')

        输出:document.write('你们真是天才') 注:可以识别标签

                   console.log('控制台输出') 该语句是在控制台输出,用户看不到

3.变量,常量:

        变量声明:let 或 var ------注:var现在一般不用,var引入变量是基于全局的,且变量名可以重复,所以运行时可能报错,let则不会

        变量命名规范:1、有效符号(大小写字母、数字、下划线、$)

                                2、关键字、保留字不能用于变量命名

                                3、不以数字开头

                                4、尽量用有意义的变量名

                                5、驼峰命名法       userName

        常量:引入用const,常量名一般大写

4.基本数据类型:(JS是弱数据类型语言,赋值后才可以知道是什么数据类型)

        数字类型:number

        字符串类型:str

        布尔类型:boolean

5.运算符:这里只介绍逻辑运算符,其他什么算数,关系等九种运算符该处不做介绍

        逻辑运算符:&&      ||         !

                            alert(4 > 3 && 3 < 5)  ------两真为真,一假则假

                            alert(4 < 3 || 3 < 5)  -----一真则真   全假则假

                             alert(!true)   ---取反

6.分支语句:

        单分支:if(条件){执行的语句}

        双分支:if(条件){执行的语句}        else{执行的语句}

        多分支:if(条件){执行的语句}         else if (判断的条件){执行的语句}        else{}

                        注:有几个分支写几个,最后用else结尾即可

 7.循环语句:

        switch:

                switch (变量) {

                            case 条件1:

                                     执行语句

                                      break

                             case 条件2:

                                       执行语句

                                        break

                                default        执行语句}

                while循环:while(条件语句){执行语句}   -----需要有终止条件,否则会死循环

                           do-while同理

                for循环:for(let 条件;判断;处理条件){执行语句}

                注:循环嵌套一样使用即可

8.数组:

        数组的增删改查:增 push 在数组末尾添加------arr.push('姜加')

                                      unshift  在数组首部添加-------arr.unshift('jiangjia')

                                       arr.shift()在数组首部删除

                                       arr.pop()在数组首部删除

                                       splice(删除的起始位置,删除的个数)------arr.splice(3, 1)

                                       splice(添加的起始位置,0,要添加的元素)-------arr.splice(3, 0, 'jiangjia')

        数组遍历:for (let i in student) {

                                    for (let j in student[i]) {

                                        console.log(student[i][j])

                            }

                        }

9.函数:function 函数名(){

                执行语句

                }--------函数需调用才会有用       

         匿名函数:

function sayHi(fn) {
    fn()
    console.log('nihao')
}
function () {
    console.log('jiangjia')
 }

   sayHi(sayHello)

   10.值传递,引用传递:

        值传递:传递的时候只传递值

        引用传递:传递时候传递的是地址,当值发生改变时,那个地址中存储的值也会改变

11.默认值参数:PI等

12.箭头函数:

setInterval(() => {
    console.log('i hate you')
 }, 1000)

   13.递归:利用函数进行嵌套,对问题进行最小的划分即可

<body>
    <script>
        function jiecheng(n) {
            if (n === 1) {
                return 1
            } else {
                return n * jiecheng(n - 1)
            }
        }
        let a = jiecheng(9)-----求阶乘
        alert(a)
    </script>
</body>

 14.字符串常用方法

str.split()        ---分割字符串
str.substring()    ---提取从 indexStart 到 indexEnd(不包括)之间的字符
str.startsWith()    ---判断是否以什么开头
str.endsWith()     ---判断是否以什么结尾
str.includes()     ---判断是否包含该字符

 15.对象的增删改查:

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // obj.uname
        // obj['age']

        // 改:对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing = function () {
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

    </script>
</body>

16.math的内置对象:

// Math.ceil向上取整
    console.log(Math.ceil(3.1415))
// Math.floor向下取整
        console.log(Math.floor(3.1415))
// Math.abs   绝对值
        console.log(Math.abs(-3.12))
// pow 
        console.log(Math.pow(3.12, 10))
// 开平方根
        console.log(Math.sqrt(9))
// 随机数  
        console.log(Math.floor(Math.random() * 11) + 2)

 17. dom:

<body>
    <button>提交</button>
    <script>
        const btn = document.querySelector('button')
        // console.dir(btn)
        console.log(typeof (btn))

    </script>
</body>

   18.元素:

获取元素:
        // 1、通过css选择器获取             ('字符串')   
        const li2 = document.querySelector('.two')
        console.log(li2)
        // 2.document.querySelectorAll将所有匹配的元素全部获取到,并存放到伪数组
        const lis = document.querySelectorAll('li')
修改元素内容:
        元素名.innerHtml/innerText = `字符串`
修改元素属性:
        对象.属性 = 值
修改元素样式:
        CSS中的style修改

  19.定时器:

setTimeout\setInterval   定时器
setTimeout :某段代码或者函数在多久后执行
setInterval:间隔一段时间,将代码或者函数执行一次
setTimeout(code||function,time(ms))
返回值是一个整数,代表定时器编码

clearTimeout/clearInterval(a) ----该处的a为定时器编码

  练习

for/while循环打印乘法表:   效果图 

 二维数组遍历:

 效果图

 用户注册倒计时:

效果图

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/750134.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2.9 Bootstrap 辅助类

文章目录 Bootstrap 辅助类文本背景其他更多实例关闭图标插入符快速浮动内容居中清除浮动显示和隐藏内容屏幕阅读器 Bootstrap 辅助类 下面将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变…

【自定义类型】(结构体、枚举、联合)

结构体内存对齐&#xff1a; 计算结构体的大小 结构体成员不是按照顺序在内存中连续存放的而是有一定的对齐规则的 结构体内存对齐的规则&#xff1a; 1、结构体的第一个成员永远放在相比于结构体变量起始位置的偏移量为0的位置。 2、从第二个成员开始&#xff0c;往后的每…

我打赌!这个 SQL 题,大部分人答不出来

周末的时候&#xff0c;一个读者问了我一个很有意思的问题&#xff0c;是关于 MySQL 中 update 加锁的问题。 他用下面这张数据库表&#xff0c;做了个 MySQL 实验的时候。 发现事务 B 的 update 不会阻塞&#xff0c;而事务 C 的 update 会阻塞&#xff0c;都是对 id 10 这条…

使用 uniswap 模拟交易时遇到一个问题

使用 uniswap 模拟交易时遇到一个问题 Error: VM Exception while processing transaction: socket hang upat web3.js:6365:9(39)at send (web3.js:5099:62(29))at <eval>:1:20(11)我的入参是 > eth.sendTransaction({from:0xe26a357fcc5A010421A49B8a5A99Af14CDe2…

Elasticsearch 中的矢量搜索:设计背后的基本原理

作者&#xff1a;Adrien Grand 你是否有兴趣了解 Elasticsearch 用于矢量搜索&#xff08;vector search&#xff09;的特性以及设计是什么样子&#xff1f; 一如既往&#xff0c;设计决策有利有弊。 本博客旨在详细介绍我们如何选择在 Elasticsearch 中构建矢量搜索。 矢量搜索…

科研 | 入门大全

文章目录 1. 读文献1.1 文献查阅与管理、如何快速找到与研究方向相关文章如何快速了解国内外发展现状找到后&#xff0c;怎么高效阅读&#xff1f;需要逐词逐句阅读吗&#xff1f;需要顺序阅读&#xff1f;读完之后&#xff0c;好像懂了&#xff0c;好像也没懂读过的文章&#…

通过GWO算法对8个发电机进行了最佳调度编码(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 通过GWO&#xff08;Grey Wolf Optimization&#xff09;算法对8个发电机进行最佳调度编码是一种优化问题的解决方法。GWO算法灵…

【C++】C++异常机制

文章目录 C异常C语言传统的错误处理方式C错误处理方式异常的使用方法异常的使用规范异常安全问题异常规范自定义异常体系STL中的异常体系异常的优缺点 C异常 C语言传统的错误处理方式 终止程序&#xff0c;如assert直接断言报错&#xff0c;缺陷&#xff1a;非常麻烦&#xff…

密码学总结杂七杂八的wp

快捷键 折叠&#xff08;展开&#xff09;所有代码这里是指按下快捷键后凡事.py文件里可折叠的都折叠。 折叠所有代码&#xff1a;Ctrl Shift - &#xff08;减号&#xff09; 展开所有代码&#xff1a;Ctrl Shift &#xff08;加号&#xff09; 折叠&#xff08;展开&…

Linux运维面试题(一)之网络基础类面试题

Linux运维面试题&#xff08;一&#xff09;之网络基础类面试题 1.简述ISO/OSI的七层模型的分层与作用2.TCP/IP 四层&#xff08;网络接口层&#xff09;/五层模型&#xff08;数据链路层物理层&#xff09;3.TCP协议与UDP协议工作在哪一层&#xff0c;作用是什么&#xff1f;4…

Java安全——JAAS

Java安全 从保护终端用户不受攻击的角度讨论&#xff1a; 默认沙箱可以保护终端用户不受恶意java程序的破坏数字签名可以保护终端用户数据的完整性加密则可以保护终端用户数据的机密性 如何防止终端用户的破坏的&#xff1f; 鉴别与授权&#xff08;Java Authentication and Au…

渗透专题丨Vulnhub-DC-1靶机打靶

打开靶机&#xff0c;使用nmap进行网段扫描&#xff1a; 排除主机和kali IP&#xff0c;锁定靶机IP&#xff1a;192.168.38.141&#xff1a; 接下来进行端口扫描&#xff1a; 扫描服务详细信息&#xff1a; 这里扫到内容管理系统&#xff0c;网站也扫出来了&#xff1a;http-ge…

每天高频算法题-DAY3

题目一 在一个 n * m 的二维数组中&#xff0c;每一行都按照从左到右 非递减 的顺序排序&#xff0c;每一列都按照从上到下 非递减 的顺序排序。请完成一个高效的函数&#xff0c;输入这样的一个二维数组和一个整数&#xff0c;判断数组中是否含有该整数。 示例: 现有矩阵 ma…

电路分析 day01 一种使能控制电路

本次分析的电路为 一种使能控制电路 &#xff08;站在别人的肩膀上学习&#xff09; 资料来源 &#xff1a; 洛阳隆盛科技有限责任公司的专利 申请号&#xff1a;CN202022418360.7 1.首先查看资料了解本次电路 1.1 电路名称&#xff1a; 一种使能控制电路 1.2 电路功能…

Can转RTU网关can总线转以太网设备

YC-CAN-RTU 是一款用于 CAN-Modbus 现场总线与 RS-232 总线或 RS-485 总线之间数据转换的协议型转换器&#xff0c;支持标准 Modbus RTU 协议。集成 1 路RS-232 通道、1 路RS-485 通道、1 路CAN-Modbus 通道&#xff0c;可以方便地嵌入使用 RS-232 接口和 RS-485 接口的节点上&…

通过层级列表循环生成树结构

列表生成树结构 应用 前提: 列表有字段能表示所处层级(如Deep、Level).根据自己业务来。主要是针对列表对象来处理&#xff0c;组织成树结构。如下图&#xff1a; 在得到如图类似数据后&#xff0c;采取使用函数来组织树结构&#xff0c;同时生成层级序号&#xff08;1&…

TCP 与UDP区别

目录 网络参考模型TCPTCP 是什么特点 UDPUDP 是什么特点 TUP与UDP区别 总结什么时候选TCP or UDP 网络参考模型 TCP TCP 是什么 传输控制协议&#xff08;TCP&#xff09;是TCP/IP模型的传输层协议。它是一个面向连接的协议。因此&#xff0c;协议首先在源和目标之间建立连接…

《面试1v1》Redis内存优化

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

WEB阶段_HTML(附代码笔记)

&#xff08;一&#xff09;案例一&#xff1a;网站信息页面的显示 1、HTML文档的创建 <html><head><title>01-HTML的文件创建&#xff08;浏览器标签显示的名字&#xff09;</title></head><body><h2>你好</h2></body>…

点云3D检测算法-Point pillar踩坑日记

工程地址&#xff1a; https://github.com/nutonomy/second.pytorch 1.环境搭建&#xff0c;跟着官网的教程走 1.1注意官网上的这条语句&#xff0c;存在一些坑 conda install pytorch torchvision -c pytorch 它会重新安装cudatoolkit和cudnn&#xff0c;版本可能很老旧&…