2018.12.17断点调试,js引入,变量定义,三种弹出框,数据类型,数据类型转换

断点调试(找bug)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调试方式</title>
</head>
<body>
    调试方式
</body>
<script>
    var a = 10;
    var b = a;
    var c = b;
    /*调试js的方式第一种,可以在网页端查看console属性看是否有报错然后进行修改(推荐)
      console.log(a, b, c);
      
      第二种网页会弹出要确认的值不过一次智能确定一个值不推荐
      alert(a)
      
      第三种把要测试的值写在网页上面(不推荐)
      document.write(a, b, c)
      
      第四种debug 断点调试,step over(不管下一步是不是方法都一行一行的执行),(推荐)
      step into(如果是函数的调用或者方法的调用会进入调用体内),
      Force step into(进入方法里一步一步走),
      step out(跳出调用体回到调用的地方) ,
      run to cursor(结束当前断点进入下一个断点)
      第四种.1 在网页端也有debug使用方法点击网页上sources里面选择要调试的文件,
      然后在文件里打上断点(蓝色)然后刷新网页,右侧或者左侧会出现调试按钮,调试的方法和上面debug一样
    */
    console.log(a, b, c);
    alert(a)
    // alert(b)
    // alert(c)

    // document.write(a, b, c)

    // debug 断点
</script>
</html>

一.复习(变形,动画,表格)


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
</head>
<body>
    <!--1.2d形变-->
    <style>
        .box {
            transition: 1s;
        }
        .box:hover {
            /*旋转 deg*/
            transform: rotateZ(720deg);
            /*偏移 px*/
            transform: translateX(100px) translateY(100px);
            /*缩放 无单位*/
            transform: scale(2, 0.5);

            /*三种形变本质都是对transform属性进行设置,如果具有多种形变属性,
            设置给一条属性, 直接用空格隔开, 且顺序一般也会影响最终效果*/
            transform: rotateZ(720deg) translateX(100px) translateY(100px) scale(2, 0.5);

            /*形变会产生图层位置变化,但不影响盒子位置*/
            /*形变一般不用于布局, 用于盒子动画特效*/
        }
    </style>
    <!--2.动画-->
    <style>
        /*1.设置动画体*/
        @keyframes moving {
            0% {
                /*起点*/
                margin-left: 0;
                margin-top: 0;
            }
            33.3% {
                margin-left: 800px;
                margin-top: 0;
            }
            /*强调: 在任何动画节点中,均要对每一个动画的属性进行值的明确*/
            /*...*/
            66.6% {
                margin-left: 400px;
                margin-top: 400px;
            }
            100% {
                /*终点*/
                margin-left: 0;
                margin-top: 0;
            }
        }
        /*2.设置动画属性*/
        .box {
            /*animation-name: moving;*/
            /*动画名 一次动画时间 循环次数 运动曲线*/
            animation: moving 1s infinite ease;
        }
    </style>
    <!--3.表格-->
    <table border="1" cellspacing="0" cellpadding="10" rules="all">
        <!--列表从上到下1行1行,colspan控制横向合并,rowspan控制纵向合并-->
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th colspan="2">标题</th>
                <!--<th>标题</th>-->
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--colspan="2"-->
                <td colspan="2">单元格</td>
                <!--<td colspan="2">单元格</td>-->
                <td rowspan="2">单元格</td>
                <!--rowspan="2">-->
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <!--<td>单元格</td>-->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>

    <!--display: table-cell; -->
    <!--文本在该显示方式的盒子中垂直居中(display, vertical-align) => 多行文本垂直居中-->
    <!--注: 如果要对table-cell盒子进行布局, 可以对其添加block布局盒子的父级-->
    <style>
        .box {
            display: table-cell;
            vertical-align: middle;
        }
    </style>

    <!--今天内容-->
    <!--JS基础-->
    <!--1.引入-->
    <!--2.js出现的位置-->
    <!--3.变量常量-->
    <!--4.弹出框与调试方式-->
    <!--5.数据类型-->
    <!--6.运算符-->

</body>
</html>

二.js三个组成部分

三.引入方式


行间式
出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")


内联式
出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)


外联式
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象


js具体出现的位置
head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本

代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js引入</title>
    <!--js出现的第一个位置-->
    <script>
        // 一般为 依赖型JS库
    </script>
