web笔记四

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量33 收藏
点赞数
文章标签： 前端 笔记 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuli_student/article/details/131674285
版权

js引入方式

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
 
 
    <script>
        // 内部
        // prompt('请输入您的年龄：')
    </script>
    <!-- 外部 -->
    <script src="./03-外部js.js">
    </script>
</body>
 
</html>

输入输出语句

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
    <script>
        // 输入语句
        // prompt('请输入您的密码：')
        // 打印到页面
        document.write('你们真是小天才')
        // 可以识别标签
        document.write('<strong>你们真是小天才</strong>')
        // 控制台输出语句
        console.log('我现在要在控制台输出')
 
    </script>
</body>
 
</html>

变量

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
    <script>
 
        // 变量：盒子----存储数据的容器           数据本身不是变量
        //  变量的声明：
        // let 变量名           var  变量名
        // let age
        // //    变量赋值
        // age = prompt('请输入您的年龄：')
 
        // age = 33
        // console.log(age)
 
 
        // 变量的初始化
        // let uname = prompt('请输入您的用户名：')
        // console.log(uname)
 
 
        // 同时定义多个变量
        // let uname = 'zs', age = 21
        // console.log(uname, age)
 
        let age = prompt('请输入年龄：')
        document.write(age)
 
 
 
 
    </script>
</body>
 
</html>

变量命名规范

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <script>
        // 变量命名规范:1、有效符号（大小写字母、数字、下划线、$）
        // 2、关键字、保留字不能用于变量命名
        // 3、不以数字开头
        // 4、尽量用有意义的变量名
        // 5、驼峰命名法       userName
 
    </script>
 
</body>
 
</html>

let和var的区别

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
 
    <script>
        // var 可以多次声明同一变量  
        console.log(age)
        // var age
        let age
    </script>
</body>
 
</html>

const常量

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <script>
        // 常量名大写   常量无法更改
        const PI = 3.14
        // PI = 4.456
        console.log(PI)
    </script>
</body>
 
</html>

数据类型

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // js是弱数据类型语言    只有赋值之后，才知道是什么数据类型
        let uname = 21
        uname = 'gouxin'
        console.log(typeof (uname))
    </script>
</body>
 
</html>

基本数据类型

1.数字类型

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
    <script>
        let a = 21.21312
        let b = 33
        console.log(a)
        console.log(a + 2)
        console.log(a + b)
        console.log(a - b)
        console.log(a * b)
        console.log(a / b)
        console.log(a % 2)
 
 
 
 
 
 
    </script>
</body>
 
</html>

2.字符串类型

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // let uname1 = 'nnnsns'
        // console.log(typeof (uname1))
        // let uname2 = "nnnsns"
        // console.log(typeof (uname2))
        // let uname3 = "nnn'gouxin'sns"
        // console.log(typeof (uname3))
        // let uname4 = 'nnn"gouxin"sns'
        // console.log(typeof (uname4))
 
 
        // 字符串拼接用+
 
        let a = +prompt("请输入num1")
        let b = +prompt("请输入num2")
        // alert   警示框
        alert(a + b)
 
 
        // 模板字符串
        // let uname = prompt("请输入名字：")
        // let age = prompt("请输入年龄：")
 
        // document.write('你叫' + uname + ',今年' + age + '岁了')
        // document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
 
 
 
 
 
    </script>
</body>
 
</html>

3.布尔类型


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <script>
        console.log(typeof (3 < 5))
        // undefinded  声明，未赋值
        // null   NaN   not a  number
        console.log(undefined + 1)
        console.log(null + 1)
 
    </script>
</body>
 
</html>

显示转换

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let a = +prompt('num1')
        let b = +prompt('num2')
 
        console.log(Number(a) + Number(b))
        console.log(typeof (+a))
 
        let c = '200.9875px'
        console.log(parseInt(c))
        console.log(parseFloat(c))
 
 
    </script>
</body>
 
</html>

