JavaScript (五) 对象与数组
对象 (object)一个对象就是一系列属性的集合,一个属性包含一个名和一个值 例: 12345678910/* 对象字面量 */{ name: 'zs', age: 18, sex: true, sayHi: { first: 'Bob', last: 'Smith' }} 对象是由一系列属性组成,每一个属性都有一个名字(如上面案例中的 name、age),和一个值(如上面案例中的 ‘zs’、18)。每一个名/值对之间用逗号( , )分隔,并且名和值之间由冒号( : )分隔 对象中的属性值可以是任何类型的数据( 包括对象 ) 创建对象使用 对象字面量 创建一个对象 语法: 1var 对象名 = 对象字面量 例: 1234567var obj = {} //创建一个名为obj的对象console.log(typeof obj); // 'object'/* 创建一个名为obj2的对象,对象中包含两个属性 */var obj ...
JavaScript (四) 流程控制
js 中默认是从上到下一行一行执行的,这种按照顺序执行在程序中就被称作顺序结构,流程控制就是指控制程序代码的执行顺序 三种基本程序结构: 顺序结构顺序结构是程序中最简单、最基本的程序结构,它没有特定的语法,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的 分支结构分支结构在执行代码的时候,可以根据条件进行选择,条件越多对应的结果越多,分支也就越多。在 Js 中通过 if...else... 语句、switch 语句 来实现分支结构 单路分支语法: 12if(条件) //条件为 true 时执行此处语句; 例: 123var a = prompt("请输入...","");if(a > 4) alert("输入的数字大于4"); 块语句如果 if(条件) 后的语句有多个( 默认只匹配第一条语句 ),需要使用{}来对代码进行分组,写在{}中的代码会作为一个整体一起执行,如果只有一条语句可以省略大括号{} 语法: 123{ // ...
JavaScript (三) 运算符与表达式
运算符又称为操作符,运算符就是用于对数据进行各种运算的符号,JavaScript 有算术运算符、赋值运算符、关系运算符等 算数运算符算数运算符包括 加(+) 减(-) 乘(*) 除(/)和 取模(%) 运算符,对于非Number类型的数据值进行算数运算时,会将这些值转换为Number类型然会在运算,其中任何数据类型的值和 NaN 做运算都得 NaN +可以对两个值进行加法运算,并将结果返回 - 可以对两个值进行减法运算,并将结果返回 *可以对两个值进行乘法运算,并将结果返回 / 可以对两个值进行除法运算,并将结果返回 %可以对两个值进行取模运算(取余数),并将结果返回 例: 123console.log(100+100); //输出:200console.log(2-true); //输出:1console.log(undefined*NaN); //输出:NaN 字符串加法运算运算关系: 任何数据类型的值与字符串相加时会先将其转换为字符串,然后将两个字符串拼接成一个字符串( 拼串 ) 我们可以让任意的数据类型+""( 空串 )使其转换为字符串( 隐式转换 ...
JavaScript (二) 变量与数据类型
字面量字面量(literal)又称直接量,是指程序中能够直接使用的值,如 3.1415926 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e) 1233.141001123e5 字符串(String)字面量 可以使用单引号或双引号 12"John Doe"'John Doe' 表达式字面量 用于计算 125 + 65 * 10 数组(Array)字面量 用于定义一个数组 1[40, 100, 1, 5, 25, 10] 对象(Object)字面量 用于定义一个对象 1{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 变量(variable)变量是程序中数据的临时存放场所。在代码中可以只使用一个变量,也可以使用多个变量 声明变量JavaScript 使用 var 关键字来声明变量 1var carname; // 变量声明 变量声明之后,该变量默认值为undefine ...
JavaScript (一) 发展与使用
JavaScript 是一种具有函数优先特性的轻量级、解释型( 无需手动编译,运行时边解释边执行 )的编程语言,它是运行在 Web浏览器中的一种脚本语言,当然,也还可被运行在一些非浏览器环境中,如:Node.js 进一步说,JavaScript 是一种基于原型、多范式、单线程的动态类型语言( 无需指定类型,运行时确定类型 ),并且支持面向对象、命令式和声明式( 如函数式编程 )风格 历史 JavaScript 最初由 Netscape( 网景公司 )的一位工程师,名叫( Brendan Eich )设计的,起初命名为 LiveScript,后来由于 Netscape公司在与 Sun公司合作之后将其改名为 JavaScript JavaScript 最初受 Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自 Java。但 JavaScript 的主要设计原则源自 Self 和 Scheme。JavaScript 与 Java名称上的近似,是当时 Netscape 为了营销考虑与 Sun微系统达成协议的结果。为了取得技术优势 ...
Mobile Adaptation & Responsive Web Design
基本概念_Device Pixels_(设备像素)屏幕上显示的任何画面,都是由一个个能够产生不同颜色的点构成,这些点叫做像素(Pixel) 我们将屏幕上的物理像素称为 “设备像素”,即设备屏幕上的实际像素点,数量固定 与设备物理像素相关的另一个概念是 _Pixels Per Inch_(每英寸像素数, PPI),它代表屏幕对角线的物理像素个数除以对角线英寸数,用于表示屏幕密度 _CSS Pixels_(CSS 像素)CSS 像素是网页设计中常用的长度单位( px ),用于定义元素的尺寸、边距、字体大小等。 它是一种抽象的逻辑像素单位,数量可以根据设备的 DPR 进行缩放,因此数量与设备物理像素不一一对应 _Device Pixel Ratio_(设备像素比)DPR 指的是设备物理像素数和 CSS 像素数的比例( DPR = 物理像素数 / CSS 像素数 )。在屏幕密度( PPI )高的设备上,为了保持元素的可读性和可点击性,浏览器会将多个物理像素映射为一个 CSS 像素。 这使得网页在不同设备上看起来大小一致 设备像素比( DPR )可以通过 window.devicePixelRa ...
DOS命令
DOS是Disk Operating System(磁盘操作系统)的缩写,常见的DOS有两种:IBM公司的PC-DOS和微软公司的MS-DOS MS-DOS 它是由美国微软公司发展的操作系统,运行在Intel x86个人电脑上。自微软图形界面操作系统Windows NT问世以来,DOS就作为一个后台程序的形式出现,我们可以通过键盘快捷键Win + R 打开运行窗口-在里面输入 cmd 回车即可进入DOS界面。 DOS命令,计算机术语,是指DOS操作系统(单任务的操作系统)的命令,是一种面向磁盘的操作命令,主要包括目录操作类命令、磁盘操作类命令、文件操作类命令和其它命令。 内部命令与外部命令内部命令,是指在DOS启动之后,自动通过command.com文件导入内存的命令。在执行这些命令的时候,直接从内存进行调用。command.com文件是DOS的核心程序,也就是说内部命令是由DOS自身提供。而外部命令是一条单独的可执行文件。 外部命令需要保证程序的可执行文件(.exe或.com)在当前的目录中,或在环境变量PATH中。 DOS的外部命令就是一些应用程序,这些外部命令都是以文件的形 ...
CSS Transition & Animation & Transfrom
过渡(transition)CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。它可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transition 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化 过渡相关属性: transition-property 指定过渡效果中的样式属性名称,默认值:all(所有属性) transition-duration 属性以秒( s )或毫秒( ms )为单位,用于指定过渡动画所需的时间,默认值:0s transition-timing-function 用于定义过渡效果的时序计算函数 关键字: ease:默认值,元素样式从初始状态过渡到终止状态时速由快到慢。 linear:元素样式从初始状态过渡到终止状态时速是匀速。 ease-in:元素样式从初始状态过渡到终止状态时速由慢到快。 ease-out:元素样式从初始状态过渡到终止状态时速由快到慢。 ease-in-out:元素样式从初始状态过渡到终止状态时,先加速再 ...
CSS Flex & Grid Layout
弹性盒子布局(Flex Box Layout)弹性盒子是一种基于父容器的布局机制,它通过 display: flex 来激活,激活后容器中的子元素可以在水平或垂直方向上膨胀以填充额外的空间,或收缩以适应更小的空间 弹性盒子布局的基本概念: Flex Container(弹性容器, 伸缩容器): display 的值设置为 flex 或 inline-flex 的元素为弹性容器 Flex Item(弹性项目, 伸缩项目): 弹性容器( Flex Container ) 的每个子元素称为弹性项目 main axis(主轴): 所有弹性项目( Flex Item )沿其一侧排列的轴称为主轴 cross axis(交叉轴): 垂直于主轴的轴称为交叉轴 样例 HTML: 1234567<div class="container"> <div style="background-color: lightgray">盒子1</div> <div style="backgr ...
CSS Float & Position
文档流(normal flow)文档流(正常流)是 浏览器页面中元素组织排列的默认规则,属于网页的最基层 将 HTML 中的元素在页面中自上向下分成一行一行,并在每行中按从左至右的顺序挨次排放元素,即为文档流 浮动(float)描述:浮动可以指定一个元素沿其所在容器的左侧或右侧放置,允许其它文本和行内元素环绕它。 属性值: none(默认值,元素不浮动) left(元素向左浮动) right(元素向右浮动) 浮动元素的定位规则: 当一个元素浮动之后,它会被移出文档流,然后向左或向右平移,一直平移直到碰到了所处容器的边框,或者碰到另外一个浮动的元素。如果父级容器的宽度无法容纳多个浮动元素时,则靠右的浮动元素会移动到与它相临的上一个浮动元素的下面 例: 123456789101112131415161718192021222324252627282930313233<style> .box1{ width: 100px; height: 100px; background-color: red; float: left; } ...