JavaScript 书写语法

文盲
224 阅读4分钟

网页、网站和应用程序

网页:单独的一个页面。
网站:一系列相关的页面组合到一起。
应用程序:可以和用户产生交互，并实现某种功能。

前端三层

  • HTML 结构层 从语义的角度描述页面结构\
  • css 样式层 从美观的角度描述页面样式\
  • JavaScript 行为层 从交互的角度描述页面行为

JavaScript 的应用场景

  1. 网页特效
  2. 服务端开发(Node.js)
  3. 命令行工具(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(cocos2d-js)

JavaScript 是什么

  • JavaScript 是一种运行在客户端 的脚本语言 ，最早是在 HTML(标准通用标记语言下的一个应用)网页上使用，用来给 HTML 网页 增加动态功能。
  • 浏览器就是一种运行 JavaScript 脚本语言的客户端，JavaScript 的解释器被称为 JavaScript 引擎，为浏览器的一部分。

ECMAScript 发展过程

image.png

——ECMAScript 的应用

  • Javscript，JScript，ActionScript 等脚本语言都是基于 ECMAScript 标准实现的。
  • 在JavaScript，JScript和ActionScript 中声明变量，操作数组等语法完全一样，它们都ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。

JavaScript 的组成

JavaScript是由ECMAScript，DOM 和 BOM三者组成的。 image.png

JavaScript 书写语法

1、JavaScript 的书写位置

  • 写在行内
  • 写在html 中的 <script>标签中
  • 写在外部 js 文件中，在页面引入
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 写在外部 js 文件中，在页面引入 -->
  <script src="first.js"></script>
  
</head>
<body>
  <!-- 行内式 -->
  <input type="button" value="按钮" onclick="alert('hello')">
  <!-- 写在 html 中的 <script> 标签中 -->
  <script type="text/javascript">
    alert("nihao");
  </script>
</body>
</html>

2、JavaScript 的注释

  • js 注释分为两种: 块级注释 和 单行注释。
  • 块级注释: 又叫做多行注释，作用范围是选中的多行，写作 /**/。
  • 单行注释:注释和解开注释都是 ctrl+/
  • 多行注释:ctrl+shift+/
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    /* 这是一个块级注释，
    注释内容可以是多行，
    注释在浏览器中是不会被加载 */
    // 单行注释的符号
    // 换行后就不能被注释了
  </script>
</head>
<body>
  <!-- body内注释 -->
</body>

image.png

3、JavaScript 的alert语句

  • alert: 警示、警告。
  • 作用: 在浏览器中弹出一个警示框，警示框的警示内容可以人为自定义。
  • alert 语句是一个 js 内置好的功能(函数、方法)，要想实现功能必须在 alert 关键字后面加小括号执行，自定义的内容需要传递给小括号内的参数，输出时参数位置的内容会出现 在弹框位置。
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 警示框
    alert("你好1");
    alert("你好2");
    alert("你好3");
    alert("你好4");
  </script>
</head>

- 语法
1、alert 语句作为一个函数，如果要执行，必须在后面紧跟着添加小括号。
2、alert 语句作为一个函数，小括号内部可以传递参数，根据数据类型不同，有不同的语法要求，例如文字内容(字符串)必须写在一对引号内部。
3、如果需要添加一对引号，要么是单引号，要么是双引号，不能一单一双。
4、所有的有特殊功能的符号必须是英文字符。
5、语句后面的分号必要性。
6、js 对换行、缩进、空格也不敏感。
7、如果 js 中没有特殊控制结构，代码都是从上往下、从左往右进行加载。

4、JavaScript 的prompt() 语句

  • prompt:提示。
  • 作用:弹出一个对话框，内部有一个提示语句以及一个输入框，可以在输入框中根据提示任意输入内容。
  • prompt 语句也是 js 内置的一个功能，必须加小括号执行，有两个参数可以进行传递，每个参数一般都是字符串类型，必须加引号，两个参数中间用逗号分隔，引号和逗号都必须 是英文输入法状态。
  • 第二个参数位置的值，可以删除并重新输入新的内容，甚至代码中可以不写第二个参数。
prompt("请输入您的年龄","18");
prompt("请输入您的年龄");

image.png

4、JavaScript 的console控制台

   1、在大部分浏览器中，都有一个控制台，内部可以查看 HTML、css 代码，甚至调试代码错误.
   2、浏览器中右键点击审查元素(检查)，都可以打开控制台。
   3、快捷键: F12.
   4、控制台中有一个 console(控制台) 的选项面板，在 js 中有非常重要的作用。

作用一: 帮助程序员调试程序中出现的 bug。可以提示错误的个数、错误所在的行数、错误类型。` image.png

作用二:可以在控制台中直接书写一些语句，进行执行。` image.png

作用三:js 有一个内置对象 console，内部封装了大量的属性和方法(函数)，可以通过给 console 对象打点调用方法名()、属性名方式去执行。有一个叫做 log(日志)方法，可以 实现参数位置自定义内容在控制台输出。` image.png

avatar
文章
阅读
粉丝