文章目录

• 1. 初始JavaScript
• • 1.1 什么是 JavaScript
  • 1.2 发展历史
  • 1.3 JavaScript 和 HTML 和 CSS 之间的关系
  • 1.4 第一个程序
• 2. JavaScript 的书写形式
• • 1. 行内式
  • 2. 内嵌式
  • 3. 外部式
• 3. JavaScript 基本语法
• • 3.1 注释
  • 3.2 输入: prompt
  • 3.3 输出: alert
  • 3.4 输出: console.log
  • 3.5 其他注意事项
• 4. JavaScript 语法概述
• • 4.1 基本用法
  • • 变量声明
    • 变量的使用
  • 4.2 理解动态类型
  • 4.3 基本数据类型
  • • ① number 数字类型
    • • 数字进制表示
      • 浮点型数据
      • 特殊的数字值
    • ② string 字符串类型
    • • 基本规则
      • 转义字符
      • 求长度
      • 字符串的拼接
    • ③ boolean 布尔类型
    • ④ undefined 未定义数据类型
    • ⑤ null 空值类型
• 5. 运算符
• • 5.1 算术运算符
  • 5.2 赋值运算符 & 复合赋值运算符
  • 5.3 自增自减运算符
  • 5.4 比较运算符
  • 5.5 逻辑运算符
  • 5.6 位运算
  • 5.7 移位运算
• 6. JavaScript 基本语句
• • 6.1 条件判断语句
  • • if 语句
    • 三元表达式
    • switch 语句
  • 6.2 循环语句
  • • while 循环
    • for 循环
• 7. 数组
• • 7.1 数组的创建
  • 7.2 获取数组元素
  • 7.3 新增数组元素
  • • 1. 通过修改 length 新增
    • 2. 通过下标新增
    • 3. 使用 push 进行追加元素
  • 7.4 删除数组中的元素
• 8. 函数
• • 8.1 语法格式
  • 8.2 关于参数个数
  • 8.3 函数表达式
• 9. 对象
• • 9.1 使用 字面量 创建对象
  • 9.2 使用 new Object 创建对象
  • 9.3 使用 构造函数 创建对象
  • • 基本语法:
    • 代码示例:

1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS)

• 是世界上最流行的编程语言之一
• 是一个脚本语言, 通过解释器运行
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行

1.2 发展历史 JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)
1.3 JavaScript 和 HTML 和 CSS 之间的关系

• HTML: 网页的结构(骨)
• CSS: 网页的表现(皮)
• JavaScript: 网页的行为(魂)

1.4 第一个程序

> alert("hello");

文章图片

2. JavaScript 的书写形式 1. 行内式 直接嵌入到 html 元素内部

点击之后会显示提示框

文章图片

2. 内嵌式 写到 script 标签中

> alert("hello world");

文章图片

3. 外部式 写到单独的 .js 文件中

='1.js'>

1.js代码

alert('hello');

文章图片

3. JavaScript 基本语法 3.1 注释 **单行注释: ** //
**多行注释: ** /* */

// 单行注释 /* 多行注释 多行注释 */

3.2 输入: prompt 弹出一个输入框

> let name = prompt("请输入你的姓名"); alert(name);

文章图片


文章图片

3.3 输出: alert 弹出一个警告框

> alert('hello');

文章图片

3.4 输出: console.log 在控制台打印一个日志

> console.log("这是打印日志的");

文章图片

在浏览器中按 F12 ====> 找到 Console 窗口
这里就是显示日志的

3.5 其他注意事项

1. .表示取对象中的某个属性或者方法. 可以直观理解成 “的”. console.log 就可以理解成: 使用 “控制台” 对象 “的” log方法
2. 大小写敏感,JavaScript 对字母的大小写敏感.例如: username 和 userName是两个不同的变量
3. 每行结尾的分号,JavaScript中并不要求必须使用分号(; )作为语句结束的标记.
4. JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示
5. let 和 var的区别 参考文章: 具体文章

4. JavaScript 语法概述 4.1 基本用法 变量声明

let a = 20; let b = "helloworld";

变量的使用

let name = prompt("请输入你的姓名"); let age = prompt("请输入你的年龄"); let cl = prompt("请输入你的班级"); console.log(name); console.log(age); console.log(cl);

文章图片

4.2 理解动态类型 Java是一种静态类型,一旦开始定义了类型，后面就无法改变了
而JavaScript是动态类型，类型可以改变。

> let a = 20; // 数值类型 console.log(a); a = "helloworld"; // 字符类型 console.log(a);

文章图片

4.3 基本数据类型 JS 中 内置的几种类型

类型	描述
number	数字. 不区分整数和小数.
boolean	true 真,false 假.
string	字符串类型.
undefined	只有唯一的值 undefin. 表示未定义的值.
null	只有唯一的值null.表示空值

