JavaScript基础

JavaScript基础笔记总结

一、本章目标与任务

1. 学习目标

• 掌握JavaScript的组成
• 掌握JavaScript的基本语法
• 会定义和使用函数
• 会使用工具进行代码调试

2. 核心任务

• 统计包含“a”或“A”的字符串个数
• 使用工具调试程序
• 实现两个数的四则运算（函数实现）
• 统计考试科目的总成绩（含输入校验）

二、JavaScript基础认知

1. 学习意义

• 表单验证：减轻服务器端压力（如QQ注册页的昵称、密码格式校验）
• 页面动态效果：实现交互功能（如京东商品分类菜单、任务系统交互）

2. 定义与特点

• 定义：基于对象、事件驱动且具有安全性能的脚本语言
• 核心特点：
  • 可向HTML页面添加交互行为
  • 语法类似Java，属于脚本语言
  • 解释性执行（边执行边解释，无需编译）

3. 组成部分

JavaScript由三部分核心构成，缺一不可：

三、JavaScript基础结构与执行

1. 基本结构

通过标签嵌入HTML，语法如下：

script type="text/javascript">
    !-- （兼容旧浏览器，可选） -->
    JavaScript语句; // 核心代码
script>

• 标签可放在HTML的或中，需保证代码在使用前加载完成

2. 执行原理

1. 浏览器向服务器发送“含JavaScript的页面”请求
2. 服务器返回响应（包含HTML和JavaScript代码）
3. 浏览器解析HTML标签和JavaScript代码，执行交互逻辑

3. 引用方式

共3种常用引用方式，适用于不同场景：

四、JavaScript核心语法

1. 变量

• 声明与赋值：用var关键字声明，支持3种方式：
  1. 先声明后赋值：var width; width = 5;
  2. 声明时赋值：var catName = "皮皮"; var x, y, z = 10;
  3. 不声明直接赋值：width = 5;（不推荐，易出错且难排错）

2. 数据类型

共5种基本数据类型，需注意类型差异：

• typeof运算符：检测变量类型，返回值对应表：

  变量情况	typeof返回值
  声明未赋值	“undefined”
  字符串	“string”
  布尔值	“boolean”
  数字	“number”
  对象/数组/null	“object”

3. 常用对象与数组

（1）String对象

• 核心属性：length（获取字符串长度）
  示例：var str = "this is JS"; var len = str.length; // len=10
• 常用方法：

  方法	说明	示例
  charAt(index)	返回指定位置字符	str.charAt(2); // 返回"s"
  indexOf(str, index)	查找字符串首次出现位置	str.indexOf("is"); // 返回5
  substring(i1, i2)	返回i1到i2的子串（含i1，不含i2）	str.substring(0,4); // 返回"this"
  split(str)	按分隔符分割为数组	str.split(" "); // 返回["this","is","JS"]

（2）数组

• 创建与赋值：
  1. 直接初始化：var fruit = new Array("apple", "orange", "peach");
  2. 先指定长度再赋值：var fruit = new Array(3); fruit[0] = "apple";
• 访问方式：数组名[下标]（下标从0开始），示例：fruit[1]; // 返回"orange"
• 核心属性与方法：

  类别	名称	说明	示例
  属性	length	设置/返回元素个数	fruit.length; // 返回3
  方法	join(分隔符)	拼接元素为字符串	fruit.join("-"); // 返回"apple-orange-peach"
  方法	sort()	对数组排序（默认字母序）	fruit.sort(); // 排序后数组
  方法	push(元素)	末尾添加元素，返回新长度	fruit.push("banana"); // 返回4

4. 运算符

按功能分为4类，需注意优先级（算术>比较>逻辑>赋值）：

5. 控制语句

（1）条件语句

• if-else：适用于二分支判断

  if (age >= 18) {
      alert("成年");
  } else {
      alert("未成年");
  }
  

• switch：适用于多分支判断（需加break避免穿透）

  switch (grade) {
      case "A": alert("优秀"); break;
      case "B": alert("良好"); break;
      default: alert("及格");
  }
  

（2）循环语句

• for循环：适用于已知循环次数

  for (var i=0; i5; i++) {
      document.write(i); // 输出0-4
  }
  

