前端初体验-day9

JavaScript简介

JavaScript介绍

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。

JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多

为什么学习 JavaScript

• 操控浏览器的能力
• 广泛的使用领域
• 易学性

JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

JavaScript语句、标识符

语句

JavaScript 程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句

var num = 10;

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头

温馨提示

中文是合法的标识符，可以用作变量名（不推荐）

JavaScript保留关键字

以下关键字不需要强行记忆！

JavaScript有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

变量

var num = 10; 

变量的重新赋值

var num = 10;
num = 20;

变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(num);
var num = 10; // 结果是什么呢？

##hBuilderX的使用
数据类型
view相当于html中的div
text相当于html中的span
###了解Uniapp的文件的结构

文件名称	作用
pages	业务页面文件存放的目录
index	index页面
static	存放应用引用的本地静态资源(如图片、视频等)的目录，注意:静态资源都应存放于此目录
main.js	Vue初始化入口文件
App. vue	应用配置，用来配置App全局样式以及监听应用生命周期
index. html	所有的vu文件都会解析之后插入index.htm1文件中进行链接加载(vue的思想是单页面应用
manifest. json	配置应用名称、appid、logo、版本等打包信息
pages. json	配置页面路由、导航条、选项卡等页面类信息

###一些表达式
1.插值表达式：{{}}
2.：动态绑定属性
3.在hBuilderX中可以使用rpx和px来设置尺寸大小，rpx可以根据图片比例缩放

###轮播的表达

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item"></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"></view>
			</swiper-item>
		</swiper>

:indicator-dots=“true”:是否显示面板指示点<1–:autoplay="true”是否自动切换
:interval="3000”自动切换时间间隔
:duration="1008"滑动动画时长

使用v-for快捷、简介方式生成轮播

	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<swiper-item v-for="bannerData in bannerDatas" :key="bannerData.id">
				<view class="swiper-item">
				<image :src="bannerData.imgurl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

在script中插入以下代码，注意图片要是动态图片

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'
					}
				]