JS

1、①引入额外的JS文件

<script src="myscript.js"></script>

②直接在html的 head文件里写：

<script>
   alert(123);
</script>

2、JavaScript中的语句要以分号（;）为结束符。
3、 单行注释   //
       多行注释 /* */

一、JS语法基础:

语句结束之后要写分号;  *****

变量声明:
     1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
     2. 声明变量使用 var 变量名; 的格式来进行声明
注意：
     变量名是区分大小写的。
     推荐使用驼峰命名

二、JS数据类型:

1、数字类型(number)
2、字符串类型
字符串拼接 推荐使用 ‘+’
     字符串自带的那些属性和方法：

var a = 'SuNv is OK!'
a.length ：返回长度
a.trim() : 移除空白
a.trimLeft() :移除左边的空白 / a.trimRight() :移除右边的空白
a.charAt(n) : 返回第n个字符
a.concat(b) : 拼接
a.indexOf( 'is',start) : 子序列的位置 ，start 是从哪个位置开始找，返回的还是原序列的位置，如果找不到返回 -1。
a.substring(from,to) : 根据索引获取子序列
a.slice(start,end) : 切片
a.toLowerCase() : 返回小写 / a.toUpperCase() : 返回大写
a.split(' ' , 5) : 分割(分后是数组) 按什么分，分后显示前5个

字符串转数字
parseInt(‘123’) // 返回123
parseInt(“ABC”) // 返回NaN,是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat(“123.456”) // 返回123.456
3、布尔类型
区别于Python，true和false都是小写。
     var a = true;
     var b = false;
4、数组
数组的内置属性和方法:

var  b = [ 10,12,33,'213','hello']
b.length  : 数组的长度
b.push('world') :  数组尾部追加元素         返回值为  数组长度
b.pop()  :  弹出数组尾部元素                    返回  尾部元素
b.unshift('heh')  :  数组头部插入元素     返回值  数组长度
b.shift() : 头部移除元素                            返回值为  头部元素
b.slice() : 切片(前包后不包)  不支持三个参数（步长）
b.reverse()  :  反转
b.join('+')  :  将数组元素  用 ‘+’ 连接成字符串
b.concat(s)  ： 连接数组   (数组 [ ] 或 之前定义的数组 )
字符串也行，但是红色   ！！了解！因为 字符串就是红色。
b.sort()  :   排序(坑，应该是所有都按字符串 排序)
      数组的遍历：

var a = [10,20,30];
for(var i = 0;i<a.length;i++){
console.log( i , a[i] )
}

var i = 0;
i++；++i

5、 对象(简单的对象)(没太懂)(类似python 中的字典)
对象的遍历
——————

对象
类似于Python中的字段数据类型
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]);
}

---

6、类型查询：

typeof('abc')    // string
typeof null      // "object"
typeof true     // "boolean"
typeof 123     // "number"
typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句

7、null和undefined
null –> 表示值为空
undefined –> 表示变量声明了但是没有赋值/函数没有定义返回值默认返回undefined

三、运算符：

算数运算符
+   -  *   /   %   ++    --

比较运算符
    >   >=   <   <=    !=    ==    ===    !==
注意：
1 == “1”     // true
1 === "1"  // false

逻辑运算符
&&   ||   ! 

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

三元运算
        条件 ? 值1: 值2  --> 条件是true是值1，false的话就是值2
    Python里面的三元运算：
        值1 if 条件 else 值2

四、条件判断和循环

1、
        if... else ...
        if... else if...else
2、  
     switch
         case 值1: 要做的事儿;break;
         case 值2: 要做的事儿;break;
         default: 条件都不满足默认执行的
3、          
        for 循环
        ①for (var i=0;条件;i++){
            循环要做的事儿;
            }
        ②for (var i in obj) {
                console.log(i);
            }
4、      
        while循环
            while (条件){
                  循环要做的事儿;
            }

五函数��

1、函数的定义
①function 函数名(参数1, 参数2){
函数体;
return 返回值;
}
②匿名函数
python中是 lambda –> lambda 参数: 返回值
JS中
③自执行函数
(function(形参){
  函数体
})(实参);
④ 闭包
类似于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;
}      //return 的只有一个值，逗号隔开不可以。推荐加号链接
sum(1, 2);  // 调用函数

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

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

2、Date对象
1. month是0~11
2. day是星期,0~6
3. 获取年份用.getFullYear

练习：
编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出。

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

var d  = new Date();
// console.log(d);     //测试。
function f8(){
    var y = d.getFullYear();     //   注意：是   .getFullYear()
    var m = d.getMonth();
    var da =d.getDate();
    var h = d.getHours();
    var mi = d.getMinutes();
    var day = d.getDay();

    var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

    if(m){   m = m+1 }

    if (mi < 10){mi = '0'+10}; // 如果是 11:01 就会显示11:1 so需要加'0'

    console.log(y+'-'+m+'-'+da+'  '+h+':'+mi+'  '+week[day]);
}
f8();

作用域3例子

var city1 = 'beijing';
function f4(){
    var city = 'hanghai';
    function inner(){
        var city = 'shenzhen';
        console.log(city);
    }
    inner();
}
f4();  //shenzhen


var city2 = 'beijing';
function f5(){
    console.log(city2);
}
function f51(){
    var city2 = 'shanghai';
    return f5;
}
var f = f51();
f();    //beijing


