前端 day 05 5.15 JavaScript入门

5.15

昨日回顾

• 清除浮动带来的影响

  浮动的元素会造成父标签塌陷，写一个div，盒子带有clear属性，提前写好这个class，只要有塌陷就使用

  .clearfix:after {
  	content:'';
  	display: block;
  	clear: both;
  }
  

• 溢出属性

  overflow:hidden;
  overflow:scroll;
  

  案例：圆形头像

• 定位

  静态，相对定位，绝对定位，固定位置

  static，relative，absolute，fixed

  如果将标签的position由static改为relative，那么标签就会由没有定位过的标签变成定位过的标签

  绝对定位：相对已经定位过的父标签，如果没有则以body作为参照

  固定：相对于浏览器窗口

• 验证是否脱离文档流

  脱离：浮动，固定，绝对

  不脱离：相对

• z-index，越大，离人的距离越近

  案例：百度登陆页面，三层结构

• 模态框

• 透明度：opacity，可以改变颜色和字体

• 动手写简易博客

  1. div划定区域
  2. html占位
  3. 最后调节样式
  	再给标签起id或class属性的时候，应该做到见名知意
  4. 写CSS
  5. 先用注释表明用途，以及作用区域
  6. 通用样式
  	body,html {margin:0;}
  	a {text-decoration: none;}
  	ul {list-style-type: none; padding-left: 0;}
  

• js简介

  一门编程语言，但是内部逻辑有bug，不严谨

• JavaScript

  //注释
  /*注释*/
  /*书写方式：script标签引入js外部文件*/
  /*js用分号作为语句的结束，但是不写也问题不大*/
  

• js变量

  声明变量必须用关键字

  var全局，let局部

  实际上不用这个关键字也能用

• 常量

  const pi = 3.14
  /*不能修改*/
  

今日内容

• 数值类型
• 字符类型
• 布尔值
• null，undefined
• 对象：数组，自定义对象，内置对象
• 流程控制：if，while
• 函数
• 内置对象：时间对象，正则对象
• json对象
• bom操作，操作浏览器实现动态效果等

变量

• js变量的命名规范

  1. 变量名只能是数字，字母，下划线，$
  2. 推荐使用驼峰体
  3. 不能使用关键字
  

数据类型

js/python是一门动态类型语言

name = 'deimos'
name = 123
name = [1,2,3]
/*name可以指定任何的数据类型*/

数字类型

查看当前数据类型

typeof a;
var a = 11;
//"number"

NaN，表示不是一个数字（Not a Number）。

字符类型 string

可与用单引号，双引号定义字符串，不支持三引号

var a = 'aaa';
typeof a //"string"
//横板字符串
var b = `
aaa
bbb
ccc
`
//可以定义多行字符串，除此之外，还可以实现字符串的格式化
var name = 'deimos'
var age = 21
var sss = `
my name is ${name} my age is ${age}
`
//有$ 自动往前面找这个变量名，有就会把这个变量名塞进去，如果没有这个变量名就会报错

字符串的拼接

python中不推荐使用+ 加号拼接，js里推荐直接使用加号拼接字符串

字符串方法

切片，使用slice，不用substring

布尔值

python中布尔值是首字母大写的，True，False，js中布尔值是全小写的：true，false

js中的布尔值：0，null，undefined，NaN，空字符串

null：空
undefined：声明一个变量，但是没有做初始化操作，函数没有返回值的时候

对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组

类似列表 []，可以存多个数据，不同的数据类型，但是不支持负数

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

三个比较重要的方法

foreach，slice，map

//forEach
var l1 = [111,22,33,444]
l1.forEach(function(value,index){console.log(value,index)},l1)
111 1
22 2
33 3
...
//相当于for循环后面的对象，依次交给前面的函数处理
//function中参数的用途是forEach固定的
//元素，索引，数据来源
//最多三个参数，如果l1里的是数组，会显示成Array

//slice

//map
var l1 = [11,22,33,44,55]
l1.map(function(value,index){return index*value},l1)

运算符

//算术运算符
var x = 10;
var res = x++; //加号在后面，先做赋值，后自增
var res2 = ++x; //加号写在后面，先自增后赋值
res1 10 //x自增1
res2 12

