【零基础学习】Javascript 快速入门（完整篇）简单、适合初学者

news2024/12/23 22:45:40

【零基础学习】Javascript 快速入门

前言：如何解决错误提示（Error）
- Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
- Uncaught ReferenceError: displayDate is not defined at HTMLButtonElement.onclick
安装Visual Studio Code 开发环境软件
VS Code 的Web前端-插件拓展
Javascript 是什么，干什么，怎么用
- 是什么
- 干什么
- 怎么用

前言：如何解决错误提示（Error）

Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)

在这里插入图片描述

Uncaught ReferenceError: displayDate is not defined at HTMLButtonElement.onclick

在这里插入图片描述
-------更多的错误纠正可以继续关注花花的博客文章哦，后期就会出一遍错误纠正的相关文章。

安装Visual Studio Code 开发环境软件

官网下载链接: link
这个软件在花花这里是非常推荐的，学校出来那段时间去参加了培训使用的软件就是这个，后面发现这个软件
在这里插入图片描述

VS Code 的Web前端-插件拓展

在这里插入图片描述

🌸🌸🌸 花花这里有些推荐使用的插件：（自行选择）

在这里插入图片描述

🙋 每个插件的详细作用，在安装chinese中文后，软件上的英文介绍也会成中文，其他更便捷的插件也欢迎你们到评论区喝喝茶 ☕️ 🍰

Javascript 是什么，干什么，怎么用

是什么

JavaScript 语言用来编写在Web 页面中运行的程序。

“很多官方解释，👩花花就直接剪短的说了，亲们理解即可哦”

干什么

JavaScript 可以控制一个web 页面的外观，并且当浏览器点击按钮或移动鼠标饿时候，它让页面做出响应。

怎么用

在这里插入图片描述

按上面安装好开发环境后，我们也可以直接在vscode里面进行js的代码编写啦 😎😎😎

建立文件

html 和 js 文件的名字需要一样，这样方便它们后面外部链接方便一些。
html 文件输入！后回车：出现网页基础的代码

🌸 ：网页的头部；
🌸 ：网页的“身体”;

“一开始我们在html的文件上熟悉基础操作先⤵️，初学者的开始都是模仿，所以我们也从模仿开始🚩”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题位置</title>
    <script> // javascript 在html的代码元素
        
        // 在元素内部即可编写js代码
        
        var name; // 变量名字
        
        name = 123; // 给变量赋值 123

        alert("您好！欢迎访问我的网站！");
        // 网页的弹出框 代码元素
        
        document.write("你好,javascipt。");
    </script>
</head>
<body>
</body>
</html>