day47 JavaScript入门

今日内容详细

overflow溢出属性

visible     默认值。内容不会被修剪，会呈现在元素框之外。
hidden      内容会被修剪，并且其余内容是不可见的。
scroll      内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
​
● overflow（水平和垂直均设置）
● overflow-x（设置水平方向）
● overflow-y（设置垂直方向）

定位

静态定位：默认情况下，所有的标签都是静止的，不能够移动 static
​
相对定位：相对自己原来的位置进行移动(relative)
​
绝对定位：相对于是父标签移动的，如果没有父元素，那就按照body移动(absolute)
​
固定定位: 相对于浏览器窗口定位(fixed)

前端基础之JavaScript

实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
​
● 核心（ECMAScript） 
● 文档对象模型（DOM） Document object model (整合js，css，html)
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

JavaScript引入方式

1. Script标签内写代码
2. 
​
# 注释
// 这是单行注释
/*
这是
多行注释
*/
​
# 变量
1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2. 声明变量使用 var 变量名; 的格式来进行声明
a=1
var a=1; # es5的语法
let a=1; # es6的语法
​
# 常量
const PI=3.14

JavaScript数据类型

JavaScript拥有动态类型
x=1
x='a'
print(x)
​
# 常用方法：
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456
​
# 字符串(String)
常用方法：
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight()    移除右边的空白
.charAt(n)  返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start)  子序列位置
.substring(from, to)    根据索引获取子序列
.slice(start, end)  切片
.toLowerCase()  小写
.toUpperCase()  大写
.split(delimiter, limit)    分割
​
​
// ES6中引入了模板字符串
 var name = 'kevin';
var age = 20;
// var res = 'my name is %s, my age is %s';
var res = `my name is ${name}, my age is ${age}`;
console.log(res);
​
// 在js中，什么是真、什么是假
a=true
b=false
只需要记住什么是假，其余的都是真
""(空字符串)、0、null、undefined、NaN都是false。
​
var a=1;
var a; undefined
​
​
// 数组的常用方法
.length 数组的大小
.push(ele)  尾部追加元素
.pop()  获取尾部的元素
.unshift(ele)   头部插入元素
.shift()    头部移除元素
.slice(start, end)  切片
.reverse()  反转
.join(seq)  将数组元素连接成字符串
.concat(val, ...)   连接数组
.sort() 排序
.forEach()  将数组的每个元素传递给回调函数
.splice()   删除元素，并向数组添加新元素。
.map()  返回一个数组元素调用函数处理后的值的新数组
​
// 运算符
var x=10;
var res1=x++;
var res2=++x;
​
res1;
10
res2;
12
​
这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
// 比较运算符
​
比较运算符:> >= < <= != == === !==
逻辑运算符:&& || !    
赋值运算符：= += -= *= /=
// 流程控制

函数

你们自己跟着文档自己简单做一下笔记

对象

在JavaScript中，对象是拥有属性和方法的数据。

JSON对象

json.dumps  ------------------->JSON.stringify()
json.loads--------------------->JSON.parse()
var obj1 = 
​
1. 先序列化
var res=JSON.stringify(obj1) # '{"name": "Alex", "age": 18};'
​
python:
    json.loads(res) # {"name": "Alex", "age": 18};
    
2. 反序列化
var str1 = '{"name": "Alex", "age": 18}'; # json.dumps
js反序列化:
    JSON.parse(str1)     # {"name": "Alex", "age": 18}