JavaScript快速入门

本文详细介绍JavaScript的起源、特点及语法,包括变量、数据类型、对象和数组的基本操作,适合初学者快速掌握JavaScript基础。

一、JavaScript语言简介

1.起源和学习目的

JavaScript语言诞生于1995年,由网景公司发明。主要用于处理网页中的前端验证信息。所谓的前端验证,就是检查用户的内容是否符合定义的规则。

一个完整的JavaScript实现包含了三个部分:ECMScript、DOM和BOM,我们所要讲解的也就是这三个部分。

2.JavaScript语言的特点

是一门解释型语言。

类似于C和java的语法结构。

是一门动态语言。

基于原型的面向对象语言。

二、JavaScript语言基本语法

1.JavaScript语言的编写位置

我们目前学习的JS全都是客户端的JS,也就是说全都是需要在浏览器中运行的,所以我们的JS代码全都需要在网页中编写。

我们写JS代码需要编写到<script>标签中。一般将script标签写在head标签中,分为事件定义式、嵌入式、和文件调用式。这点我昨天的文章中略有提及,这里就不细说了。

2.学会创建第一个输出Hello Word的js程序

创建一个html文件,在html文件的head标签中创建一个script标签,并编写如下代码:

<script type=”text/javascript”>

console.log(“Hello Word”);

<script>

运行编译测试即可,控制台输出数据是我们在编程测试断点数据时的重要测试工具,我们要学会使用控制台打桩。

3.JavaScript语言是严格区分大小写的一门语言。

4.JavaScript语言的注释分为 // 和 /* */ 形式。

5.JavaScript的标识符

所谓标识符,就是指变量、函数、属性的名字,或函数的参数。

标识符可以是按照下列格式规则组合起来的一或多个字符:

第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )。

其他字符可以是字母、下划线、美元符号或数字。

按照惯例,ECMAScript 标识符采用驼峰命名法。但是要注意的是JavaScript中的标识符不能是关键字和保留字符

6. 关键字和保留字符

关键字和保留字

7. JavaScript语言的变量

变量的作用是给某一个值或者对象标注的名称。

变量的使用var声明,使用=为变量赋值,声明和赋值可以同时进行。变量没有类型,统一用关键字var声明,变量所引用的数据是有类型的。

变量的数据类型

 

JavaScript语言一共用5中基本的数据类型 String、Number、Boolean、Null、Undefined ,除这5中基本的数据类型之外,所有的类型都是Object类型。总的来说JavaScript语言共有六种数据类型。(引用数据类型和基本数据类型)。

8. JavaScript数据类型的隐式转换

JS属于松散类型的数据语言,(弱类型语言),变量在声明的同时不需要指定数据类型,变量所引用的数据是有类型的。不同类型的数据在计算过程中自动进行转换。


JavaScript数据类型转换

三、JavaScript对象

1. Object对象

• Object类型,我们也称为一个对象。是JavaScript中的引用数据类型。

• 它是一种复合值,它将很多值聚合到一起,可以通过名字访问这些值。

• 对象也可以看做是属性的无序集合,每个属性都是一个名/值对。

• 对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里继承属性。

• 除了字符串、数字、true、false、null和undefined之外,JS中的值都是对象。

2. 创建对象

创建对象有两种方式

第一种:

var obj = new Object();

obj.name = "###";

obj.age = 15;

第二种:

var obj = {

name:"###",

age:15

}

3. 对象属性的访问

访问属性的两种方式:对象.属性名 或者 对象["属性名"]

4. 数组

数组也是对象的一种。数组是一种用于表达有顺序关系的值的集合的语言结构。

创建数组:var array = [1,44,33];

数组内的各个值被称作元素。每一个元素

都可以通过索引(下标)来快速读取。索引是从零开始的整数。

html,css,js,javascript,按钮 # 灵动波纹按钮:打造富有生命力的交互视觉盛宴 在网页设计中,按钮作为用户交互的核心元素,其视觉表现力直接影响用户体验。这款“灵动波纹按钮”以独特的动态效果打破传统静态设计的局限,通过CSS动画赋予界面鲜活的生命力。按钮采用柔和的青绿色背景(#00b894)与纯白色文字形成鲜明对比,圆角切割的边缘(20px圆角设计)增添了亲和力,而左下角的直角处理则巧妙平衡了圆润感,塑造出既友好又不失个性的视觉形象。 其核心亮点在于悬停时触发的波浪动画——通过伪元素构建的半透明白色矩形,以45度角为轴进行周期性位移,模拟水波流动的韵律。动画采用1秒为周期的ease-in-out曲线,使波纹运动既有加速的张力又有减速的缓冲,呈现出自然流畅的视觉节奏。这种设计不仅增强了交互反馈的直观性,更通过动态元素吸引用户注意力,引导操作行为。 技术实现上,通过Tailwind CSS实现基础样式布局,结合CSS伪元素与关键帧动画构建动态效果:利用overflow:hidden隐藏超出按钮范围的动画元素,通过transform属性的translate与rotate组合实现斜向位移,rgba颜色模式确保波纹的透明层次感。整体代码结构简洁清晰,将样式与逻辑分离,既保证了视觉效果的精致度,又兼顾了开发维护的便捷性。 此设计适用于各类需要强调交互的场景,无论是表单提交、功能触发还是页面跳转,都能通过这一灵动的波纹效果提升用户操作的愉悦感,让简单的按钮成为界面设计中的点睛之笔,在细节处彰显设计的温度与巧思。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值