运算符

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script>
        // =  赋值运算符
        // let a = 21
        // a = 33
 
 
        // a += 4 // a = a + 4
        // a *= 2   //a = a * 2     74
        //a -= 3    //a = a - 3
        // a /= 2     //a = a / 2      35.5
        // alert(a)
 
 
 
        // let b = a++  //先赋值，再自增
        // alert(b)
        // alert(a)  //36.5
        // b = ++a   //先自增，再赋值
        // alert(b)
 
 
        // 比较运算符  
        // >   <   >=   <=  ==   ===
        let num1 = 2
        let num2 = '2'
        alert(num1 == num2)
        alert(num1 === num2)
        // ==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较   ===   即比较数值，也比较类型
 
 
 
 
 
 
    </script>
</body>
 
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // &&     ||       !
        //  alert(4 > 3 && 3 < 5)  //两真为真，一假则假
        // alert(4 < 3 || 3 < 5)  //一真则真   全假则假
        // alert(!true)
        alert(!(4 < 3))
 
 
 
    </script>
</body>
 
</html>

单分支语言

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let age = 11
        // if(条件){
        //     执行的代码
        // }
        if (age < 18) {
            document.write('你是小弟弟，不要乱跑')
        }
 
 
    </script>
</body>
 
</html>

双分支语言

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
    <script>
        let age = +prompt('请输入您的年龄：')
        if (age <= 18) {
            alert('你不要乱跑')
        } else {
            alert('恭喜你，成年了')
        }
 
    </script>
</body>
 
</html>

多分支语言

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let age = +prompt('age：')
        if (age < 18) {
            alert('你是未成年 学习吧')
        } else if (age <= 25) {
            alert('青春年华')
        } else if (age <= 40) {
            alert('好汉不提当年勇')
        } else {
            alert('男人四十一枝花')
        }
    </script>
</body>
 
</html>

三元运算符

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let age = +prompt('请输入您的年龄：')
        // if (age <= 18) {
        //     alert('你不要乱跑')
        // } else {
        //     alert('恭喜你，成年了')
        // }
 
        // 判断条件？条件成立时执行的语句：条件不成立时执行的语句
        age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')
    </script>
</body>
 
</html>

switch

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let num = +prompt('请输入今天星期几了：')
        switch (num) {
            case 1:
                alert('星期一')
                break
            case 2:
                alert('星期二了')
                break
            case 3:
                alert('星期三了')
                break
            case 4:
                alert('星期四了')
                break
            case 5:
                alert('星期五了')
                break
            case 6:
                alert('周末了')
                break
            case 7:
                alert('周末了')
                break
            default:
                alert('你是外星人吗')
        }
    </script>
</body>
 
</html>

while循环

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // while   一定要有终止条件
        let i = 10
        // while (i > 11) {
        //     console.log('你是大聪明')
        //     i--
        // }
 
 
        do {
            console.log('你是大聪明')
            i--
        } while (i > 11)
    </script>
</body>
 
</html>

for循环

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        for (let i = 1; i <= 10; i++) {
            document.write(`你真是个大聪明<br>`)
        }
        //
 
 
 
    </script>
</body>
 
</html>

循环嵌套


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            margin: 15px;
        }
    </style>
</head>
 