//比较运算符
1 == '1' true
//js中，两个等号会自动转换成相同的类型比较，若等于
1 === '1' false
//连同类型一起比较，不做转换，强等于

//逻辑运算符
&& || ! //and or not
5 && '5' //'5'
0 || 1 // 1
!5 && '5' //false
//比较的时候返回布尔值，；逻辑运算的时候返回两边的元素

流程控制

if switch for while

//if判断
var age = 20；
if (age<18){
	console.log('come')
}else if(age<16){
	console.log('no')
}else{
	console.log('go')
}
//js中是没有缩进的，完全可以写在一行
//(条件){代码块}

//switch语法
switch(num){
    case 0:
        console.log('吃饭');
        break;
    case 1:
        console.log('睡觉');
        break;
    case 2:
        console.log('按摩');
        break;
    default:
        console.log('匹配不上默认走的');
        break;
}
//case里要加break，如果不加，匹配到一个之后就会一直往下执行，下面的代码没有触发也会执行

//for循环
for(let i=0;i<10;i++){
    console.log(i)
}
//for(起始条件，循环条件，每次循环后的操作){循环体}
//例1：循环打印数组的每一个元素
var l1 = [11,22,33,44,55,66];
for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}

//while循环
var i = 0
while(i<100){
    console.log(i)
    i++;
}

//三元运算符
var res =  x>y ? x : y
/*条件成立，取冒号前面的值，不成立，取冒号后面的值；可以嵌套*/
//嵌套的时候从最里面一层开始算

函数

python中定义函数用def，js中定义函数要用 function

function 函数名(形参1,形参2){
	函数体代码;
}

//无参函数
function func1(){
    console.log('hello')
}
//有参函数
function func2(a,b){
    console.log(a,b)
    console.log(arguments)
}
func2(11,22);
//在调用的时候，多传，少传都不会报错，少的会用undefined顶着
//arguments可以拿到函数拿到的所有参数

函数的返回值

//返回值使用的关键字也是return
function index(){
	return 666
}
//只能返回一个，如果要返回多个，可以返回一个数组
//js里面没有解压赋值

//匿名函数，不用写函数名，一次性使用
function(){
	return 666
}

箭头函数

类似于python中的匿名函数，处理简单的业务逻辑

var func1 = v =>v;
//等价于
var func1 = function(v){
	return v
}

var func2 = (arg1,arg2) => arg1+arg2
//等价于
var func2 = function(arg1,arg2){
	return arg1+arg2
}

函数的全局变量与局部变量

跟python查找的顺序一致

JavaScript也有闭包函数

自定义对象

可以看成python中的字典，但是js中的自定义对象比python中的字典操作更加方便

创建自定义对象，两种

//第一种，直接写一个字典
var d = {'name':'aaa','age':21}
//取值
d['name']
d.name
//for循环取值，拿到的是字典的键

//第二种，使用关键字new
var d2 = new Object()
d2.name = 'aaa';
d2.age = 21;

date对象

let d3 = new Date()
//得到当前的时间，也支持自己写一个时间进去
//let d3 = new Date(1111,11,11,11,11,11)，不过月份是从0开始的
d3.toLocaleString()
//获得一个更好看的日期格式

//时间对象具体方法
let d4 = new Date()
d4.getDate()
d4.getDay()
d4.getMonth()
...

JSON对象

在python中，序列化与反序列化用的是dumps和loads

js中也有序列化和反序列化

json1 = JSON.stringify(d) // dumps:编码
let res1 = JSON.parse(json1) //loads:解码

正则对象

RegExp对象，两种方式可以创建正则对象

//第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
//必须是字母开头，中间是5-11位的字母或数字

//第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

//匹配内容
reg1.test('aaaaaqqqqq') //看是否符合，执行的结果是true/false
reg1.match('aaaaaqqqqq') //拿到匹配的结果

js的正则有很多bug，有些时候会获取不到我们想不到的结果

如果什么都不传，默认传过去的是undefined

Math对象

总结

• js数据类型：自己敲一遍
• JSON对象
• js如何操作页面，给页面有动态效果