overflow溢出属性

overflow （水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向

    <title>溢出</title>
  <style>
    div{
      text-indent: 32px;
      border: 5px solid red;
      height: 400px;
      width: 400px;
      /*overflow: hidden;*/
      /*overflow: scroll;*/
      overflow: auto;
      /*  overflow: inherit;*/
    }
  </style>

定位(positin)

static

　　默认值、无定位，能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物

absolute（绝对定位）

　　就是相对于它的父标签进行定位，如果没有父标签，就相对于body标签

fixed（固定）

　　就是相对于浏览器窗口定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: #ff6700;
            float: right;
            margin-right: 400px;
            position: relative;

        }
        .c3 {
            height: 200px;
            width: 200px;
            background-color: green;
            position: absolute;
            top: 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3"></div>
</div>

</body>
</html>

fixed案列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

JavaScript

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

● 核心（ECMAScript） ------------>基础语法---------->必须要会的
● 文档对象模型（DOM） Document object model (整合js，css，html)----------->重要
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）------------>不重要

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript引入方式

1. 书写位置
　　js文件
　　浏览器控制台
　　 script标签
2. 注释（注释是代码之母:快捷键：ctrl + ?(单行), 多行的(ctrl+shift+?)）
　　单行注释 //
　　多行注释
　　// 这是单行注释

　　/*
　　这是
　　多行注释
　　*/
3. 结束符
　　JavaScript中的语句要以分号（;）为结束符。
4. 变量声明
　　es5:
　　　　var name = 'kevin';
　　es6:
　　　　let name='kevin'
5. 变量的命名
　　基本上遵循python的变量命名规则即可
　　下划线、驼峰体、大驼峰、小驼峰
6. 常量
　　python没有真正意义上的常量，全大写就是常量
　　js中有真正意义上的常量
　　如何定义常量
　　　　const pi = 3.14
7. 保留字

JavaScript数据类型:（js也是一门面向对象语言，一切皆对象）

a = 1
a = 'kevin'

// 如何查看数据类型：typeof 
var a = 1;
var b = 1.11;
console.log(typeof a);
console.log(typeof b);
        
        
1. 数值(Number)
var a = 1;
var b = 1.11;
2. 数据类型的转换
    var a = '123';
    还有一种NaN，表示不是一个数字（Not a Number）
3. 字符串(String)
    var s = 'hello';
      var ss = "hello";
      // var  sss = '''aaaa'''
      console.log(s + ss);
4. 常用方法：
    .length    返回长度
    .trim()    移除空白
    .trimLeft()    移除左边的空白
    .trimRight()    移除右边的空白
    .charAt(n)    返回第n个字符
    .indexOf(substring, start)    子序列位置
    .substring(from, to)    根据索引获取子序列
    .slice(start, end)    切片
    .toLowerCase()    小写
    .toUpperCase()    大写
    .split(delimiter, limit)    分割
5. ES6中引入了模板字符串（重要）
    var name = 'kevin';
    var age = 18;
    var s = `my name is ${name}, my age is ${age}`;
    console.log(s);

6. 布尔值(Boolean)
    true、false # True False
    # js中有哪些是假？
    ""(空字符串)、0、null、undefined、NaN都是false。
7. null和undefined
● null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
● undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

8. 数组------>列表
常用方法：
    方法                    说明
.length                    数组的大小
.push(ele)                尾部追加元素
.pop()                    获取尾部的元素
.unshift(ele)            头部插入元素
.shift()                头部移除元素
.slice(start, end)        切片
.reverse()                反转
.join(seq)                将数组元素连接成字符串
.concat(val, ...)        连接数组
.sort()    排序
.forEach()                将数组的每个元素传递给回调函数
.splice()                删除元素，并向数组添加新元素。
.map()                    返回一个数组元素调用函数处理后的值的新数组

运算符

比较运算符
> >= < <= != == === !==
==
# ===(强等于，即比较数值，又比较类型) !==
逻辑运算符
&&(and) ||(or) !(not)

赋值运算符
= += -= *= /=

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

自定义函数

跟Python中类相似，定义方式不同

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

补充：

ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

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

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

map

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

date对象

创建date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

date对象的方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

练习

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);