JavaScript基础

最新推荐文章于 2024-07-09 18:13:44 发布
最新推荐文章于 2024-07-09 18:13:44 发布
阅读量1k 收藏 11
点赞数 36
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64991351/article/details/139970542
版权

目录

JavaScript基础

js语言

js数据

 HBuilderX

结构

组件

图片标签的书写 

静态书写

 动态书写

swiper轮播 

静态轮播书写方式      

动态轮播书写方式

 

  • JavaScript基础

  • js语言

        js语言不同于Java语言，js是一种脚本语言，按行执行，不需要提前编译，所以是一种很方便的前端脚本语言，因此很适合在前端使用。

  • js数据

        先了解我们的数据，以便我们使用后期的数据。我们需要在script中去书写我们的数据，然后我们调用console来访问我们的数据。

<body>
    <!-- js脚本语言 按行执行 不需要提前编译
		 java 先编译在执行 -->
    <script>
        // 数据类型 variable
        // 数值型
        var age = 18;
        var score = 424.99;
        // 字符串
        var add = "管城区";
        var id = "jx21022111010216"
            // boolean布尔型 true or false
        var flag = true;
        // null ：没有
        var nullVar = null;

        // 先声明 在赋值
        var idnum;

        console.log(age);
        console.log(score);
        console.log(add);
        console.log(id);
        console.log(flag);
        console.log(nullVar);
        console.log(idnum);

        // 数组
        var arr = [1, 1.1, true, "你好,taday is funny day"]

        // 对象 object
        // 使用数组将对象包裹起来
        var obj = [
            {
                // 键值对
                id: "jx21022111010216",
                stuName: "张三",
                age: 20,
                sex: true
            },
            stuMsg = {
                id: "jx21022111010215",
                stuName: "jeery",
                age: 20,
                sex: true
            },
            stuMsg = {
                id: "jx21022111010217",
                stuName: "tom",
                age: 20,
                sex: true
            }
        ]

        // 访问数组
        console.log(arr[2])

        // 访问对象 obj([index索引])
        console.log(stuMsg[2])
    </script>
</body>

  •  HBuilderX

         然后了解我们的新的开发工具HBuilderX极客开发工具。

  • 结构

        主要是与我们的VSCode有区别但是结构差不多，还是要了解一下，这样我们对后来的书写会更加方便。

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

         template就是我们html的body，主要的代码写在里面；然后我们的style也跟我们html的style一样主要的样式写在里面；最后我们的js脚本主要在script里面，这样的结构跟我们的html差不多，所以还需要多了解使用。

  • 组件

<template>
	<view class="content">
		<!-- 1.view相当于div -->
		<view class="view1">
			块内容1
		</view>
		<view class="view2">
			块内容2
		</view>
		<view class="view3">
			块内容3
		</view>
		<!-- 2.text相当于span -->
		<text>文本1</text>
		<text>文本2</text>
		<text>文本3</text>
        <!-- 3.image图片标签相当于img -->
		<image src="../../static/logo.png" mode=""></image>
		<!-- / 根目录 -->
		<image class="logo" src="/static/logo.png"></image>
	</view>
</template>

<script>
</script>

<style>
</style>

  • 图片标签的书写 

        图片标签的书写有两种。

  • 静态书写

        是将我们的动态图片链接直接引用到我们的image的src里面书写。

<template>
	<view class="content">
		<view class="main">
			main
		</view>
		<image src="https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner1.png" mode="" class="banner"></image>
	</view>
</template>
  •  动态书写

        将我们的动态路径在script中用变量数据的形式使用，让后在image里面直接引用我们的路径，使用我们经常会使用这个书写，来让我们的template更加简明。

<template>
	<view class="content">
		<!-- 动态绑定 -->
		<!-- 插值表达式{{}} -->
		<view class="main">{{title}}</view>
		<!-- 动态绑定属性 -->
		<image :src="imgUrl" mode="" class="banner"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '智慧校车',
				imgUrl:'https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner1.png'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

  • swiper轮播 

  • 静态轮播书写方式      

        轮播是一种显示的多张图片轮换播放的一种方法组件，但是这种静态轮播书写方式，使我们的template更加繁琐，所以我们推荐我们的动态书写。

<template>
	<view class="content">
		<!-- :indicator-dots="true":是否显示面板指示点
		     :autoplay="true" 是否自动切换
		     :interval="3000" 自动切换时间间隔
		     :duration="1000"  滑动动画时长
		 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner1.png" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner2.png" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner3.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
  • 动态轮播书写方式

        我们的动态轮播，会用到我们的js数据里面的对象我们引用，使用v-for循环来调用我们的图片，大家可以到vue的网页里面找到我们的这个vue2文档中找到我们v-for的使用方法，来正确了解和循环使用我们的图片。

<template>
	<view class="content">
		<!-- :indicator-dots="true":是否显示面板指示点
		     :autoplay="true" 是否自动切换
		     :interval="3000" 自动切换时间间隔
		     :duration="1000"  滑动动画时长
		 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<!-- swiper-item有多个,所以需要循环输出 :key="bannerData.id"绑定key值加速解析-->
			<swiper-item v-for="bannerData in bannerDatas" :key="bannerData.id">
				<view class="swiper-item">
					<image :src="bannerData.imgurl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '智慧校车',
				imgUrl: 'https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner1.png',
				// 轮播的数据
				bannerDatas: [{
						id: 1,
						imgurl: 'https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner1.png'
					},
					{
						id: 2,
						imgurl: 'https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner2.png'
					},
					{
						id: 3,
						imgurl: 'https://projectapp5566.oss-cn-beijing.aliyuncs.com/banner3.png'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

        最后还是我们的思维导图，简单明了。

小汤不圆
关注
  • 36
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
挣钱买房买车的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5588
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3052
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaScript基础入门
dangfulin的博客
08-21 5424
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
Javascript 基础知识学习
岳来的博客
11-23 6887
javascript 基础学习
JavaScript 基础
02-16
主要为个人学习笔记 超详细
ES6 新特性有哪些
weixin_64684095的博客
07-06 932
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
Vue前端打包
weixin_63680330的博客
07-04 352
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 834
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 410
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 167
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
JS混淆基本类型和原理
朴拙科技的博客
07-06 709
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue2 、 vue3首屏优化，减少白屏时间
最新发布
m0_56104994的博客
07-09 195
vue2、vue3首屏优化,减少白屏时间

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值