JavaScript基础(ECMAScript)

贺志营

已于 2022-05-15 11:22:24 修改

阅读量1.4k

点赞数 1

分类专栏：【Web前端的学习】文章标签： javascript 前端开发语言

于 2019-10-06 12:08:46 首次发布

本文链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018

版权

【Web前端的学习】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Web前端基础修炼

HTML基本标签详解与运行截图

CSS基本操作详解及截图演示

JavaScript基础(ECMAScript)

JS的基本介绍

JavaScript是一种解释型的脚本语言，总共是包括三部分组成，其一就是今天我写的Java基础部分，也就是ECMAScript，另一个是DOM(Document Object Model)文档对象模型，用来描述处理网页内容的方法和接口，最后这个是BOM(Browser Object Model)浏览器对象模型，用来描述与浏览器进行交互的方法和接口。

JS的三种写法

首先是内嵌式，也就是把JS代码写到HTML内部，具体看下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js三种写法</title>
    <!--内嵌式js-->
    <script>
        alert('你好');
    </script>
</head>
<body>
</body>
</html>

运行结果：

第二种是行内式的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js三种写法</title>
</head>
<body>
<!--行内式js-->
<input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>
</html>

当我点击按钮的时候就会弹出个框框：

第三种就是外部式的，此时你需要先在外部写好一个js代码

alert('hello world');

然后把该代码引入HTML种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js三种写法</title>
    <script src="外部.js"></script>
</head>
<body>
</body>
</html>

运行结果：

JS输入输出语句

输入用：prompt();

输出以提示框的形式用alert();

输出在控制台用console.log();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入输出语句</title>
    <script>
        // 这是一个输入框
        var myname = prompt('请输入姓名');
        //弹出警示框
        alert('计算结果是');
        //输出到控制台，这里的控制台是浏览器中的，按F12可以查看
        console.log(myname);
    </script>
</head>
<body>

</body>
</html>

运行结果：

JS中的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //声明一个空数组
        var arr = [];
        //声明一个数组并初始化
        var arr1 = [1,5,'hello',22];
        //遍历数组
        for(var i=0;i<arr1.length;i++){
            console.log(arr1[i]);
        }
    </script>
</head>
<body>

</body>
</html>

运行结果：

JS中的函数

其中有无参定义、有参定义、不确定参数的个数定义以及匿名函数定义，在这里说一下，JS在执行的时候，先进行的是js的预解析，也就是把var和function提升到作用域的最前面，其中变量只声明不赋值，函数只声明不调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 函数的定义方式
        //无参
        function  f() {
            console.log('你好');
        }
        //调用函数
        f();

        //有参
        function f1(num){
            console.log(num);
        }
        f1(10);

        //不定参数
        function f1() {
            //这里的arguments代表传过来的参数总数，
            for(var i=0;i<arguments.length;i++)
                console.log(arguments[i]);
        }
        //调用函数
        f1(1,2,3);

        // 函数的匿名定义方式
        var fn = function () {
            console.log('hello');
        }
        // 调用方式
        fn();
    </script>
</head>
<body>

</body>
</html>

运行结果：

JS对象

首先说利用对象字面量创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1、利用对象字面量创建对象{}
        var obj = {};//创建一个空对象
        var obj = {
            username: '张三',
            age: 18,
            sex: '男',
            eat: function () {
                console.log('eat');
            }
        }
        console.log(obj.username);
        console.log(obj['age']);
        obj.eat();

        //遍历
        for(var k in obj){
            console.log(k);
            console.log(obj[k]);
        }


    </script>
</head>
<body>

</body>
</html>

运行结果：

利用new Object()创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //2、利用new Object()创建对象
        var obj = new Object();//创建一个空对象
        obj.username = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.eat = function () {
            console.log('eat');
        }
        console.log(obj.username);
        console.log(obj['age']);
        obj.eat();

    </script>
</head>
<body>

</body>
</html>

运行结果：

利用构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //3、利用构造函数创建对象，可以一次创建多个对象，一般函数名用大写
        function Start(username,age,sex) {
            this.username = username;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }
        var str= new Start('刘德华',18,'男');
        console.log(str);
        console.log(str.username);
        console.log(str['age']);
        str.sing('冰雨');

        var str1 = new Start('张学友',20,'男');
        console.log(str);
        console.log(str.username);
        console.log(str['age']);
        str1.sing('李香兰');

    </script>
</head>
<body>

</body>
</html>

运行结果：