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 通过表达式字面量赋值
相关文章
|
2月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
180 0
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
141 0
|
2月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
3月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
428 184
|
2月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
6月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
2月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
7月前
|
JavaScript 前端开发 API
|
5月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
114 2

热门文章

最新文章

下一篇
oss云网关配置