前端学习——jsDay1

已于 2023-07-05 14:33:06 修改
阅读量132 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 js
于 2023-07-05 10:51:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131547546
版权

Day1 JavaScript是什么？

在这里插入图片描述
在这里插入图片描述
实现点击按钮改变颜色

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

Day1 JavaScript书写位置

在这里插入图片描述

内部js

在这里插入图片描述

外部js

在这里插入图片描述

内联js

在这里插入图片描述
在这里插入图片描述

Day1 js注释

在这里插入图片描述

Day1 js结束符

在这里插入图片描述
在这里插入图片描述

Day1 js输入输出语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        alert('你好 JS~')
        document.write('JavaScript我来了！')
        console.log('它~会魔法吧~')
    </script>
</body>

</html>

Day1 字面量

在这里插入图片描述

summary这里是引用

Day1 变量

在这里插入图片描述
在这里插入图片描述

变量的声明

在这里插入图片描述

变量的赋值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let num = 20
        let uname = '张三'
        console.log(num)
        console.log(uname)
    </script>
</body>

</html>

更新变量

在这里插入图片描述

声明多个变量

在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
       let name = prompt('请输入姓名：')
       document.write(name)
    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
       let num1 = 10
       let num2 = 20
       let temp = num2
       num2 = num1
       num1 = temp
       console.log(num1,num2)
    </script>
</body>

</html>

变量本质

在这里插入图片描述

变量命名规则与规范

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
       let uname = prompt('请输入你的姓名：')
       let age = prompt('请输入你的年龄：')
       let gender = prompt('请输入你的性别：')
       document.write(uname,age,gender)
    </script>
</body>

</html>

let和var区别

在这里插入图片描述

数组

在这里插入图片描述

数组声明

在这里插入图片描述

数组取值

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let week = ['Mon','Tue','Wed','Thur','Fri','Sat','Sun']
        console.log(week[6])
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

常量

在这里插入图片描述
在这里插入图片描述

数据类型

在这里插入图片描述

数字类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        const PI = 3.1415926
        let r = prompt('请输入圆的半径：')
        let area = PI * r * r
        document.write(area)
    </script>
</body>

</html>

字符串类型

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

//反引号，${}
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let name = prompt('请输入姓名：')
        let age = prompt('请输入年龄：')
        document.write(`大家好，我叫${name}，今年${age}岁了`)
    </script>
</body>

</html>

布尔类型

在这里插入图片描述

未定义类型

在这里插入图片描述

空类型

在这里插入图片描述
在这里插入图片描述

检测数据类型

在这里插入图片描述
在这里插入图片描述

类型转换

在这里插入图片描述

隐式转换

在这里插入图片描述

显示转换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        alert(`两个数相加和为：${num1+num2}`)
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let num1 = prompt('请输入第一个数：')
        let num2 = prompt('请输入第二个数：')
        let sum = Number(num1) + Number(num2)
        document.write(sum)
    </script>
</body>

</html>

实战案例

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <style>
        h2 {
            text-align: center;
        }
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
        th {
            padding: 5px 30px;
        }
        table,th,td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h2>订单确认</h2>
    <script>
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        let total = price * num
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>华为P60</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
    </table>      
        `)
    </script>
</body>

</html>
肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习——背景渐变
qq_42355032的博客
06-29 2689
最近遇到两个作业里都出现透明度，渐变阴影等要求，现在记录一下相关知识点。当渐变用于背景时，可以使用像图像一样的属性设置。 参数： 参数1：表示方位，不写默认为 ，可选值： （1）,,, （2）表示角度，度数 （3）表示圈 参数2：颜色1 参数3：颜色2默认情况下，颜色等分占比，可手动指定渐变占比。 二、放射渐变——径向渐变 ...
前端学习————css实现简单登录页面
qq_63606575的博客
03-13 6280
css实现简单登录页面一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML2.css 一、页面展示 二、思路 1.设置背景图片 2.设置登录框框并使其处于靠右位置 3.设置登录框框内容 三、代码展示 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心</
前端学习——vue + elementui实现分页查询
qq_33453797的博客
12-20 1124
elementui使用pagination提供了多种分页功能，可以根据自己的需求选择不同的分页样式，但其最重要的参数有三个，current-page——当前页码, page-size——页大小, total——总条数；翻页实现代码，定义四个参数，列表书籍，页码，页大小，总条数，然后点击翻页和切换页大小时，调用查询接口，并把响应的页码，总条数和页大小赋值给定义的参数。分页查询功能，是很常见的一个功能，下面是记录使用vue + elementui实现的分页查询功能。要在页面中使用分页功能需要添加以下代码。
前端学习——JSON格式详解
热门推荐
物联网 IoT 经验分享
06-19 3万+
0.前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言...
微前端框架 —— qiankun
weixin_43799793的博客
04-05 1327
微前端框架 —— qiankun https://qiankun.umijs.org/zh/guide 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 针对前端开发人员较多的大型项目比较合适，可分为主工程和子工程 ...
前端网络——Ajax使用
01-08
AJAX是什么？ AJAX 可以用于创建快速动态的网页。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据...
品优购网站_品优购_前端代码——商城_
10-01
【标题】"品优购网站_品优购_前端代码——商城_" 提供的是一个名为“品优购”的在线购物平台的前端代码。这个项目旨在实现一个基础的电商平台功能，可能包括用户界面、商品浏览、购物车管理以及结账流程等关键模块。...
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
移动前端系列——移动页面性能优化
02-20
随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面的事情。首先，为什么要最移动页面进行优化？纵观目前移动网络的现状，移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1120
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 925
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
HTML_表单 和 表单案例
secret010的博客
07-05 238
【代码】HTML_表单 和 表单案例。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 263
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
Vue前端打包
weixin_63680330的博客
07-04 325
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1312
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
Haproxy搭建Web群集
wkysdhr的博客
07-08 482
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 139
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
JS混淆基本类型和原理
朴拙科技的博客
07-06 551
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
前端分页插件_免费开源的React前端框架——ReactAdmin
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于快速构建管理后台应用程序。它提供了许多可重用的组件和工具，包括前端分页插件。 ReactAdmin 的前端分页插件是一个高度可定制的组件，可以与任何 API 集成，并支持多个数据源。它具有许多功能，例如支持自定义分页大小、排序和筛选。此外，它还支持异步加载和无限滚动等高级功能。 ReactAdmin 还提供了许多其他功能，例如表单生成器、图表、数据导出和多语言支持等。它还支持与多个数据源集成，例如 REST 和 GraphQL。 总之，ReactAdmin 是一个功能强大且易于使用的前端框架，适用于构建管理后台应用程序。如果您需要在您的项目中使用前端分页插件，ReactAdmin 是一个不错的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值