JavaScript交互式网页设计 •【第1章 JavaScript 基本语法】

是小鞠同学呀

已于 2022-11-28 19:15:11 修改

阅读量96

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

于 2022-11-28 18:41:53 首次发布

本文链接：https://blog.csdn.net/weixin_63078247/article/details/128084471

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

1.1 JavaScript 概述

1.1.1 JavaScript 简介

JavaScript 诞生于 1995 年，主要是进行用户输入的合法性验证

1.1.2 JavaScript 的概念和执行原理

JavaScript 是一种轻型的、解释性的脚本语言，是一种由浏览器内的解释器执行的程序语言

1.1.3 JavaScript 脚本代码的位置

通常可以在 3 个地方编写 JavaScript 的脚本代码

通常可以在 3 个地方编写 JavaScript 的脚本代码
脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件

HTML 文件混合方式
示例：

<body>
  <script type="text/javascript">
    document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
  </script>
</body>

JS 文件引用方式：

创建 JavaScript 文件，命名为demo1.js html
页面，在

示例：

<body>
  <script src="../js/demo1.js" type="text/javascript"></script>
</body>

注意：带有 src 属性的 <script> 标签不应该在 <script></script> 标签之间包含任何额外的 JavaScript 代码，否则嵌入的代码会被忽略

HTML 代码嵌入方式
将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值

<body>
  <a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>

1.2 JavaScript 核心语法

1.2.1 变量

变量有三种使用方式:

先声明再赋值如：var message; message=“hi”;
同时声明和赋值变量如：var message=“hi”;
不声明直接赋值如：message=“hi”;

变量可以不经声明而直接使用，但是这种方法很容易出错，因此不推荐使用。对变量的输出测试可以采用 alert() 弹出对话框的方式

变量命名规则:

第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
其他字符可以是字母、下划线、美元符号或数字
区分大小写
不能与关键字同名，如 while、for 和 if 等

1.2.2 数据类型

JavaScript 中有 5 种简单数据类型，也称为基本数据类型

undefined
null
boolean
number
string

另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型

数据类型	数据值
number类型	浮点数、整数
boolean类型	true、false
string类型	单引号或双引号引起来的若干字符
null类型	只存在一个值null，表示对象不存在
undefined类型	只存在一个值undefined，表示未赋值或未声明的变量

示例：

<body>
  <script type="text/javascript">
    var  str="message";
    document.write(typeof  str+"<br/>");
    var  other;
    document.write(typeof  other+"<br/>");
    var  numb=10.0;
    document.write(typeof  numb+"<br/>");
    var  date=new  Date();
    document.write(typeof  date+"<br/>");
    var  bool=1<2;
    document.write(typeof  bool);
  </script>
</body>

1.2.3 JavaScript 注释

JavaScript 与很多语言一样，如 Java、C# 都支持同样的注释形式

单行注释：//
多行注释： /* 注释内容 */

示例：

// 声明并初始化一个变量
var v = 5;
/* 使用 for 循环输出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/

1.3 顺序结构和选择结构

1.3.1 顺序结构

顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行

示例：

<body>
  <script type="text/javascript">
    document.write(" 程序开始执行……<br/>");
    document.write(" 程序正在执行中……<br/>");
    document.write(" 程序执行完毕……<br/>");
  </script>
</body>

1.3.2 选择结构

选择结构：需要根据特定的条件执行不同的语句
JavaScript中选择结构使用if语句和switch语句
if 语句有 3 种形式：单分支、双分支和多分支

1、if单分支语句：

if( 条件表达式 ) {
  语句或语句块
}

2、if 双分支语句

if( 条件表达式 ) {
  语句或语句块 1
} else{
  语句或语句块 2
}

3、if 多分支语句

if( 条件表达式 1){
  语句或语句块 1
}
else  if( 条件表达式 2){
  语句或语句块 2
}......
else  if( 条件表达式 n){
  语句或语句块 n
}
else{
  语句或语句块 n+1
}

4、switch 语句

switch（表达式）{
  case 取值 1：语句或语句块 1;  break;
  case 取值 2：语句或语句块 2;  break;
  ......
  case 取值 n：语句或语句块 n;  break;
  default: 语句或语句块 n+1;  break;
}

1.4 循环结构

1.4.1 while 循环语句

JavaScript中，循环结构有 while 循环、do-while 循环和 for 循环
1、while 循环语句

while（条件表达式）{
  语句或语句块
}

2、do-while循环语句

do{
  语句或语句块
}while( 条件表达式 );

3、for循环语句

for( 初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式 ){
  语句或语句块
}

1.4.4 break 语句和 continue 语句

JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环

是小鞠同学呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript交互式网页设计 •【第1章 JavaScript 基本语法】

第1章 JavaScript 基本语法
复制链接

扫一扫

专栏目录

JavaScript交互式网页设计 •【第1章 JavaScript 基本语法】

JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

1.1 JavaScript 概述

1.1.1 JavaScript 简介

1.1.2 JavaScript 的概念和执行原理

1.1.3 JavaScript 脚本代码的位置

1.2 JavaScript 核心语法

1.2.1 变量

1.2.2 数据类型

1.2.3 JavaScript 注释

1.3 顺序结构和选择结构

1.3.1 顺序结构

1.3.2 选择结构

1.4 循环结构

1.4.1 while 循环语句

1.4.4 break 语句和 continue 语句

“相关推荐”对你有帮助么？