var city3 = 'beijing';
function f6(){
    var city3 = 'shanghai';
    function inner(){
        console.log(city3);
    }
    return inner;
}
var f = f6();
f();   //shanghai

3. JSON序列化 ��
python中：

1. import json
2. 序列化(把对象转换成字符串) --> json.dumps(obj)
3. 反序列化（把字符串转换回对象） --> json.loads(str)

JS中：

1. 序列化(把对象转换成字符串) --> JSON.stringify(obj)
2. 反序列化（把字符串转换回对象） --> json.parse(str)


序列化：
var o = {'silisili':1213};
var s = JSON.stringify(o);
console.log(o,s);//{silisili: 1213} {"silisili":1213}"
console.log(typeof(o),typeof(s));//object string

反序列化：
var p = JSON.parse(s);
console.log(p,typeof(p));
//{silisili: 1213}  "object"     //引号啥意思。*没啥意思

                            4. 正则表达式

1. Python里面：
    1. import re
    2. p1 = re.compile("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
    3. p1.match()
    4. p1.search()
    5. p1.findall()
    匹配模式：
    忽略大小写 re.I
    贪婪模式 （课下自己在回头复习一下）

2. JS
两种方式：
    1. RegExp对象方式
      ①. var p = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g")
      ②. 2. p.test(str)
    2. 简写方式
        正则表达式/匹配模式
!!! RegExp（正则） 求学要严谨

    1. 正则表达式不能加空格
    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值
    3. undefined他帮你转成"undefined"来做正则校验

RegExp对象

//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式
// 参数2 验证模式：g(global)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

reg2.test(s1);  // true



// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

RegExp

5、Math对象
Python里面：
  直接使用max\min
JS里面：
  通过Math对象来做数学相关操作的
     Math.min()
     Math.max()
     Math.floor()

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

Math

---

一、BOM

window

location.href = "https://www.sogo.com"
location.reload()  // 重新加载当前页
location.href

二、DOM

document

1、文档结构

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

2、寻找节点

CSS选择器
    基本选择器
    标签选择器  --> 标签名
    id选择器    --> #id值
    class选择器 --> .class名
    * 选择器    --> *

JS找标签
  ①基本查找
    标签名查找：document.getElementsByTagName
    ID查找：    document.getElementByID
    class名查找: document.getElementsByClassName
    属性查找：document.getElementsByName(不常用)
  ②间接查找
    根据标签的层级关系去找
        1. parentElement 父节点标签元素
        2. children  所有子标签
        3. firstElementChild  第一个子标签元素
        4. lastElementChild  最后一个子标签元素
        5. nextElementSibling  下一个兄弟标签元素
        6. previousElementSibling  上一个兄弟标签元素

3、创建标签

1. doucument.creatElement("div")  --> 要创建什么标签括号里面就写什么
2. 设置标签内容
    1. eleObj.innerHTML = "<p>P标签</p>"
    2. eleObj.innerText = "标签中间的文本"

3. 标签属性
    1. input标签相关
        1. inputEle.value  --> 获取input框的输入值
        2. inputEle.value = "请输入xxx" --> 设置input框的值
    2. checkbox标签相关
        1. checkboxEle.checked --> 返回true或false
        2. checkboxEle.checked = true  --> 选中该checkbox
    3. select标签相关
        1. selectObj.options  --> 获取所有的option选项 （数组）
        2. selecObj.selectedIndex  --> 获取选中的option的索引值
        3. selecObj.options.length=0 --> 快速清空option             

4、修改标签属性或样式

1. 修改文本信息
    ele.innerText    获取文本节点的内容（包括子标签的文本）
    ele.innerText="字符串"      修改标签的文本信息
2. 文档内容（HTML内容）
    ele.innerHTML          获取文档内容
    ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
3. 修改样式
    1. classList
    ele.className    获取所有的class类名（字符串类型）
    ele.classList     获取所有的class类名
    ele.classList.contains(cls) 判断有没有某个class        
    ele.classList.add(cls)      添加一个class类名
    ele.classList.remove(cls)   删除class类名
    ele.classList.toggle(cls)   切换（有就删除，没有就添加）
2. ele.style.样式=""
    注意：有中横线的CSS样式要转成驼峰形式        
    ele.style.backgroundColor="red"
4. 属性
    ele.attributes  获取所有的属性信息

i、事件

常用事件：

onclick()
ondbclick()
onfocus()
onblur()
onchange()事件 --> select联动的例子 
    1. selectEle.selectedIndex       --> 获取当前选中的option的索引值
    2. selectEle.options             --> 获取所有的option选项     
    3. selectEle.options.length=0    --> 清空所有的option选项

键盘事件 –> jQuery讲个示例

绑定事件的方式： *

1. 在标签里面直接写on动作=func();
    比如：<div onclick=('f()')>点我</div>
2. 通过JS代码绑定事件 ele.onclick=function(){alert(123);}
3. 基于已经存在的父标签来给子标签绑定事件，  --> 事件委托的方式
<ul>li*100</ul>
ulEle.onclick= function(){
    event.target     --> 点击的那个对象
    alert(event.target.innerText)
}

ii、文档标签的创建

    引申出来的：
script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 *****

iii.补充经验：
    1. 项目不要一开始就规划十分完美，要从最基本的功能开始写起，然后逐渐丰富
    2. 与同事沟通以正式邮件为主
    3. 项目时间要给自己留有富余
    4. CDN是什么？

---

人质 – 伦桑