① number 数字类型
JS 中是不区分整数和浮点数,统一都使用"数字类型"来表示
数字进制表示 二进制: 以 0b 或 0B开头
八进制: 以 0 开头
十六进制: 以 0x 或 0X 开头

> // 十六进制 以 "0x" 或 "0X" 开头 let a = 0xff; let b = 0X123; // 八进制 以 "0" 开头 let c = 07; // 二进制 以 "0b" 或 "0B" 开头 let d = 0b1010; let e = 0B1111;

浮点型数据 科学计数法的表示方法,在实数后面跟随字母e或者E,后面加上一个带正号或负号的整数指数,正号可以省略.

> // 普通的浮点型 let a = 1.2; let b = 6e3; // 科学计数法的表示 let c = 7e+3; let d = 8E-3;

特殊的数字值

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN: (Not a Number)表示当前的结果不是一个数字.

> let max = Number.MAX_VALUE; // 得到 Infinity console.log(max * 2); // 得到 -Infinity console.log(-max * 2); // 得到 NaN console.log('hehe' - 10);

文章图片

② string 字符串类型
基本规则 字符串字面值需要使用引号引起来, 单引号双引号均可

> let a = 'hello'; let b = "hello"; let c = hello; // error 这里出错

包含字符串的引号必须匹配,如果字符串前面使用的是双引号,那么在字符串前面使用的是双引号,那么在字符串后面也必须使用双引号,反之都使用单引号.
转义字符

转义字符	描述
\b	退格
\n	换行符
\t	水平制表符,Tab空格
\f	换页
’	单引号
"	双引号
\v	垂直字符表
\r	回车符
\	反斜杠

求长度 使用String的length属性即可

> let a = "hehe"; let b = "哈哈"; console.log(a.length); console.log(b.length);

文章图片

字符串的拼接 使用 + 进行字符串拼接

> let a = "hehe"; console.log(a + "world"); console.log(a + 10);

文章图片

③ boolean 布尔类型

> console.log(1 == 1); // 下面的写法不科学 不建议使用 console.log(true + 1); console.log(false + 1);

文章图片

④ undefined 未定义数据类型

> let a; console.log(a); // undefined 和 字符相加 console.log("hello" + a); // undefined 和 数字相加 console.log(1 + a);

文章图片

⑤ null 空值类型

> let a = null; console.log(a);

文章图片

5. 运算符 5.1 算术运算符 + 加 - 减 * 乘 / 除 % 求模

> console.log(1+2); console.log(3-2); console.log(2*3); console.log(4/4); console.log(4%3);

文章图片

5.2 赋值运算符 & 复合赋值运算符 = += -= *= /= %=

> let a = 1; console.log(a); a+=1; console.log(a); a-=1; console.log(a); a*=2; console.log(a); a/=2; console.log(a); a%=2; console.log(a);

文章图片

5.3 自增自减运算符 ++: 自增1 --: 自减1

> let a = 1; // 前置的时候 先加1 再使用 // 后置的时候 先使用 再加1 a++; console.log(++a); a--; console.log(--a);

文章图片

5.4 比较运算符 < 小于
> 大于
<= 小于等于
>= 大于等于
==比较相等(会进行隐式类型转换)
!= 不等于
===比较相等(不会进行隐式类型转换)
!== (不会进行隐式类型转换)

> console.log("5" == 5); console.log("5" === 5);

文章图片

5.5 逻辑运算符

• && 与: 一假则假
• || 或: 一真则真
• ! 非

5.6 位运算

• & 按位与 同为1时为1,否则为0
• | 按位或 同为0时为1,否则为0;
• ~ 按位取反 当是1就取0,是0就取1
• ^ 按位异或 相同就为0,相异为1

> // 1 =>001 // 3 =>011 console.log( 1 & 3); console.log( 1 | 3); console.log( 1 ^ 3);

文章图片

5.7 移位运算

• << 左移
• >> 有符号右移(算术右移)
• >>> 无符号右移(逻辑右移)

6. JavaScript 基本语句 6.1 条件判断语句 if 语句

// 形式1 if (条件) { 语句 } // 形式2 if (条件) { 语句1 } else { 语句2 } // 形式3 if (条件1) { 语句1 } else if (条件2) { 语句2 } else if .... { 语句... } else { 语句N }

三元表达式
是 if else 的简化写法.
条件 ? 表达式1 : 表达式2
switch 语句

switch (表达式) { case 值1: 语句1; break; case 值2: 语句2: break; default: 语句N; }

6.2 循环语句 while 循环

while (条件) { 循环体; }

continue 结束当前这次循环,继续其他循环
break 结束整个循环
for 循环

for (表达式1; 表达式2; 表达式3) { 循环体 }

7. 数组 7.1 数组的创建 使用 new 关键字创建

// Array 的 A 要大写 let arr = new Array();

