JavaScript笔记 --- part 1

JS概念

JS基础概念

• JS是一种运行在客户端(浏览器)的编程语言, 实现人机交换结果

• 作用:

  • 网页特效
  • 表单验证
  • 数据交互
  • 服务端编程(node.js)

• JS的组成

  • ECMAScript—javaScript语言基础
  • Web APIs—(DOM: 页面文档对象模型)(BOM: 浏览器对象模型)

JS书写

• 位置

  • 内部: 写到< /body >上方

  • 外部: 以.js结尾的文件, 然后引入至html中, 引入位置与内部一致

  • 内联: 类似于引入CSS样式

    f**k me
    

• 注释写法: 与C语言一致, 即 // 和 /* */

• 结束符: 以 ; 为结束符, 在实际开发中可写可不写, 但要统一

字面量

在计算机科学中, 字面量是在计算机中描述 事和物

JS语法

输入和输出

• 输出语法

  document.write("
   输出至文档 
  ");
  
  alert("警示框");
  
  console.log("控制台打印");
  

• 输入语法

  prompt('在警示框内输入');
  

变量基础

• 定义

  • 用来存储数据的"盒子"
  • 变量是容器, 而非数据

• 使用(与C语言差不多)

  1. 声明变量:

      let age;
     

  2. 赋值变量:

      age = 18;
     

• 命名规则与规范

  • 规则:

    • 不能用关键字
    • 只能由下划线、字母、数字、$组成, 不能数字开头
    • 字母严格区分大小写

  • 规范:

    • 起名要有意义, 让人能看的懂
    • 起名遵守小驼峰命名法

• var的缺点

  1. 可以先试用, 再声明(不合理)
  2. var可以重复声明
  3. 比如变量提升、全局变量、没有块级作用域等

数组

• 数组是一种将一组数据存储在单个变量名下的优雅方式

  let numArr = [1, 2, 3, 4, 5];
  

• 数组是有序的, 编号从0开始

  console.log(numArr[0]);       //打印1
  

• 数组内的数据类型是任意的, 不必一致

• 用.length属性获得数组的长度

  console.log(numArr.length);  
  

常量基础

• 定义: 使用const声明的变量称为常量, 声明时必须赋值, 不允许再次赋值

  const PI = 3.14;
  

数据类型

• 意义:

  1. 更加充分利用高效的利用内存
  2. 更加方便牛马使用数据

基本数据类型

• JS是一门弱数据类型的语言, 不同于java

• 有以下几种类型

  1. number
  2. string
  3. boolean
  4. undefined
  5. null

• 检测数据类型

  typeof(X);
  或
  typeof X;
  

• 转换数据类型

  • 隐式转换

    1. ‘+’ 两边只要有一个是字符串, 就会把另外一个转为字符串, 但+"123"的操作会把字符型转换为数字型
    2. ‘-’, ‘*’, ‘/’, '%'等运算符, 会把字符串转换为数字类型

  • 显式转换

    1. Number(数据) — 转化为数字型
    2. parseInt(数据) — 只保留整数
    3. parseFloat(数据) — 保留小数

数字类型(number)

• 算术运算符: + 、- 、* 、/ 、% (优先级为日常运算)

• 当运算时有错误的数据类型会输出NaN, 任何对NaN的操作都会返回NaN

字符串类型(string)

• 通过单引号, 双引号, 反引号包裹的数据为字符串类型

• 引号之间可以相互嵌套, 但不能相同嵌套

• 可以使用 + 来拼接字符串(数字相加, 字符相连, 字符串 + 数字 = 字符串)

• 当然, JS和C语言一样, 可以格式化输出

  let str = `javaScript`;
  console.log("%s", str);
  

• 模版字符串, 相较于格式化输出更方便, 字符串必须用反引号, 变量放入${}内

  console.log(`这是${str}`);
  

布尔类型(bool)

• 只有两个值, true和false, 表示判断真假

未定义类型

• 只有一个值—undefined, 当声明变量时却没赋值, 则这个变量为未定义类型

null(空类型)

• 只有一个值—null, 把null作为尚未创建的对象

运算符

1. 赋值运算符
2. 自增自减运算符
3. 比较运算符
4. 逻辑运算符

赋值运算符

• 对变量进行赋值的运算符, 如 " = ", 其他赋值运算(+=)和C语言大差不差

自增自减运算符

• 自增/自减运算符" ++ ", " – ". 用法和C语言相同

比较运算符

• " === " 表示左右值和类型是否全等, " !== " 表示左右两边是否不全等

• " == "运算符也会进行隐式转换, 转换为数字型

• NaN不等于任何类型和值, 包括它自己, 参与它的运算返回值均为false

• 比较结果为bool类型

• 字符串比较, 是比较的字符对应的ascll码

逻辑运算符

• 包括" && ", " || ", " ! ", 用法和C语言相同

语句和结构

选择(分支)结构

if语句

let num = +prompt("请输入一个数字");
if(num % 4 === 0 && num % 100 !== 0){
    alert("true");
}else{
    alert("false");
}

switch语句

注: switch匹配时是全等, 不只是数值相等

let num1 = +prompt("输入第一个数字");
let num2 = +prompt("输入第二个数字");

let sp = prompt("输入运算符");

switch (sp) {
	case '+':
		alert(num1 + num2);
		break;
	case '-':
		alert(num1 - num2);
		break;
	case '*':
		alert(num1 * num2);
		break;
	case '/':
		alert(num1 / num2);
		break;
	default:
		console.log("运算符错误");

	}

循环语句

while语句

let num = 0;
let cut = 0;
while (cut < 10) {
	num += 2;
	cut++;
}
alert(num);

• 循环三要素

  1. 变量起始值
  2. 终止条件
  3. 变量变化量

• break语句: 跳出循环

• continue语句: 跳过本次循环, 继续下一次循环

for语句

注: 在遍历数组时, 数组越界时会打印undefined

for (let i = 0; i < 10; i++) {
	console.log(i);
	}

• for语句三要素

  1. 初始化
  2. 循环条件
  3. 变化量

• 循环嵌套

    for (let i = 0; i < 10; i++) {
    	for (let j = 0; j < 10; j++) {
    		console.log(i + " " + j);
    	}
    }