</head>
<body>
    <!--脚本:一段功能代码块, 可以嵌套在其他语言中使用, 完成一些额外的功能-->
    <!--js可以用来书写脚本, js就是脚本语言, 书写在script标签中-->
    <!--js三个组成部分：ES（ECMAScript）语法 | DOM（document object model） | BOM（browser object model）-->
    <script>

    </script>

    <!--1.行间式-->
    <!--i) 行间式代码块书写在一个个全局事件名属性中，没有script这样的一个全局属性-->
    <!--ii) 在某一个标签的某一个事件属性值中，出现的this代表该标签-->
    <!--iii) 该标签对象this可以访问该标签的任意全局属性（eg：style），
    然后再间接访问具体需要操作的对象（style.color）-->
    <div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">这是一个拥有行间式js的div</div>

    <!--2.内联式-->
    <!--i) 可以通过标签的id(唯一标识)，在js代码块中访问到该标签(js的选择器)-->
    <!--ii) js代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行赋值-->
    <!--iii) js属于解释性语言，所有加载顺序会影响执行结构 => 内联式的script标签出现的位置-->
    <script>
        ddd.style.backgroundColor = "pink"
    </script>

    <!--3.外联式-->
    <!--i) 通过script标签的src数据链接外部js文件-->
    <!--ii) 使用外联的script(拥有src属性)标签，会屏蔽掉标签内部的js代码块-->
    <!--iii) 在js任意地方，均由this对象，this对象不指向任何标签时，指向的是window对象-->
    <script src="js/01.js">
        // 被屏蔽掉的代码块
        ddd.style.fontSize = "100px";
    </script>
</body>
<!--js出现的第二个位置-->
<script>
    // 一般为 功能性JS脚本
</script>
</html>

-----------------------------------------------------------------------------------------------
01.js
ddd.style.fontSize = "20px";

四.变量的定义


四种定义变量的方式
语法: 关键词 变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式
{
    直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法

// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);

四.1变量的定义和变量的定义代码展示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>变量的定义</title>
</head>
<body>
    变量的定义
</body>
<script>
    // python
    // 1.以换行标识语句的结束
    // 2.以同缩进标识附属关系

    // js
    // 1.以分号(;)标识语句的结束
    // 2.以作用域({})标识附属关系

    // 定义变量
    // py: 变量名 = 变量值
    // js: 声明关键词 变量名 = 变量值
    console.log(num);  // 注: 变量在未定义赋值之前也可以去使用,值为undefined
    // 定义变量: 在程序运行过程中, 值可以发生改变的量
    var num = 10;
    console.log(num);

    // 定义常量: 在程序运行过程中, 值不会被改变的量
    const NUM = 3.14;
    // JS中区分大小写
    console.log(num, NUM);
    // NUM是标标准准常量语法, 为只读的值, 不允许修改,修改会报错
    // NUM = 3.141592653;


</script>

<script>
    // 块级作用域
    // 定义变量
    // var无块级作用域
    {
        var a = 666;
    }
    // let有块级作用域
    {
        let b = 888;
        console.log(b);
    }
    console.log(a);
    // let定义的变量具有块级作用域, 在块级作用域之外无法访问
    // console.log(b);

    {
        const c = 999;
    }
    // const定义的=常量具有块级作用域, 在块级作用域之外无法访问
    // console.log(c);

    // 在ES6语法下, 定义变量(let)常量(const)都具有块级作用域
    // 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域
</script>
<script>
    // 局部作用域
    // ES5语法下, 只有方法(函数)才能产生局部作用域,ES5语法里没有块级作用域这个说法,也不支持let和const
    // ES6语法下, 块级作用域都可以为局部作用域,方法(函数为局部作用域,其他也可以称为块级作用域
    // 块级作用域的范围 >= 局部作用域范围
    //但是谷歌浏览器可以解析ES5和ES6都可以转化为ES5语法

    /* py
    def func():
        缩进
     */
    function func() {
        var aaa = 10;
        let bbb = 20;
        const ccc = 30;
        console.log(aaa);
        // 定义全局变量
        // 注: 定义全局变量与重新赋值语法相同, 容易混淆, 不建议使用
        ddd = 40;
    }
    func() // 执行一下函数, 所有的变量(常量)均产生了

    {
        ddd = 50;
    }
    // console.log("aaa>>>:", aaa)  // 不能被访问
    // console.log("bbb>>>:", bbb)  // 不能被访问
    // console.log("ccc>>>:", ccc)  // 不能被访问
    console.log("ddd>>>:", ddd)  // 可以访问



</script>
<script>
    // 变量命名规范
    // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
    // 可以以什么开头: 字母, _, $, 中文
    // 不能出现什么: 关键字, 保留字
    // 提倡什么书写规范: 小驼峰, 支持_连接语法
    好的 = "真好";
    console.log(好的);
</script>
</html>

五.三种弹出框


// 普通弹出框
// alert("你丫真帅!!!");
// 输入框: 以字符串形式接收用户输入内容
// var info = prompt("请输入内容:");
// console.log(info)

// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
// var res = confirm("你是猪吗?");
// console.log(res)

六.数据类型


// 值类型
var a = 10;  // Number 10
var a = 'abc';  // String abc
var a = true;  // Boolean true
var a = undefined  // undefined undefined
// 引用类型
var a = function(){}  // function f(){}
var a = {}  // Object {}
var a = null  // Null null

// 其他Object具体体现
Array | Date | RegExp

六..1数据类型代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本数据类型</title>
</head>
<body>
    基本数据类型
</body>
<script>
    // 值类型
    // 1.number类型
    var num = 10;
    // 类型, 值
    console.log(typeof(num), num)
    // 判断方式
    console.log(typeof num == 'number');

    num = 3.14;
    console.log(typeof(num), num);

    // 2.string类型
    var str = '单引号字符串';
    console.log(typeof(str), str);
    str = "双引号字符串";
    console.log(typeof(str), str);

    // 3.boolean类型
    var res = true;
    console.log(typeof(res), res);
    res = false;
    console.log(typeof(res), res);

    // 4.undefined类型
    console.log(typeof(abc), abc);
    var abc = undefined;
    console.log(typeof(abc), abc);

    // 引用类型
    // 5.function类型
    var fn = function (a, b) { return a + b; };
    console.log(typeof(fn), fn);

    // 6.object类型 (类字典方式来使用)
    var obj = {
        name: 'egon',
        age: 78
    };
    console.log(typeof(obj), obj);
    console.log(obj instanceof Object);

    // 其他形式对象
    // 7.null类型
    var xyz = null;
    console.log(typeof(xyz), xyz);  // object null
    console.log(xyz instanceof Object);  // false => Null类型

    // 具体的对象类型
    // Array类型
    var a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof a);
    // 判断方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Array);

    // Date类型
    var a = new Date();
    console.log(a, typeof a);
    // 判断方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Date);

    // RegExp类型
    var a = new RegExp('a');
    a = /[abc]/;
    console.log(a, typeof a);
    // 判断方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof RegExp)

    // 使用正则
    console.log('abc'.match(a))
