day9

day9

before和after伪元素(详解)

伪元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样

注意:

​ 一定要有content,否则伪元素不起作用

过渡(CSS3)

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化,还是用逗号隔开。
属性描述
transition简写属性,用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。
transition-delay规定过渡效果何时开始。默认是 0。

2D变形(CSS3) transform

可以实现元素的位移、旋转、倾斜、缩放,配合过渡和即将学习的动画知识

移动 translate(x, y)

translate 移动平移的意思

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置,x、y可为负值;

 translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
 translateX(x)仅水平方向移动(X轴移动)
 translateY(Y)仅垂直方向移动(Y轴移动)

缩放 scale(x, y)

可以对元素进行旋转,正值为顺时针,负值为逆时针;

transform:rotate(45deg);

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ; 

如果是4个角,用left,top,这些值,如果想要精确的位置,就用像素值

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

roateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

  • 透视原理: 近大远小 。
  • 浏览器透视:把近大远小的所有图像,透视在屏幕上。
  • perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置

注:并非任何情况下需要透视效果,根据开发需要进行设置。

perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素

translateX(x)

仅水平方向移动**(X轴移动)

translateY(y)

仅垂直方向移动(Y轴移动)

translateZ(z)

前后移动,直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

动画(CSS3) animation

语法格式:

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

day10

JavaScript是什么

html CSS

行为标准

JavaScript是一种运行在***客户端*** 的***脚本语言***
JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript最初的目的

为了表单的验证操作

JavaScript现在的意义(应用场景)

  1. 网页特效
  2. 服务端开发(Node.js)
  3. 命令行工具(Node.js)
  4. 控制硬件-物联网(Ruff)
  5. 游戏开发(cocos2d-js)
  6. 手机App(Cordova)
  7. 桌面应用程序(Electorn)

JavaScript和HTML、CSS的区别

1.html:提供网页结构。提供网页的内容

2.css:美化界面

3.js: 控制网页内容,给网页增加动态效果

JavaScript的组成

1.ECMAscript

2.DOM

3.BOM

ECMAScript - JavaScript的核心 (语法)

ECMA 欧洲计算机制造联合会

网景:javascript

微软:JScript

定义了JavaScript的语法规范

JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准,与具体实现无关

html不算变成,js算,因为逻辑结构

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

JavaScript初步学习

CSS:行内样式、嵌入样式、外部样式

JavaScript的书写位置

  • 写在行内
<input type="button" value="按钮" onclick="alert('Hello World')" />
  • 写在script标签中
<head>
  <script>
    alert('Hello World!');
  </script>
</head>
  • 写在外部js文件中,在页面引入
<script src="main.js"></script>
  • 注意点

    引用外部js文件的script标签中不可以写JavaScript代码

变量

如何使用变量

  • var声明变量
var age;
  • 变量的赋值
var age;
age = 18;
  • 同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
  • 同时声明多个变量并赋值
var age = 10, name = 'zs';

变量在内存中的存储

var age = 18;

变量的命名规则和规范

  • 规则-必须遵守的,不遵守会报错

    • 由字母,数字,下划线,$符号组成,不能以数字开头
    • 不能是关键字 和保留字
    • 区分大小写
  • 规范:不遵守不报错

    • 变量名一定要有意义
    • 驼峰命名法,userName,首字母小写,后面单词的首字母大写
  • 下面哪些变量名不合法

    a	        对
    1           错
    age18       对
    18age       错
    name        对
    $name       对
    _sex        对
    &sex        错
    theworld    错
    theWorld    对
    

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类
  • 数值字面量:数值的固定值的表示法

    110 1024 60.5

  • 进制

    十进制默认
    十六进制
    	var num = 0xA;
    八进制
    	07 
    	012
    	2*1 + 1*8
    	112
    	2*1 + 1*10 + 1*10*10
    注意,字面值超过范围,前导值会被忽略,后面的值会当作十进制解析
    
  • 浮点数

    • 浮点数的精度问题

      最高精度时17位小数
      不要判断两个浮点数是否相等
      
  • 数值范围

最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity
  • 数值判断

    NaN not a number ,不是数字的number型

    ​ NaN与任何都不相等

String类型

‘abc’ “abc”

  • 字符串字面量

    ‘今天天气真好’

  • 转义符

  • 字符串长度

    length属性用来获取字符串的长度

  • 字符串拼接

    字符串拼接使用 + 连接

    1.两边只要有一个=是字符串,+就实现拼接功能

    2.都是数字,就是算数功能

Boolean类型
  • Boolean字面量: true和false,区分大小写
  • 计算机内部存储:true为1,false为0
Undefined和Null
  1. undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined
  2. null表示一个空,变量的值如果想为null,必须手动设置

获取变量的类型

typeof

注释

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'him';

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

数据类型转换

转换成字符串类型

  • toString()

  • String()

    存在的意义是,有的属性没有toString方法,这个使用String()

  • 拼接字符串方式

    num + “”,当 + 两边一个操作符是字符串类型,一个操作符是其它类型的时候,会先把其它类型转换成字符串再进行字符串拼接,返回字符串

转换成数值类型

  • Number()

  • parseInt()

  • parseFloat()

  • +,-0等运算

转换成布尔类型

  • Boolean()

操作符

运算符 operator

5 + 6

表达式 组成 操作数和操作符,会有一个结果

算术运算符

+ - * / %  

一元运算符

一元运算符:只有一个操作数的运算符

  • 前置++

    var num1 = 5;
    ++ num1; 
    
    var num2 = 6;
    console.log(num1 + ++ num2);
    
  • 后置++

    var num1 = 5;
    num1 ++;    
    var num2 = 6 
    console.log(num1 + num2 ++);
    
  • 猜猜看

    var a = 1; var b = ++a + ++a; console.log(b);    
    	b = 2 + 3= 5
    var a = 1; var b = a++ + ++a; console.log(b);   
    	b = 1 + 3 = 4
    var a = 1; var b = a++ + a++; console.log(b);
      b = 1 + 2 =3
    var a = 1; var b = ++a + a++; console.log(b); 
        b = 2 +2 =4
    

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true,结果为true,否则都是false
|| 或 两个操作数有一个为true,结果为true,否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==
=====的区别:==只进行值的比较,===类型和值同时相等,则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等,类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如:
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到低
	1.()
	2.一元运算符 ++ -- !
	3.算数运算符  先* /  %后 + -
	4.关系运算符 > < >=...
	5.相等运算符    ==  !== === !=
	6.逻辑运算符     先&&   再||
	7.赋值运算符
// 练习1:
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
			true
// 练习2:
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
       true                     true  

表达式和语句

表达式

一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

语句

语句可以理解为一个行为,循环语句和判断语句就是典型的语句。一个程序有很多个语句组成,一般情况下;分割一个一个的语句

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况,执行对应代码

循环结构

循环结构:重复做一件事情

分支结构

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined
// 结果是什么?
var a = !!'123';

循环结构

在javascript中,循环语句有三种,while、do…while、for循环。

while语句

基本语法:

// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
  //循环体
}

do…while语句

do…while循环和while循环非常像,二者经常可以相互替代,但是do…while的特点是不管条件成不成立,都会执行一次。

基础语法:

do {
  // 循环体;
} while (循环条件);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值