let arr = []; let arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

7.2 获取数组元素

> let arr =[1,2,3]; console.log(arr[0]); console.log(arr[-1]); console.log(arr[3]);

文章图片

7.3 新增数组元素 1. 通过修改 length 新增

> let arr = [1,2,3]; arr.length = 6; console.log(arr);

文章图片

2. 通过下标新增

> let arr = [1,2,3]; arr[5] = 6; console.log(arr);

文章图片

3. 使用 push 进行追加元素

> let arr = [1,2,3]; let newarr =[]; for(var i = 0; i < arr.length; i++){ newarr.push(arr[i]); } console.log(newarr);

文章图片

7.4 删除数组中的元素

> let arr = [1,2,3]; arr.splice(0,1); console.log(arr);

文章图片

8. 函数 8.1 语法格式

// 创建函数/函数声明/函数定义 function 函数名(形参列表) { 函数体 return 返回值; } // 函数调用 函数名(实参列表) // 不考虑返回值 返回值 = 函数名(实参列表) // 考虑返回值

代码示例:

> function sayHello() { console.log("hello"); } sayHello();

文章图片

8.2 关于参数个数 实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配
代码示例:

> function Add(a,b,c) { a = a | 0; b = b | 0; c = c | 0; return a + b + c; } console.log(Add(1,2,3)); console.log(Add(1,2));

【前端|前端 --- JavaScript 语法基础】
文章图片

8.3 函数表达式 另外一种函数的定义方式

> let add = function(a,b) { let sum = 0; for (let i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } console.log(add(10,20)); console.log(add(1,2,3,4,5)); console.log(typeof add);

文章图片

9. 对象 在 JS 中, 字符串, 数值, 数组, 函数都是对象.
9.1 使用 字面量 创建对象 创建对象 代码:

var student = { name:'蔡徐坤', heigth: 200, weight: 300, sayHello: function() { console.log("hello"); } }

使用对象的属性和方法 代码:

console.log(student.name); console.log(student.heigth); student.sayHello();

文章图片

9.2 使用 new Object 创建对象

> var student = new Object(); student.name = "蔡徐坤"; student.height = 200; student.weight = 300; student.sayHello = function() { console.log("hello"); }console.log(student.name); console.log(student.weight); student.sayHello();

文章图片

9.3 使用 构造函数 创建对象 基本语法:

function 构造函数名(形参) { this.属性 = 值; this.方法 = function... } var obj = new 构造函数名(实参);

代码示例:

> function Student(name,id,say){ this.name = name; this.id = id; this.say = function() { console.log(say); } }let xiaoMing = new Student('小明',1,'hello'); let xiaoHong = new Student('小红',2,'嗨害嗨'); let xiaoQiang = new Student('小强',3,'你好!'); console.log(xiaoMing); console.log(xiaoHong); xiaoQiang.say();

文章图片

推荐阅读

• 

  最近感觉得了外阴瘙痒，请问一下这个症状是怎么形成的！
• 

  抗原自测盒使用方法
• 

  详细教程及注意事项 佳能ts6080清零废墨
• 

  表分析影响insert,SWOT分析表
• 

  重庆蛋糕烘焙培训哪里好 烘焙培训培训哪里好
• 

  脊髓型颈椎病怎么治 脊髓型颈椎病是什么意思
• 

  烤红薯需要什么配方吗
• 

  松下FZ平板电脑电池续航短的原因是什么
• 

  中大型材塑钢窗多少一平 普通塑钢窗一平方价格
• 

  比115更高的投诉电话 怎么投诉联通公司
• 

  复旦大学的校训是什么意思 复旦大学的校训是什么
• 

  小白windows7系统32位旗舰版最新推荐
• 

  海尔冰箱质保期及维修指南：了解海尔冰箱质保期、常见故障及维修方法
• 

  阿里巴巴采购津贴是什么意思
• 

  佳能g2810怎么轻松更换墨盒，让你的打印机焕发新生
• 

  南昌第六医院进口2价宫颈癌疫苗专场预约
• 

  西瓜糖分高吗西瓜的糖分含量高吗
• 

  中年人怎么饮食才能够防止早衰
• 

  结婚倒茶的四言八句
• 

  数据库 筛选 mysql数据库筛选

• 前端|前端 --- JavaScript WebAPI
• js 截取文件后缀名
• 3D 沙盒游戏之人物的点击行走移动
• 在setTimeout里设置倒数5秒计时的方法
• CSS|Web前端入门之CSS基础笔记
• html网页设计作业|web期末作业设计网页 HTML5+CSS大作业——明星个人主页(15页) 创作主页
• web大学生个人网站作业模|html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
• Vue|跨域问题(has been blocked by CORS policy:Response……)原因及解决办法
• 数据传输POST心法分享，做前端的你还解决不了这个bug（）