0
点赞
收藏
分享

微信扫一扫

【前端基础学习】

雪域迷影 2022-05-03 阅读 63
前端学习vscode

前端基础学习

前端的学习

前端基础学习

前端的基础知识包括HTHM、CSS、JavaScript、浏览器原理，网络协议等
前端的三个基础元素：HTHM、CSS、JavaScript
这三个基础元素的学习可以参考菜鸟教程系统的学习，链接：菜鸟教程HTML、CSS、JavaScript

一、前端编辑工具

1.1 记事本打开

前端运行是在浏览器中运行的，我们可以采用最简单的记事本打开的方式，将以下代码复制到记事本中，重命名为demo.html ，直接打开就行，页面如下：
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端教程(demo.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

保存为桌面重命名后如下图：
在这里插入图片描述
打开就可以看到浏览器中的内容。

1.2 使用VScode编辑工具

因为使用记事本编辑的效率太低，如果编辑错误，不容易发现错误，为了使编辑更方便，我们采用VScode进行编辑，用于编写html、css、js三个要素。
VScode安装教程如下：VScode安装教程
安装好后，桌面有以下的图标：
在这里插入图片描述
在这里插入图片描述

VScode可以设置一些东西，方便自己编程看到效果：下面是VScode自动保存和更新、以及代码自动调整格式的教程：
VScode自动保存和更新
VScode代码格式自动调整

二、简单的一些语法

2.1 解释一下最基本的页面的基础代码

在这里插入图片描述

2.2 使用基本的CSS和JavaScript

代码分析：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script>
    <style>
        h1 {
            text-align: center;
        }
        p {
            font-size: 20px;
            text-align: center;
        }
        p1 {
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>这个是CSS的字体的设置</p>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
   
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),"dark");

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "毛巾"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 90]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

有关CSS的设置有以下的几种方式：

 <style>
        /* 样式  字体，颜色，长宽，背景图*/
        /* ctrl+/ 注释的快捷键 */
        /* css 内部样式表  就近原则：内联样式优先级最高  有属性则覆盖，没有则保留*/
        /* id选择器，标签选择器，类class选择器  id> 类class选择器>标签选择器 
        唯一性的问题，越准确，优先级越高
        */
        p {
            font-size: 30px;
        }

        h1 {
            font-size: 30px;
            font-weight: 10;
            color: aqua;
            background-color: black;
            width: 500px;
            height: 100px;
        }

        #h1_1 {
            font-size: 10px;
        }
        .cen {
            font-size: 5px;
        }
    </style>

在ES6中，我们不用var，常用变量使用let，不变量用const
对于javascript中常用的是函数，对于箭头函数，我们可以采用代码为：

const change_style_2 = (div_) => {
    console.log(this)
    return 6
};

function change_style(div_) {
     console.log(this)
    div_.innerHTML = div_.innerHTML + 'hello';
    div_.style.fontSize = '100px';
};//11 尽量不写
window.change_style = change_style
change_style(div_test);//22
//立即执行函数 等价于==== 匿名函数，申明一个函数，并调用它change_style
(function (div_) { })();//'33'=='11'+'22'

三、图表的绘制

3.1 echarts二维图表的插入

echarts的教程链接：echarts教程

3.2 three.js 三维图表的绘制

three.js的教程链接：three.js教程

四、非模块化与模块化的转化

非模块的three.js在画三维图的时候，如果需要画同类型的图的时候，会产生全局污染，影响后面的定义的一些变量，因此使用模块化可以减少代码定义的冲突，减少全局污染。
下面代码需要在同一个文件夹下放置three.js文件和three.module.js文件
three.js下载
three.module.js下载
我个人理解就是three.js是非模块化的一个三维的画图的库，可以直接引入里面的场景等各种函数；而three.module.js是模块化的三维画图的库，里面运用一种import{}、export{}的形式导入导出库，我们直接从three.module.js中导入库就不会产生全局污染。

4.1 three.js非模块化

three.js下载
非模块化的需要引入three.js,放在同一文件夹下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>

</head>