• while循环：适用于未知循环次数

  var i=0;
  while (i5) {
      document.write(i); // 输出0-4
      i++;
  }
  

• for-in循环：适用于遍历数组/对象

  var fruit = ["apple", "orange"];
  for (var i in fruit) {
      document.write(fruit[i]); // 输出apple、orange
  }
  

（3）循环中断

• break：直接跳出整个循环

  for (var i=0; i5; i++) {
      if (i==3) break; // i=3时跳出，输出0-2
      document.write(i);
  }
  

• continue：跳过当前循环，进入下一次

  for (var i=0; i5; i++) {
      if (i==3) continue; // 跳过i=3，输出0-2、4-5
      document.write(i);
  }
  

6. 注释

用于代码说明，不影响执行：

• 单行注释：// 这是单行注释（从//到行末）
  示例：alert("注册成功"); // 弹出注册提示
• 多行注释：/* 这是多行注释 */（包裹多行内容）
  示例：

  /*
  功能：循环输出Hello World
  次数：5次
  */
  for (var i=0; i5; i++) {
      document.write("Hello World");
  }
  

7. 输入与输出

• alert()：弹出提示框（无返回值）
  语法：alert("提示信息");
• prompt()：弹出输入框（返回用户输入内容）
  语法：prompt("提示信息", "默认值");
  示例：var color = prompt("请输入喜欢的颜色", "红色");

8. 语法约定

• 代码区分大小写（如var a和var A是两个变量）
• 变量/对象/函数名：建议使用“驼峰命名法”（如userName）
• 语句结尾建议加分号（虽然可省略，但规范）

五、函数

1. 函数基础

• 定义：类似Java的方法，是完成特定任务的代码块，无需绑定类
• 分类：系统函数（JS内置）、自定义函数（用户编写）

2. 常用系统函数

3. 自定义函数

（1）定义语法

function 函数名(参数1, 参数2, ...) {
    // 函数体代码
    [return 返回值;] // 可选，无返回值则省略
}

• 无参函数：function study() { alert("学习JS"); }
• 有参函数：function add(a, b) { return a + b; }

（2）调用方式

通常与HTML元素事件绑定，语法：事件名 = "函数名(参数)";

• 无参调用示例：

  input type="button" value="点击调用" onclick="study()" />
  

• 有参调用示例（结合prompt输入）：

  input type="button" value="输入次数" onclick="study(prompt('请输入显示次数',''))" />
  

4. 变量作用域

• 全局变量：在函数外声明，整个页面可访问（如var i=20;在所有函数中可用）
• 局部变量：在函数内声明（用var），仅函数内可访问（如函数内var i=5;仅当前函数可用）
• 示例分析：

  var i=20; // 全局变量
  function first() {
      var i=5; // 局部变量（与全局变量同名，优先使用局部）
      for(var j=0;ji;j++) { document.write(j); } // 输出0-4
  }
  function second() {
      var t=prompt("输入一个数","");
      if(t>i) document.write(t); // i为全局变量20，输入67则输出67
      first(); // 调用first，输出0-4
  }
  

  最终输出：67 0 1 2 3 4

六、事件与调试

1. 常用事件

事件是用户/浏览器的操作触发点，常用事件表：

2. 程序调试

两种核心调试方式，结合使用效率更高：

（1）Chrome开发人员工具

• 核心功能按钮（调试面板）：
  • 停止断点调试
  • 单步调试（不进入函数）
  • 单步调试（进入函数）
  • 跳出当前函数
  • 禁用所有断点
• 用法：在代码行号处点击设置断点，刷新页面触发调试

（2）alert()方法

• 原理：在关键代码处插入alert(变量值)，通过弹窗查看变量状态
• 适用场景：简单调试，快速定位变量异常

文章来源于互联网:JavaScript基础

相关推荐: Kafka架构以及组件讲解

好处 作为消息系统来说，第一肯定是解耦，解除了生产者和消费者的直接联系，通过 MQ 来作为媒介。MQ 来保证消息的可靠性和持久性等，并且扩展性和可恢复性高。 选型 RabbitMQ：主要是数据一致性、稳定性和可靠性要求高，对性能和吞吐量的考量是其次。属于重量级…