后端学前端之JavaScript

最新推荐文章于 2023-01-06 11:16:31 发布

Jeremy_Yoyo

最新推荐文章于 2023-01-06 11:16:31 发布

阅读量404

点赞数

分类专栏：技术文章标签：后端学前端系列

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

520 篇文章 14 订阅

订阅专栏

了解Javascript
JavaScript, 简称为JS, 是一种运行在浏览器中的脚本语言; 可以被嵌入到HTML中直接使用, 用来使页面动态化. JS起初被设计用于在客户端对用户信息进行校验, netspace, Brendan Eich（布兰登·艾奇）用10天时间设计并开发了JS. ECMA262标准, 规范Javascript的标准. Javascript和JScript(微软)非常像. (js在html中的位置任意)
Javascript的组成
ECMAScript, 简称ES, JS的基本内容, 约束了变量, 语法, 流程控制等基本内容;
BOM, Browser Object Model, 浏览器对象模型;
DOM, Document Object Model, 文档对象模型.
其实BOM包括DOM
ECMAScript
1)< script>标签的使用和三种输出
< script>用于定义JS代码块, 可以出现在HTML的任意位置, type属性通常为”text/javascript”, src可以引入外部js文件. 三种输出:
弹窗输出

//弹窗输出,警告弹窗
    alert("hello world");
    //确认弹窗
    confirm('确认要执行吗?')
    //询问(提示)弹窗
    prompt('请输入所选角色昵称:','如:李白');

在这里插入图片描述

页面输出

//向页面直接输出信息
    document.write('<h1>你好,世界!</h1>');

在这里插入图片描述
控制台输出

//向控制台输出,通常用于调试代码
    console.log('这是一个控制台输出...');

在这里插入图片描述

4. JS中的变量和数据类型
JS是一种弱变量类型的语言, 声明变量时要通过var关键字进行. JS中, 变量分为局部变量和全局变量. 定义在函数内的变量就是局部变量, 函数外的变量就是全局变量.
4.1 变量
关键字var修饰变量
注:当未被var修饰的局部变量在经过使用一次后会变成全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo0() {
            c = 123; // 可以省略var, 但是该变量用完后就会变成全局变量
            console.log("c: " + c);
        }

        function demo1() {
            // 局部变量: 函数内定义的变量
            var a;
            a = 123;
            a = "张无忌";
            console.log(a);
            console.log("b=" + b);
        }

        function demo2() {
            console.log("c: " + c);
        }

        // 全局变量
        var b = "你好!";
    </script>
</head>
<body>
    <!--Emmet插件语法, 简化前端代码的开发, IDEA中默认集成-->
    <input type="button" value="demo0" onclick="demo0();">
    <input type="button" value="demo1" onclick="demo1();">
    <input type="button" value="demo2" onclick="demo2();">
</body>
</html>

4.2 数据类型
在这里插入图片描述
4.3JS中的类型自动转换
主要是了解其他类型和boolean类型的相互转换,if语句等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo() {
            var b = false;
            b = ""; // 空字符串-->false, 非空字符串-->true
            b = 0; // 0-->false, 非0-->true
            b = null; // null-->false
            b = undefined; // undefined-->false
            if(b) {
                console.log("ok");
            } else {
                console.log("no");
            }
            console.log(null == undefined); // true
            console.log(null === undefined); // false
        }
    </script>
</head>
<body>
    <button onclick="demo();">demo</button>
</body>
</html>

4.4 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 在js中, 函数也是一个对象
        function demo1(a, b) {
            return a + b;
        }

        var sum = demo1(5, 2);
        console.log("sum: " + sum);

        // 可以变形为:
        var demo2 = function(a, b) {
            return a * b;
        };

        var result = demo2(5, 2);
        console.log("result: " + result);

        // 在js中, 函数也可以作为参数继续传递
        function demo3(a, b, c) {
            console.log(a(b, c));
        }

        demo3(demo2, 10, 2);
    </script>
</head>
<body>

</body>
</html>

4.5 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo1() {
            /**
             * js中数组的特点:
             *  类型不固定
             *  长度不固定
             *  提供了很多方法直接操作数据
             */
            var arr = new Array();
            arr[0] = 123;
            arr[1] = "hello";
            arr[2] = new Date();
            console.log(arr);
        }

        function demo2() {
            var arr = new Array(123, "hi", new Date());
            console.log(arr);
        }

        function demo3() {
            var arr = [456, "你好", new Date()];
            console.log(arr);
            console.log("数组的长度: " + arr.length);
            arr.length = 1;
            console.log(arr);
        }

        function demo4() {
            var arr1 = [123, 456, 789];
            var arr2 = ["abc", "def", "xyz"];
            // concat: 拼接数组
            var arr = arr1.concat(arr2);
            console.log(arr);
            // push: 数组的末尾添加元素
            var n = arr.push("张无忌");
            console.log(arr);
            console.log("数组的新长度: " + n);
            // pop: 取出数组末尾的元素
            var e = arr.pop();
            console.log(e);
            console.log(arr);
            // shift/unshift: 操作数组开头的元素
            // join: 使用指定的连接符拼接数组元素为字符串
            var str = arr.join("-");
            console.log(str);
            // sort: 排序
            var arr2 = [123, 2, 33, 13];
            console.log(arr2);
            arr2.sort(function(a, b) {
                return a - b;
            });
            console.log(arr2);
        }
        demo4();
    </script>
</head>
<body>

</body>
</html>

BOM
Browser Object Model, 浏览器对象模型. window对象在BOM中处于顶级地位, 通常把window.省略.
5.1 window下常用的属性
5.1.1 screen
代表整个屏幕, 通常用于获取屏幕信息, 例如宽度, 高度

function demo1() {
    var screen = window.screen;
    console.log("宽度: " + screen.width);
    console.log("高度: " + screen

Jeremy_Yoyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
后端学前端之JavaScript

了解JavascriptJavaScript, 简称为JS, 是一种运行在浏览器中的脚本语言; 可以被嵌入到HTML中直接使用, 用来使页面动态化. JS起初被设计用于在客户端对用户信息进行校验, netspace, Brendan Eich（布兰登·艾奇）用10天时间设计并开发了JS. ECMA262标准, 规范Javascript的标准. Javascript和JScript(微软)非常像....
复制链接

扫一扫

专栏目录