web前端学习(三十二)——JavaScript语法、语句输出及注释的相关设置

简介: web前端学习(三十二)——JavaScript语法、语句输出及注释的相关设置

1.JS语句


JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

分号用于分隔 JavaScript 语句,通常我们在每条可执行的语句结尾添加分号,使用分号的另一用处是在一行中编写多条语句。例如:👇👇👇

(您也可能看到不带有分号的案例。在 JavaScript 中,用分号来结束语句是可选的。)

a=5;
b=10;
c=a+b;
等价于:
a=5;b=10;c=a+b;

JavaScript代码是 JavaScript 语句的序列,浏览器按照编写顺序依次执行每条语句。

JavaScript可以分批地组合起来,代码块以左花括号开始,以右花括号结束,代码块的作用是一并地执行语句序列。

JavaScript会忽略多余的空格。可以向脚本添加空格,来提高其可读性。

JavaScript可以在文本字符串中使用反斜杠对代码行进行换行。

<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="utf-8"> 
    <title>JS简单学习</title> 
  </head>
  <body>
    <script>
      document.write("你好 \
      世界!!!");
    </script>
  </body>
</html>

2.JS语句标识符


语句

描述

break

用于跳出循环。

catch

语句块,在 try 语句块执行出错时执行 catch 语句块。

continue

跳过循环中的一个迭代。

do ... while

执行一个语句块,在条件语句为 true 时继续执行该语句块。

for

在条件语句为 true 时,可以将代码块执行指定的次数。

for ... in

用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

function

定义一个函数

if ... else

用于基于不同的条件来执行不同的动作。

return

退出函数

switch

用于基于不同的条件来执行不同的动作。

throw

抛出(生成)错误

try

实现错误处理,与 catch 一同使用。

var

声明一个变量。

while

当条件语句为 true 时,执行语句块。

3.JS输出显示数据


JavaScript没有任何打印或者输出的函数。

JavaScript可以通过不同的方式来输出数据:

·       使用 window.alert() 弹出警告框。

·       使用 document.write() 方法将内容写到 HTML 文档中。

·       使用 innerHTML 写入到 HTML 元素。

·       使用 console.log() 写入到浏览器的控制台。


3.1 window.alert()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个页面</h1>
    <p>使用 window.alert() 弹出警告框</p>
    <script>
      window.alert("请继续浏览其他网页!!!");
    </script>
  </body>
</html>

3.2 document.write()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落</p>
    <script>
      document.write(Date());
    </script>
  </body>
</html>

3.3 innerHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落</p>
    <script>
      document.getElementById("demo").innerHTML="段落已被修改!!!";
    </script>
  </body>
</html>

3.4 console.log()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>
      浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
    </p>
    <script>
      a=5;
      b=7;
      c=a+b;
      console.log(c);
    </script>
  </body>
</html>

4.JS语法


4.1 JS字面量 

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。例如:3.141024512e5

字符串(String)字面量 可以使用单引号或双引号。例如:'Hello'"Hello"

表达式字面量 用于计算。例如:5+66*7

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{Name: "zhangsan", Sex: "", age: 25, Hobby: "sleep"}

函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}


4.2 JS变量 

在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量,使用等号来为变量赋值。


var x,y;
x=50;
y=60;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p id="Number1"></p>
    <p id="Number2"></p>
    <p id="String"></p>
    <p id="Array"></p>
    <p id="Object"></p>
    <script>
      var length = 16;                                     // Number 通过数字字面量赋值
      var points = length * 10;                            // Number 通过表达式字面量赋值
      var name = "zhangsan";                               // String 通过字符串字面量赋值
      var color = ["red", "green", "blue"];                // Array  通过数组字面量赋值
      var web = {first:"HTML", second:"CSS", third:"JS"};  // Object 通过对象字面量赋值
      document.getElementById("Number1").innerHTML=length;
      document.getElementById("Number2").innerHTML=points;
      document.getElementById("String").innerHTML=name;
      document.getElementById("Array").innerHTML=color;
      document.getElementById("Object").innerHTML=web.first + " " + web.second + " " + web.third;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p id="demo"></p>
    <script>
      var a,str,x;
      a=666;
      str="中国";
      x=str + a;
      document.getElementById("demo").innerHTML=x;
    </script>
  </body>
</html>


4.3 JS操作符

类型

实例

描述

赋值,算术和位运算符

=   +   -   *   /

JS 运算符中描述

条件,比较及逻辑运算符

==   !=  <   > 

JS 比较运算符中描述


4.4 JS关键字

abstract

else

instanceof

super

boolean

enum

int

switch

break

export

interface

synchronized

byte

extends

let

this

case

false

long

throw

catch

final

native

throws

char

finally

new

transient

class

float

null

true

const

for

package

try

continue

function

private

typeof

debugger

goto

protected

var

default

if

public

void

delete

implements

return

volatile

do

import

short

while

double

in

static

with


4.5 JS字母大小写

JavaScript对大小写是敏感的。当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数getElementByIdgetElementbyID是不同的。同样,变量myVariableMyVariable也是不同的。


4.6 JS字符集 

JavaScript使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符。

5.JS注释



JavaScript不会执行注释,我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。注释用于阻止其中一条代码行的执行(可用于调试)


5.1 单行注释 


单行注释以 // 开头。

// 输出标题:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:
document.getElementById("myP").innerHTML="This is my first paragraph.";

5.2 多行注释 

多行注释以 /* 开始,以 */ 结尾。 

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";


5.3 行末注释 

 var length = 16;            // Number 通过数字字面量赋值
  var points = length * 10;   // Number 通过表达式字面量赋值
相关文章
|
7月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
637 108
|
7月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
696 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
639 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
11月前
|
JavaScript 前端开发 API
|
9月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
148 2
|
9月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
267 1
|
11月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
582 28
|
11月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
413 8
|
12月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
11810 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
377 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布