<body>
    <script>
        for (let i = 1; i < 8; i++) {
            console.log(`今天是第${i}天`)
            for (let j = 1; j < 11; j++) {
                console.log(`这是今天第${j}朵玫瑰花`)
 
            }
        }
 
        for (let i = 1; i < 10; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j}*${i}=${i * j}</span>`);
            }
            document.write(`<br/>`)
        }
 
 
        for (let i = 1; i < 6; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`*`)
            }
            document.write(`<br/>`)
        }
 
 
    </script>
</body>
 
</html>

continue，break

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        for (let i = 1; i < 100; i++) {
            if (i === 50) {
                // break
                continue
            }
            console.log(i)
        }
        // break:跳出循环
        // continue：跳出本次循环
    </script>
</body>
 
</html>

循环加强

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let arr = [1, 2, 3, 66, 4, 5]
        // for  in
        // for (let i in arr) {
        //     console.log(arr[i])
        // }
        // for   of
        for (let k of arr) {
            console.log(k)
        }
 
    </script>
</body>
 
</html>

数组

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        // let name1 = '俊杰'
        // 有序的数据序列
        //             0         1         2           3       4     5
        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
        // 数组的声明方式
        // arr[索引下标]
        alert(arr[5])
 
 
        // let arr2 = new Array()
 
 
        // 数组遍历
        // for (let i in arr) {
        //     console.log(arr[i])
        // }
 
        // 数组的操作   
        // 通过索引下标给对应元素重新赋值
        arr[1] = 'guanyu'
        console.log(arr instanceof Array)
        let arr2 = [1, 2, 3, 4]
        // concat合并数组
        arr3 = arr.concat(arr2)
        console.log(arr3)
 
        // 增 push   在数组末尾添加
        arr.push('姜加')
 
 
        // unshift  在数组首部添加元素
 
        arr.unshift('jiangjia')
 
        arr.shift()
 
        arr.pop()
        // splice(删除的起始位置，删除的个数)
        arr.splice(3, 1)
        // splice(删除的起始位置，0,要添加的元素)
        arr.splice(3, 0, 'jiangjia')
        console.log(arr)
 
        console.log(arr.join(' **'))
        console.log(arr.reverse())
 
 
 
        console.log(arr.slice(3))
 
 
 
 
 
 
 
    </script>
</body>
 
</html>

二维数组

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
 
        // console.log(student[1][0])
        for (let i in student) {
            for (let j in student[i]) {
                console.log(student[i][j])
            }
        }
 
 
        // student.length   获取数组长度的
    </script>
</body>
 
</html>

nuli_student
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web笔记
id_1314520的博客
01-06 523
2016.11.15Web的学习 StackOverFlow    CSDN   vs   layer    ajax  jq22插件 一、            1、html ：超文本标记语言，一种网络语言     2、JavaWeb里面的项目都是通过浏览器+网页来显示效果的 二、固定规范：    1、有一个开始   与之对应的结束标签                  
web前端最全笔记
qqyang_的博客
07-14 4317
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
Web笔记4：VScode的使用
qq_59433449的博客
06-27 1982
1.网页开发工具VScode的使用（1）双击打开（2）新建文件（Ctrl+N）（3）保存（Ctrl+S），保存为.html文件（4）Ctrl+加号键，Ctrl+减号键，可以缩小和放大视图（5）生成骨架页面：!（英文）+Tab键（6）利用插件在浏览器中预览页面：单击鼠标右键，点击“Open In Deduft Browser”2.文档类型声明，作用是告诉浏览器使用的是哪个版本的HTML来显示网页。注意：（1）声明位于文档的最前面的位置，处于标签之前。 ...............
WEB 笔记笔记
12-24
web 开发笔记 超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画[2]。 Internet...
web基础笔记
09-28
web基础笔记 Web 基础知识 Web 应用通过浏览器访问，运行在远程的服务器上，访问网站。浏览器是通用的客户端，B/S 结构的客户端。服务器端内容更新客户端不要更新，更新对用户影响不大。 客户端和服务器端 ...
web笔记.xmind
07-19
web前段笔记，每日一更
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
安全：Web安全学习笔记
02-26
这个月看了一本《Web安全设计之道》，书中的内容多是从微软官方文档翻译而来，这本书的含金量不高，不过也不能说没有收获，本文简单记录一下我学习Web安全方面的笔记。本文不涉及IIS、Windows和SqlServer的安全管理...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 293
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端与HTML
m0_65544927的博客
07-21 526
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 253
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 234
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 258
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 978
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 925
CTFWP，ctfshow-web42
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 548
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 375
thinkphp8图片上传的验证
Java Web开发工具与技术笔记
传智播客 Java Web 笔记全套 本资源为传智播客 Java Web 笔记全套，涵盖了 Java Web 开发的基础知识和高级技术。下面是该资源的知识点总结： 一、Eclipse 工具的使用 1. Eclipse 工作空间的选择：选择一个文件夹...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值