前端学习记录 —— JavaScript(一)
前端学习记录 —— JavaScript(一)
- 前言
- 一、初识 JavaScript
- JavaScript 的特点
- JavaScript的作用
- 编程语言与标记语言的区别
- HTML/CSS/JS 的关系
- JavaScript 组成
- 二、浏览器怎么执行 JS
- 三、JS 的三种书写方式:行内、内嵌、外部
- 1. 行内式 JS
- 2. 内嵌 JS
- 3. 外部 JS 文件
- 四、JS 基本语法
- 1. JS 注释
- 2. 变量的使用
- 声明变量的特殊情况
- 变量的命名方法
- 3. JS 输入与输出
- 4. 数据类型
- Number 数字型
- 数字型范围与特殊值
- 判断非数字 isNaN()
- String 字符串型
- 1. 字符串转义符
- 2. 字符串长度 str.length()
- 3. 字符串拼接
- Boolean
- Undefined 和 Null
- 判断数据类型 typeof
- 数据类型转换
- 四、运算符
- 五、流程控制
- 1. 分支流程控制 if
- 2.分支流程控制switch
- switch 与 if else的区别
- 3. 三元运算符 ?:
- 4. 循环结构
- for 循环
- while循环
- do-while循环
- continue、break」
前言
本博文仅作为本人学习总结使用;本章介绍有 JS 输入输出、流程控制的三种结构
一、初识 JavaScript
「创始人」布兰登·艾奇(Brendan Eich),起初命名为LiveScript后来与Sun公司合作改名为JavaScript。
「JavaScript」运行在客户端的脚本语言,不需要编译,由 js 解释器(js引擎)逐行解释执行。Node.js 也可以用于服务器端编程。
JavaScript 的特点
脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
JavaScript的作用
- 表单动态校验(密码强度检测)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)
编程语言与标记语言的区别
编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令,这是主动的。
标记语言(html)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。
HTML/CSS/JS 的关系
- HTML/CSS 标记语言–描述类语言
HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体;
CSS 决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆
- JS 脚本语言–编程类语言
实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作
JavaScript 组成
- ECMAScript(JavaScript语法);
- DOM(文档对象模型);
- BOM(浏览器对象模型)
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
二、浏览器怎么执行 JS
浏览器分成两部分:渲染引擎和 JS 引擎
- 渲染引擎:
用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
- JS 引擎:
JS 引擎也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行
三、JS 的三种书写方式:行内、内嵌、外部
- 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
1. 行内式 JS
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
- 特殊情况下使用
<body><!-- 1. 行内式的js 直接写到元素的内部 --><input type="button" value="明天" onclick="alert('会更好')">
</body>
显示效果:
2. 内嵌 JS
<script>alert('金榜题名');
</script>
显示效果:
3. 外部 JS 文件
- 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用;
- 引用外部 JS文件的 script 标签中间不可以写代码;
- 适合于JS 代码量比较大的情况
html 文件中:
<script src="my.js"></script>
my.js 文件中:
alert('人生若只如初见,何事秋风悲画扇')
四、JS 基本语法
1. JS 注释
- 单行注释
// 单行注释 Ctrl+‘/’
- 多行注释
/* */ 多行注释 默认: shift+alt+a
推荐 (默认快捷键 alt + shift + a) 修改为 (ctrl + shift + /)
2. 变量的使用
声明变量的本质是去内存申请空间
// 1.声明变量
var num; // 声明一个 名称为 num 的变量// 2. 赋值
num = 10;//给 num 这个变量赋值为 10// 3. 变量的初始化
var num = 10;//声明变量并赋值为10 // 4. 变量语法扩展
//同时声明多个变量(只需要写一个var,多个变量名之间用英文逗号隔开)
var num = 10, age = 15, name = 'fan';
<script>// 1. 声明了一个age 的变量 var age;// 2. 赋值 把值存入这个变量中age = 18;// 3. 输出结果 console.log(age);// 4. 变量的初始化 var myname = '小明老师';console.log(myname);
</script>
显示效果:
<script>// 1. 用户输入姓名 存储到一个 myname的变量里面var myname = prompt('请输入您的名字');// 2. 输出这个用户名alert(myname);
</script>
声明变量的特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age ; console.log (age); | 只声明 不赋值 | undefined |
console.log(age) | 不声明 不赋值 直接使用 | 报错 |
age = 10; console.log (age); | 不声明 只赋值 | 10 |
变量的命名方法
java 推荐驼峰命名法
3. JS 输入与输出
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。
alter() 显示结果:
console.log() 显示结果:
4. 数据类型
分为两类:简单数据类型(Number,String,Boolean,Undefined,Null)和复杂数据类型(object)。
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值 | 0 |
String | 字符串型 | “” |
Boolean | 布尔值型 | false |
Undefined | var a;声明了变量a但是没有赋值,此时a = undefined | undefined |
Null | var a = null;声明了变量a为空值 | null |
JavaScript 是一种弱类型或者说动态语言,js 的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
js是动态语言 变量的数据类型是可以变化的;JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
Number 数字型
<script>// int num = 10; java // var num; // 这里的num 我们是不确定属于哪种数据类型的var num = 10; // num 属于数字型 // js 的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的var str = 'pink'; // str 字符串型// js是动态语言 变量的数据类型是可以变化的var x = 10; // x 是数字型 x = 'pink'; // x 字符串型
</script>
数字型范围与特殊值
最大值:Number.MAX_VALUE,值为:1.7976931348623157e+308
最小值:Number.MIN_VALUE,值为:5e-32
特殊值:Infinity 无穷大 -Infinity 无穷小 NaN 代表一个非数字
isNaN():用来判断一个变量是否为非数字的类型。非数字型为true,数字型为false。
<script>var num = 10; // num 数字型 var PI = 3.14 // PI 数字型// 1. 八进制 0 ~ 7 我们程序里面数字前面加0 表示八进制var num1 = 010;console.log(num1); // 010 八进制 转换为 10进制 就是 8 var num2 = 012;console.log(num2);// 2. 十六进制 0 ~ 9 a ~ f #ffffff 数字的前面加 0x 表示十六进制var num3 = 0x9;console.log(num3);var num4 = 0xa;console.log(num4);// 3. 数字型的最大值console.log(Number.MAX_VALUE);// 4. 数字型的最小值console.log(Number.MIN_VALUE);// 5. 无穷大console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 // 6. 无穷小console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
</script>
判断非数字 isNaN()
isNaN() 这个方法用来判断非数字 并且返回一个值
如果是数字返回的是 false
如果不是数字返回的是 true
<script>// isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是trueconsole.log(isNaN(12)); // falseconsole.log(isNaN('老师')); // true
</script>
String 字符串型
1. 字符串转义符
// 1.字符串型可以是引号中的任意文本,语法为 单引号 和 双引号
var msg = '我的名字叫';
var name = "fan";
2. 字符串长度 str.length()
字符串是由若干字符组成的,这些字符的数量就是字符串的长度
// 1.字符串型可以是引号中的任意文本,语法为 单引号 和 双引号
var msg = '我是帅气的饭老板';
console.log(msg.length); // 显示 8
3. 字符串拼接
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112 +号口诀:数值相加,字符相连
// 1.4 字符串拼接加强
var age = 18;
alert("饭老板今年" + age +"岁了");
Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
console.log(true + 1) // 2
console.log(false + 1) // 1
Undefined 和 Null
一个变量声明后没有赋值会有一个默认值undefined(如果相连或者相加时,注意结果
var variable;
console.log(variable); // undefined
console.log("你好" + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable);// NaN
一个变量声明并赋值null,里面存的值为空
var var2 = null;
console.log(var2); // null
console.log("你好" + var2); // 你好null
console.log(11 + var2); // 11
console.log(true + var2);// 1
判断数据类型 typeof
注: prompt 取得的值为 字符型
<script>var num = 10;console.log(typeof num); // numbervar str = 'pink';console.log(typeof str); // stringvar flag = true;console.log(typeof flag); // booleanvar vari = undefined;console.log(typeof vari); // undefinedvar timer = null;console.log(typeof timer); // object// prompt 取过来的值是 字符型的var age = prompt('请输入您的年龄');console.log(age);console.log(typeof age);
</script>
数据类型转换
- 转换为字符串
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num=1; alert(num.toString()) |
String() | 强制转换 | var num=1; alert(String(num)) |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1; alert(num+‘我是字符串’) |
- 转换为数字型
方式 | 说明 | 案例 |
---|---|---|
parseInt(String)函数 | 将string类型转成整数型 | parseInt(‘11’) |
parseFloat(String)函数 | 将string类型转成浮点型 | parseFloat(‘11.2’) |
Number() 强制转换函数 | 将string类型强制转换为数值型 | Number(‘12’) |
js隐式转换 ( - * /) | 利用算数运算隐式转换为数值型 | ‘12’ - 0 |
- 转换为布尔型
代表空、否定的值会被转换为false,如’’、0、NaN、null、undefined 其余值都会被转换为true
方式 | 说明 | 案例 |
---|---|---|
Boolean() | 其他类型转换为布尔值 | Boolean(‘true’) |
四、运算符
算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符
console.log(18 == ‘18’); // true
// 2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以 true
console.log(18 === 18);
console.log(18 === '18'); // false
<script>// 1. 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false console.log(3 > 5 && 3 > 2); // falseconsole.log(3 < 5 && 3 > 2); // true// 2. 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是trueconsole.log(3 > 5 || 3 > 2); // true console.log(3 > 5 || 3 < 2); // false// 3. 逻辑非 not ! console.log(!true); // false</script>
逻辑或有逻辑中断
<script>// 1. 用我们的布尔值参与的逻辑运算 true && false == false // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算? // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1console.log(123 && 456); // 456console.log(0 && 456); // 0console.log(0 && 1 + 2 && 456 * 56789); // 0console.log('' && 1 + 2 && 456 * 56789); // ''// 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN// 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2console.log(123 || 456); // 123console.log(123 || 456 || 456 + 123); // 123console.log(0 || 456 || 456 + 123); // 456// 逻辑中断很重要 它会影响我们程序运行结果思密达var num = 0;console.log(123 || num++);console.log(num); // 0</script>
五、流程控制
流程控制主要有: 顺序结构、分支结构和循环结构
1. 分支流程控制 if
// 1. 条件成立执行的代码语句if (条件表达式) { }// 2.if else 语句if (条件表达式) {// [如果] 条件成立执行的代码} else {// [否则] 执行的代码}// 3. if else if 语句(多分支语句)// 适合于检查多重条件。if (条件表达式1) {语句1;} else if (条件表达式2) {语句2;} else if (条件表达式3) {语句3;....} else {// 上述条件都不成立执行此处代码
}
2.分支流程控制switch
它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
<script>// 1. switch 语句也是多分支语句 也可以实现多选1// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思// switch (表达式) {// case value1:// 执行语句1;// break;// case value2:// 执行语句2;// break;// ...// default:// 执行最后的语句;// }// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上,就执行该case 里面的语句 如果都没有匹配上,那么执行 default里面的语句// 4. 代码验证switch (8) {case 1:console.log('这是1');break;case 2:console.log('这是2');break;case 3:console.log('这是3');break;default:console.log('没有匹配结果');}
</script>
switch 与 if else的区别
3. 三元运算符 ?:
语法语句
//如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值表达式1 ? 表达式2 : 表达式3;
4. 循环结构
for 循环
打印九九乘法表
<script>// 九九乘法表// 一共有9行,但是每行的个数不一样,因此需要用到双重 for 循环// 外层的 for 循环控制行数 i ,循环9次 ,可以打印 9 行 // 内层的 for 循环控制每行公式 j // 核心算法:每一行 公式的个数正好和行数一致, j <= i;// 每行打印完毕,都需要重新换一行var str = '';for (var i = 1; i <= 9; i++) { // 外层循环控制行数for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数 j <= i// 1 × 2 = 2// str = str + '★';str += j + '×' + i + '=' + i * j + '\t';}str += '\n';}console.log(str);</script>
显示效果:
实例:
<script>// 弹出输入框输入总的班级人数(num)// 依次输入学生的成绩( 保存起来 score), 此时我们需要用到// for 循环, 弹出的次数跟班级总人数有关系 条件表达式 i <= num// 进行业务处理: 计算成绩。 先求总成绩( sum), 之后求平均成绩( average)// 弹出结果var num = prompt('请输入班级的总人数:'); // num 总的班级人数var sum = 0; // 求和的变量var average = 0; // 求平均值的变量for (var i = 1; i <= num; i++) {var score = prompt('请您输入第' + i + '个学生成绩');// 因为从prompt取过来的数据是 字符串型的需要转换为数字型sum = sum + parseFloat(score);}average = sum / num;alert('班级总的成绩是' + sum);alert('班级平均分是:' + average);
</script>
while循环
//计算1-100的累加和var i = 1;var sum = 0;while (i <= 100) {sum += i;i++;}console.log(sum);
do-while循环
do… while 语句的语法结构如下:
do {// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
先再执行循环体,再判断,我们会发现 do…while 循环语句至少会执行一次循环体代码
var i = 1;
var sum = 0;
do {if (i % 2 == 0) {sum += i;}i++;
} while (i <= 100);
console.log(sum);
continue、break」
continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
break 关键字用于立即跳出整个循环(循环结束)。
前端学习记录 —— JavaScript(一)相关推荐
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
- 前端学习记录 —— HTML篇(下)
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
- 前端学习记录13-CSS-(滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素 滑动门技术 微信导航栏实现 静态轮播图实现 网上引用的图标字体设置 过渡效果(transit ...
- 前端学习记录27-JavaScript-(作用域、预解析、自定义对象)
前端学习记录27-JavaScript-作用域.预解析.自定义对象 作用域 全局作用域 局部作用域(函数作用域) 变量作用域 全局变量 局部变量 作用域链 预解析 变量预解析 函数预解析 预解析经典面 ...
- 前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
- 重学前端-学习笔记-JavaScript对象
说明 重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征 对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
- echarts引入geo地图数据,前端学习记录01
最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程. 首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖: " ...
- 前端学习 之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
- Web前端学习笔记——JavaScript之数组、函数、作用域
数组 为什么要学习数组 之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念 所谓数组,就是将多个元素(通常是同一类型)按 ...
最新文章
- 1.一些 贪心算法 的简单思维题:
- 手机1像素线粗_豪威推出4800万像素手机传感器:1/2大底
- LightGBM如何保存模型?
- CRM数据如何让企业未卜先知
- jupyter 托管_如何在本地托管的Jupyter Notebook上进行协作
- SpringFox swagger2 and SpringFox swagger2 UI 接口文档生成与查看
- 小明交友第五次2018.6.24
- 基于JAVA+SpringMVC+Mybatis+MYSQL的校园失物招领系统
- 如何释放hdfs中的续租_装修中甲醛如何高效释放
- 论文管理:zotero的安装和插件使用
- 如何下载安装fireBug
- LMDB内存映射型数据库
- oracle 统计标准误差,标准偏差和标准误差的区别
- 如何查看电脑CPU温度,笔记本温度显示怎么开启
- Router Support for Fine-Grained Latency Measurements阅读笔记
- 8位bmp文件获取像素
- GreenHills基本操作:通过 R寄存器和上下文变量 定位异常
- git pack文件过大
- 这篇文章来自我的微信朋友圈,并不特别好玩,但可以给创业者补点财务知识
- 建网站之前要先做好SEO布局工作
热门文章
- 旺旺照妖镜API接口文档说明
- 中文分词-jieba
- 诚之和:巨头互联互通“拆墙”记“一键分享”半路被堵
- 七牛云存储上部署iOS应用
- python随机生成20个整数列表、找出被7除余5_the date of departure
- 英雄联盟服务器维护2月26,英雄联盟2月20日更新维护公告 LOL更新到几点
- 数字信号处理之Matlab应用基础
- 基于OpenGL的计算机图形机械零件车工建模模拟
- 1^5+2^5+3^5+.+n^5及任意次方求和
- golang 实现不定数量企微群机器人消息通知 顺序必须一致 并不超过群机器人消息每分钟提醒上限20条