<body>

    <script src="three.js"></script>
    <div id="three" style="width: 800px;height: 600px;background-color: rgb(126, 115, 115);"></div>
    <script>
        const three_div = document.getElementById("three");
        const scene = new THREE.Scene(); //场景
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//通过视窗观察三维空间

        const renderer = new THREE.WebGLRenderer();//关联显卡渲染器
        let w = three_div.style.width;
        let h = three_div.style.height;
        w = w.split("px")[0];
        h = h.split("px")[0];
        console.log(w, h)

        renderer.setSize(w, h);//渲染大小
        // document.body.appendChild(renderer.domElement);
        three_div.appendChild(renderer.domElement);//挂载

        let geometry = new THREE.BoxGeometry();//盒子、骨架
        geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);//胶囊
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//皮肤
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 10;// 离摄像头的距离米

        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>



    <div id="three2" style="width: 800px;height: 600px;background-color:rgb(126, 115, 115);"></div>
    <script type="module">
        import {
            Scene, PerspectiveCamera, WebGLRenderer, MeshBasicMaterial, Mesh, BoxGeometry
        } from "./three.module.js"
        const three_div2 = document.getElementById("three2");
        const scene2 = new Scene(); //场景
        const camera2 = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//通过视窗观察三维空间
        const renderer2 = new WebGLRenderer();//关联显卡渲染器
        renderer2.setSize(w, h);//渲染大小  非模块化具有全局污染的
        three_div2.appendChild(renderer2.domElement);//挂载
        let geometry2 = new BoxGeometry();//盒子、骨架

        const material2 = new MeshBasicMaterial({ color: 0x0000ff });//皮肤
        const cube2 = new Mesh(geometry2, material2);
        scene2.add(cube2);

        camera2.position.z = 10;// 离摄像头的距离米

        function animate2() {
            requestAnimationFrame(animate2);

            cube2.rotation.x += 0.01;
            cube2.rotation.y += 0.01;

            renderer2.render(scene2, camera2);
        };

        animate2();

    </script>

</body>
</html>

4.2 three.module.js模块化

需要将下载的three.module.js放在同一文件夹下运行，同时建立mythree.js文件，代码在下面有：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>

</head>

<body>

    <script src="three.js"></script>
    <div id="three" style="width: 800px;height: 600px;background-color: rgb(126, 115, 115);"></div>
    <script>
        const three_div = document.getElementById("three");
        const scene = new THREE.Scene(); //场景
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//通过视窗观察三维空间

        const renderer = new THREE.WebGLRenderer();//关联显卡渲染器
        let w = three_div.style.width;
        let h = three_div.style.height;
        w = w.split("px")[0];
        h = h.split("px")[0];
        console.log(w, h)

        renderer.setSize(w, h);//渲染大小
        // document.body.appendChild(renderer.domElement);
        three_div.appendChild(renderer.domElement);//挂载

        let geometry = new THREE.BoxGeometry();//盒子、骨架
        geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);//胶囊
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//皮肤
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 10;// 离摄像头的距离米

        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>

    <div id="three2" style="width: 800px;height: 600px;background-color:rgb(126, 115, 115);"></div>
    <script type="module">
        import {
            draw
        } from "./mythree.js"
        draw()

    </script>



</body>

</html>

上面的html文件需要引用下面的js代码，建立一个mythree.js文件，文件内容如下：

import {
    Scene, PerspectiveCamera, WebGLRenderer, MeshBasicMaterial, Mesh, BoxGeometry
} from "./three.module.js"
function draw() {
    const three_div = document.getElementById("three2");
    const scene = new Scene(); //场景
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//通过视窗观察三维空间
    const renderer = new WebGLRenderer();//关联显卡渲染器
    renderer.setSize(w, h);//渲染大小  非模块化具有全局污染的
    three_div.appendChild(renderer.domElement);//挂载
    let geometry = new BoxGeometry();//盒子、骨架

    const material = new MeshBasicMaterial({ color: 0x00ff00 });//皮肤
    const cube = new Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 10;// 离摄像头的距离米

    function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    };

    animate();

}
export {
    draw
}
举报

相关推荐

前端学习路线（前端零基础）

前端css3html5javascriptvue

web前端秘籍，前端开发基础学习

Web开发程序员前端jQuery前端开发

java学习之前端基础

java学习前端

前端学习----css基础语法

spring boot面试后端java框架大厂

前端学习-JavaScript基础（练习）

javascript前端学习

前端学习-JavaScript基础（BOM）

javascript前端学习

前端基础学习html(2)

前端学习html

0基础学习前端开发，前端开发攻略

Web开发程序员前端Html/CSS前端开发

【JS基础】前端学习记录6

前端javascript学习

【前端学习笔记】CSS基础一

harmonyos华为鸿蒙开发鸿蒙OpenHarmonyAPInative
0 条评论