day01

A.今天学什么？

1.javascript了解

• 1.1javascript输出方式

  • console.log(); --- console控制台输出
  • alert(); --- alert弹窗输出

// script
// 1.输出方式
// console 输出
// console.log("hello world");

// 弹窗输出
alert("hello world");

• 1.2变量的声明

  • javascript是弱类型语言，声明变量时，不需要声明它的类型
    • 1.2.1先声明再赋值
    • 1.2.2声明的同时赋值

// script
// 2.变量的声明
// javascript是弱类型语言，声明变量时，不需要声明它的类型
var a = 10;

// 2.1先声明再赋值
var b;
b = 10;

// 2.2声明的同时赋值
var c = 10;

• 1.3JavaScript的声明提前

  • js在运行的时候将所有声明的变量，集中到作用域的顶部创建，赋值留在原地;ES6不支持声明提前

// script
// 3.声明提前
// js在运行的时候将所有声明的变量，集中到作用域的顶部创建，赋值留在原地
// ES6不支持声明提前
console.log(d);
var d = 10;

/*console.log(d1); ES6 会报错
let d1 = 10;*/

// 3.1js中如果一个变量只声明没有赋值，那么输出undefined
var e;
console.log(e);

• 1.4基本类型

  • number
  • String
  • boolean
  • undefined
  • 等等
  • 如何判断变量的类型 -- typeof

// script
// 4.基本类型
// 4.1number
var num = 10;
var num2 = 10.2;

// 4.2如何判断一个变量的类型 typeof
console.log(typeof num);

// 4.3 String
var str = "hello world";
console.log(typeof str);

// 4.4 boolean
var boolean = true;
console.log(typeof boolean);

// 4.5 undefined
var un;
console.log(typeof un);

• 1.5数组

  • 数组的声明 -- var list = [1,2,3];
  • 读取数组的值 -- 通过下标，从0开始
  • 获取数组长度 length
  • 像数组尾部添加一个值 list[list.length] = xx;

// script
// 5.数组
// 5.1声明一个数组
var list = [1,2,3];
// 5.2读取数组的值--通过下标，从0开始和java一样
console.log(list[1]);
// 5.3获取数组长度 -- length
console.log(list.length);
// 5.4向数组的尾部添加一个值
list[list.length] = 4;
console.log(list);
console.log(list.length);

• 1.6对象

  • 创建对象 var obj = { 属性:属性值 }
  • 获取对象属性 obj.属性名
  • 给对象添加属性 obj.新属性名 = 属性值

// script
// 6.对象
// 6.1创建对象
var obj = {
    name:"依然",
    age:21
};

// 6.2读取对象属性，语法：obj.属性名
console.log(obj.name);

// 6.3给对象添加属性
obj.sex = "男";
console.log(obj.sex);

• 1.7函数

  • 创建函数 function 函数名(参数){函数体}
  • 调用函数 函数名()
  • 有返回值的函数 直接在函数体中return

// script
// 7.函数
// function 函数名(){}
// 7.1没有返回值的函数
function funcName1() {
    console.log("没有返回值的函数")
}

// 7.2调用函数
funcName1();

// 7.2有返回值的函数
function funcName2() {
    return 10000;
}

var salary = funcName2();
console.log(salary);

• 1.8全局变量和局部变量

  • 全局变量--在函数外声明的变量
  • 局部变量--在函数内声明的变量
  • 函数外无法访问到函数内声明的变量

// script
// 8.全局变量和局部变量
// 全局变量-在函数外声明的变量
var var1 = 10;
function fn() {
    // 局部变量-在函数内声明的变量
    var var2 = 20;
}
// console.log(var2); 报错

• 1.9数据类型的转换

  • 1.9.1number的强制转换
    • String boolean --> 数字：Number()
    • true-->1，false-->0
    • NaN不是一个数字
    • Number()这个方法只能识别纯数字的字符串
  • 1.9.2自动转换
    • 算术计算中的自动转换，+ - * / %等
    • 在算数计算中，js会将参与计算的值先转换为number再进行计算
    • 底层：var jc = Number(ja) - Number(jb);
    • 特殊情况：在 + 运算中，倘若有一边为字符串，则结果为字符串拼接

// script

// 9.数据类型的转换
// 9.1 number的强制转换
// String boolean --> 数字：Number()
// true-->1，false-->0
// NaN不是一个数字
// Number()这个方法只能识别纯数字的字符串
var str1 = "10";
var boolean1 = true;
console.log(typeof Number(str1));
console.log(Number(boolean1));
console.log(Number(false));
console.log(Number("a")); // NaN

// 9.2自动转换
// 算术计算中的自动转换，+ - * / %等
// 在算数计算中，js会将参与计算的值先转换为number再进行计算
var ja = "10";
var jb = true;
var jc= ja-jb; // ja被自动转换为10 true被自动转换为1
// 底层 var jc = Number(ja) - Number(jb);
console.log(jc);

// 特殊：在 + 运算中，倘若有一边为字符串，则结果为字符串拼接
console.log(ja+jb); // "10true"

• 1.10比较运算的自动转换

  • 默认先将所有的类型转为数字类型，再进行比较
  • 比较运算的结果返回boolean

