JavaScript简介与基础语法

首先需要安装VScode代码编辑器,顺便安装如下几个插件就可以愉快写js了。

VScode 插件

Error Lens

写代码时,还没有验证的情况下直接给你报错,非常便捷。

JavaScript简介与基础语法

One Dark Pro

这是一个颜色主题插件,安装完成以后一定要设置颜色主题。

JavaScript简介与基础语法

Live Server

这是一个左右分屏的插件,使用方法是 win + 方向键。

JavaScript简介与基础语法

语法规范设置

刚开始学习不需要安装代码自动格式化插件,因为javascript对语法规范是有要求的,使用VScode自带的格式化即可,下面教大家怎么设置。

① 设置 → 文本编辑器 → 格式化

② Format On Save 选项打钩(保存格式化文件)

③ 保存

代码缩进2个字符

① 设置 → 文本编辑器 → 常用设置

② Editor: Tab Size 手动改为 2

让代码后面不带分号

① 设置 → 用户代码片段

② 选中打开javascript.json

③ 将下方代码替换保存即可

"Print to console": {
  "prefix": "log",
  "body": [
    "console.log($1)",
  ],
  "description": "Log output to console"
}

JavaScript是什么

JavaScript 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

要熟练掌握变量、常量、数据类型、等基础概念,能够实现数据类型的转换,具备利用模板字符串渲染表格的能力。

JavaScript有什么作用?

网页特效(监听用户的一些行为让网页作出对应的反馈)

表单验证(针对表单数据的合法性进行判断)

数据交互(获取后台的数据,渲染到前端)

服务端编程(node.js)

JavaScript简介与基础语法

JavaScript的组成?

JavaScript

它是遵循ECMAScript语法规范,ECMAScript也就是JavaScript的基础,它规定了js基础语法核心知识,比如:变量、分支语句、循环语句、对象等等。

Web APIs

DOM 是操作文档,比如对页面元素进行移动、大小、添加删除等操作;

BOM 是操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等;

JavaScript权威网站: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JavaScript简介与基础语法

语法

语法是人和计算机打交道的规则约定,程序员要按照这个规则去写实现计算机操控,常见的语法就两种输入和输出。

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

页面弹窗

页面弹出警告对话框,需要用户点击操作。

<script>
  alert('请确认金额')
</script>

输出语法

<body>内输出内容,如果输出的内容写的是标签,也会被解析成网页元素。

<script>
  document.write('我是div标签')
  document.write('<h1>我是一级标签</h1>')
</script>

输入语法

<script>
  prompt('请输入您的年龄:')
</script>

显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字。

确认框语法

显示一个对话框,对话框中包含一条文字信息,需要用户点击确认还是取消。

confirm('您确定要删除这条数据吗?')

控制台打印

控制台输出语法,程序员调试使用,用户看不到,点击审查 → 控制台

<script>
  console.log('看对不对');
</script>

代码执行顺序

按HTML文档流顺序执行JavaScript代码,但是如果有alert()和 prompt()它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)。

字面量

在计算机科学中,字面量(literal)是在计算机中描述事或者物我们接下来会学到如下字面量:

数字字面量:1000

字符串字面量:'笔耕屋’

数组字面量:[]

对象字面量:{}

……

注释和结束符

今天目标是了解JavaScript注释写法以及结束符通俗写法。

注释

单行注释

符号://

作用://右边这一行的代码会被忽略

快捷键:ctrl + /

块注释

符号:/* */

作用:在/* 和 */之间的所有内容都会被忽略

快捷键:shift + alt+ a

结束符

作用:使用英文的代表语句结束

实际情况:实际开发中,可写可不写,浏览器 javascript 引擎可以自动推断语句的结束位置

现状:在实际开发中,越来越多的人主张,书写Javascript 代码时省略结束符

约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求)

书写位置

JavaScript书写位置分为行内JavaScript、 内部JavaScript、 外部JavaScript 三种。

内部JavaScript书写

直接写在html文件里,用<script>包住,<script>又写在上面</body> .

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    alert("你好,js")
  </script>

</body>

</html>

我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。因此,将Javascript 代码放在 HTML页面的底部附近通常是最好的策略。

外部JavaScript引入

<script src="./js/my.js"></script>

内联JavaScript

代码写在标签内部,此处作为了解即可,但是后面vue框架会用这种模式。

  <script>
    <button> onclick="alert('逗你玩~~~')"点击我月薪国外</button>
  </script>

原创文章,作者:霍欣标,如若转载,请注明出处:https://www.bigengwu.cn/xue/46.html

霍欣标的头像霍欣标
上一篇 2024-07-01 10:22
下一篇 2024-07-02 04:46

相关推荐

联系方式

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com

分享本页
返回顶部