day01

作者: 克马 | 来源:发表于2018-06-27 18:39 被阅读0次

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<arr17.length;i++){
    console.log(arr17[i]);
}

// 第二种遍历方式，这里的key并不是数组中的值，而是它们的下标，比较奇怪
/*for(var key in arr17){
    console.log(arr17[key]);
}*/

// 遍历对象
// 这里遍历出的key为属性名
var obj17 = {name:"依然",age:21};
for (var key in obj17){
    console.log(key);
    console.log(obj17[key]);
}

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
<body>
    <p id="text" class="p-text">hello world</p>
    <script>
        // 如果不使用
        // 1.如何获取一个节点 - id获取
        var text = document.getElementById("text");
        // 2.修改元素的内容 obj.innerHTML
        text.innerHTML = "改变了";
    </script>
</body>

2.2如何将script放在body之前，能够获取到标签
- window.onload = function(){js语句}
- 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

// html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom示例2</title>
    <script type="text/javascript">
        // 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
        window.onload = function () {
            var p = document.getElementById("p");
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                p.innerHTML = "改变了";
            }
        };
    </script>
</head>
<body>
    <p id="p" class="">hello world</p>
    <button id="btn">change</button>
</body>
</html>

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

// body
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <button id="btn">btn</button>

    <script>
        // 通过标签名获取会得到一个集合，假数组，不用深究
        // 不常用
        var ps = document.getElementsByTagName("p");
        console.log(ps);
        // ps[1].innerHTML = "change";
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            for (var i=0;i<ps.length;i++){
                ps[i].innerHTML = "change"+i;
            }
        }
    </script>
</body>

2.4通过class样式名获取标签对象
- document.getElementsByClassName("样式名");
- 得到的结果也是一个集合。可以看到方法中getElements，s就代表了复数形式。

// body
<body>
    <!-- p.one{hello world}*4 -->
    <p class="one">hello world</p>
    <p class="one">hello world</p>
    <p class="one">hello world</p>
    <p class="one">hello world</p>

    <script>
        // 利用class名获取，也是一个集合
        var ps = document.getElementsByClassName("one");
        console.log(ps);
    </script>
</body>

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

// body
<body>
    <div class="one">hello world</div>
    <div class="one" id="two"></div>

    <script>
        // 通过选择器获取
        // querySelector只能获得一个对象
        var div = document.querySelector("#two");
        console.log(div); // 只有1个，其中有id为two的标签

        var div1 = document.querySelector(".one");
        console.log(div1); // 只有一个，是第一个class为one的标签，第二个不会被获取

        // querySelectorAll可以获取多个对象，如果使用id选择器，虽然只有一个对象，但是也是一个集合
        var divs = document.querySelectorAll("#two");
        console.log(divs); // 集合，其中有一个标签对象，该标签对象的id为two

        var divs1 = document.querySelectorAll(".one");
        console.log(divs1); // 集合，其中有2个标签对象，它们的class中都含有one
    </script>
</body>

day01

A.今天学什么？

1.javascript了解

1.1javascript输出方式

1.2变量的声明

1.3JavaScript的声明提前

1.4基本类型

1.5数组

1.6对象

1.7函数

1.8全局变量和局部变量

1.9数据类型的转换

1.10比较运算的自动转换

1.11字符串转number型-parseInt、parsFloat

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

1.13将任意类型转为boolean型

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

1.15++ --

1.16 if判断

1.17for循环

1.18块级作用域

2.DOM-文档对象模型

2.1初步了解DOM

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

day01

A.今天学什么？

1.javascript了解

1.1javascript输出方式

1.2变量的声明

1.3JavaScript的声明提前

1.4基本类型

1.5数组

1.6对象

1.7函数

1.8全局变量和局部变量

1.9数据类型的转换

1.10比较运算的自动转换

1.11字符串转number型-parseInt、parsFloat

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

1.13将任意类型转为boolean型

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

1.15++ --

1.16 if判断

1.17for循环

1.18块级作用域

2.DOM-文档对象模型

2.1初步了解DOM

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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