// script
// 10.比较运算的自动转换
// 默认先将所有的类型转为数字类型，再进行比较
// 比较运算的结果返回boolean
console.log("10">true); // true
// 底层 Number("10") > Number(true)

• 1.11字符串转number型-parseInt、parsFloat

  • 只能转数字开头的字符串
  • parseInt -- 将字符串转为整数，小数点后省略，而不会约等
  • parseFloat -- 将字符串转为浮点型

// script
// 11.字符串转number型-parseInt、parsFloat
// 只能转数字开头的字符串
// parseInt -- 将字符串转为整数，小数点后省略，而不会约等
console.log(parseInt("12px")); // 12
console.log(parseInt("12.53px")); // 12
console.log(parseInt("p33")); // NaN

// parseFloat -- 将字符串转为浮点型
console.log(parseFloat("12px")); // 12
console.log(parseFloat("12.53px")); // 12.53
console.log(parseFloat("p33")); // NaN

• 1.12将任意类型转为字符串类型

  • 方法一：.toString()
  • 方法二：String()

// script
// 12.将任意类型转为字符串类型
// 方法一：.toString()
var toStr = 10;
console.log(toStr.toString());
console.log(typeof toStr.toString());

// 方法二：String()
console.log(typeof String(toStr));

• 1.13将任意类型转为boolean型

  • 语法：Boolean()
  • 在js中只有五种值为false，其他都为true
    • "",NaN,0,undefined,null

// script
// 13.将任意类型转为boolean型
// 语法：Boolean()
// 在js中只有五种值为false，其他都为true： "",NaN,0,undefined,null
var toBlist = [1,2,3];
var toBobj = {name:"依然"};
console.log(Boolean(toBlist)); // true
console.log(Boolean(toBobj)); // true
console.log(Boolean("")); // false
console.log(Boolean(NaN)); // false

• 1.14NaN不等于 不大于 不小于任何值，包括自己

  • isNaN()，判断一个变量是否为NaN

• 1.15++ --

  • ++在后，先运算，后自增
  • ++在前，先自增，后运算

// script
// 15.++ --
// ++在后，先运算，后自增
// ++在前，先自增，后运算
var a15 = 10;
var b15 = a15++ +1;
console.log(a15); // 11
console.log(b15); // 11

• 1.16 if判断

  • 还有switch等，和java一样

// script
// 16.if判断
// 还有switch等，和java一样
var a16 = 16;
if (a16>=18){
    alert("可以去网吧了");
}
else if(a16>=16){
    alert("在香港可以去网吧");
}
else{
    alert("去哪都上不了网吧");
}

• 1.17for循环

  • 还有while循环等，和java大致相同，区别在于ES6之前，在for(){}，内部定义的变量，在外部也可以访问，并不算局部变量。
  • for循环的另一种遍历方式for(var i in list){}，这里和python的for循环遍历有些相似，但是遍历出的 i 并不是list中的值，而是这些值的索引。

// script
// 17.for循环
// 还有while循环等
var arr17 = [1,2,3,4];
// 第一种遍历方式
for (var i=0;i

• 1.18块级作用域

  • ES6之前没有块级作用域的概念，在内部定义变量，在外面一样可以访问
  • 使用 let x = xx; 定义变量，这为ES6的定义方法，支持块作用域

// 18.块级作用域-- ES6之前没有块级作用域的概念，只要不在内部定义变量，在外面都可以访问
// ES5
    for (var i18=0;i18<10;i18++){
        console.log("hello");
        var i188 = 100;
    }
    console.log(i18); // 18
    console.log(i188); // 100 这是能访问的

// ES6
    /*for (let let18=0;let18<10;let18++){
        console.log("hello");
    }
    console.log(let18); // 报错*/

    /*{ let name18="依然"; }
    console.log(name18); 报错，name18未定义 */

2.DOM-文档对象模型

• 2.1初步了解DOM

  • 获得p标签，document.getElementById("idName");
  • script不可以写在标签前，因为js默认顺序加载。否则会无效

// html+script

    
hello world
    

• 2.2如何将script放在body之前，能够获取到标签

  • window.onload = function(){js语句}
  • 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

// html文件




    
    
    
    
    


    
hello world
    change

• 2.3通过标签名获得标签对象

  • document.getElementsByTagName("标签名");
  • 通过标签名获取会得到一个集合，假数组，不用深究

// body

    
1
    
2
    
3
    
4
    
5
    btn

    

• 2.4通过class样式名获取标签对象

  • document.getElementsByClassName("样式名");
  • 得到的结果也是一个集合。可以看到方法中getElements，s就代表了复数形式。

// body

    
    
hello world
    
hello world
    
hello world
    
hello world

    

• 2.4通过选择器获取标签对象

  • document.querySelectorAll("选择器"); 获得的结果不论有几个都是一个集合
    • querySelectorAll可以获取多个对象，如果使用id选择器，虽然只有一个对象，但是也是一个集合
  • document.querySelector("选择器"); 获得的结果不管能匹配多少个都只得到一个。
    • 例如，使用.className选择器获取时，有多个结果匹配，但是只会获得第一个匹配的标签对象

// body

    
hello world