</script>
</html>

七.值类型的类型转换


// 1.通过类型声明转换
Number() | String() | Boolean()

// 2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()

// 3.隐式转换
+'10' => 10
'' + 10 => '10'

七.1值类型的类型转换代码展示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据类型转换</title>
</head>
<body>
    number | boolean | string 之间相互转换
</body>
<script>
    // 1. number 与 boolean类型
    // boolean类型的true就是数字1, false就是数字0
    console.log((true + true) * 10 * false)
    // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用

    // 2. string,boolean 转换为 number
    var a = '10'; // => 10
    a = '3.14';  // => 3.14
    a = '3.14.15';  // => NaN
    var b = true;

    var n1 = Number(a);
    console.log(n1)
    var n2 = Number(b);
    console.log(n2)

    a = '3.14.15';  // 3.14
    a = 'a3.14';  // NaN
    console.log(parseFloat(a));

    a = '3.94.15';  // 3
    console.log(parseInt(a));

    // 体现弱语言类型
    a = '10';
    var res = +a; // number 10
    console.log(typeof(res), res)

    // 3.number, string 转换为 boolean
    // 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型
    // 不在判断中, 如何转换
    console.log(Boolean(""));
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(null));

    console.log(Boolean("1"));
    console.log(Boolean(-100));

    // 4.number, boolean 转换为 string
    console.log(String(true));
    console.log(String(1));

    var a = 123;
    console.log(a.toString());
    console.log(123..toString());
    console.log(3.14.toString());

    var c = 123 + "";
    console.log(typeof c, c);

    // 用例
    var z1 = 2 + +"5";  // 7
    z1 = 2 + "5"; // "25"
    // z1 = 2 ++"5";  // 语法错误 ++连在一起是 ++语法(了解)
    var z2 = "5" - 2;  // 3
    console.log(z1, z2);

    // 补充
    // NaN与NaN不相等
</script>
</html>