seo网站查询,网站有备案 为企业,wordpress 5.2中文,一起做网店入驻多少费用前言
选择视频课程之前#xff0c;不仅查阅了资料#xff0c;还询问了网友#xff0c;最终敲定了学习黑马前端的视频教程#xff0c;学了5小节#xff0c;发现挺对自己口味的且从反响来看#xff0c;还是相当不错的#xff0c;便打算利用这个寒假学完
笔记范围
从这节…前言
选择视频课程之前不仅查阅了资料还询问了网友最终敲定了学习黑马前端的视频教程学了5小节发现挺对自己口味的且从反响来看还是相当不错的便打算利用这个寒假学完
笔记范围
从这节视频开始到那节视频结束
课程目标
能够说出什么是编程语言能够区分编程语言与标记语言的不同能够说出常见的数据存储单位及其换算关系能够说出内存的主要作用及特点
编程语言
编程
编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码从编程人员视角来看
计算机程序就是计算机所执行的一系列指令集合而程序是编程语言编写的所以人们要控制计算机一定要通过计算机语言向计算机发出命令从计算机视角来看
计算机语言
计算机语言指 用于人与计算机之间 通讯的语言它是人与计算机之间传递信息的媒介
计算机语言的种类 非常多总的来说可以分为机器语言、汇编语言和高级语言三大类
实际上计算机最终执行的都是机器语言它是由“0”和“1” 组成的二进制数二进制是计算机语言的基础
编程语言
通过类似人类语言的 “语言” 来控制计算机让计算机处理事情这样的语言就叫编程语言
编程语言是用来控制计算机的一系列指令它有固定的格式和词汇不同编程语言的格式和词汇不一样必须遵守
如今通用的编程语言有两种形式汇编语言和高级语言 汇编语言和机器语言实质是相同的都是直接对硬件操作只不过指令采用了英文缩写的标识符容易识别记忆 高级语言主要相对低级语言并不是特指某一种具体语言而是包括很多编程语言如C、C、Java、C#、Python、PHP、Javascript、Go语言等
翻译器
高级语言所编写的程序不能直接被计算机识别必须经过转换才能被执行为此需要一个翻译器
翻译器可将编写的源代码转为机器语言这也被称为二进制化
编程语言和标记语言区别
编程语言有很强的逻辑和行为是主动的标记语言不用于向计算机发出指令常用于格式化和链接。标记语言的存在常用来被读取是被动的
小结
计算机可以帮助人类解决某些问题程序员利用编程语言编写程序发出指令控制计算机来实现这些任务编程语言有机器语言、汇编语言、高级语言高级语言需要一个翻译器转为计算机识别的机器语言编程语言是主动且有很强逻辑性的
计算机基础
计算机组成 数据存储
计算机内部使用二进制0和1来表示数据所有数据包括文件、图片等最终都是以二进制数据0和1的形式存放在硬盘中所有程序包括操作系统本质都是各种数据也以二进制数据的形式存放在磁盘硬盘、内存保存的都是二进制数据
数据存储单位
bit byte kb GB TB …
位bit字节Byte千字节KB兆字节MB吉字节 …
程序运行 打开某个程序时先从硬盘把程序中的代码加载到内存中CPU执行内存中的代码
注意之所以要内存的一个重要原因是因为cpu运行太快了如果只是从硬盘中读取数据会浪费cpu性能所以才使用存取速度更快的内存来保存运行时的数据内存是电临时存储硬盘是机械永久存储
初始JavaScript
JavaScript是什么
JavaScript是世界上最流行的语言之一是一种运行在客户端的脚本语言Script是脚本的意思脚本语言不需要编译运行过程由js解释器(js引擎逐行进行解释并执行现在也可以基于Node.js技术进行服务器端编程
JavaScript的作用
表单动态校验密码强度检测JS最初目的网页特效服务端开发Node.js桌面程序Electron …
HTML/CSS/JS的关系
HTML/CSS标记语言–描述类语言
HTML决定网页结构和内容决定看到什么相当于人的身体CSS决定网页呈现给用户的模样决定好看与否相当于给人穿衣服、化妆
JS脚本语言–编程类语言
实现业务逻辑和页面控制决定功能相当于人的各种动作
高级语言编写的程序若想被计算机运行都必须将其转换成机器语言而这种转换的方式有两种一种是编译一种是解释由此高级语言分为编译型语言和解释型语言
浏览器执行JS
浏览器分成两部分 渲染引擎和JS引擎
渲染引擎用来解析HTML与CSS俗称内核比如chrome浏览器的blink老版本的webkitjs引擎也称为JS解释器。用来读取网页中的的JavaScript代码对其处理后运行比如chorme浏览器的V8
浏览器本身并不会执行JS代码而是通过内置JavaScript引擎解释器来执行JS代码。JS引擎执行代码时逐行解释每一句源码转换为机器语言然后由计算机去执行所以JavaScript语言归为脚本语言会逐行解释执行
JS的组成
JavaScript
ECMAScriptJavaScript语法DOM页面文档对象模型BOM浏览器对象模型
ECMAScript
ECMAScript是由ECMA国际原欧洲计算机制造商协会进行标准化的一门编程语言这种语言在万维网上应用广泛它往往被称为JavaScript或JScript但实际上后两者是ECMAScript语言的实现和扩展 ECMAScriptECMAScript规定了JS的编程语法和基础核心知识是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM——文档对象模型
文档对象模型Document Object Model简称DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口
通过DOM提供的接口可以对页面上的各种元素进行操作大小、位置、颜色等
BOM——浏览器对象模型
BOMBrowser Object Model简称BOM是指浏览器对象模型它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构比如弹出框、控制浏览器跳转、获取分辨率等
JS初体验
JS有三种书写位置分别为行内、内嵌和外部 外部JS文件
利于HTML页面代码结构化把大段JS代码独立到HTML页面之外既美观也方便文件级别的复用引用外部JS文件的script标签中不可以写代码适合JS代码量比较大的情况
JS注释
多行注释 修改默认快捷键
JavaScript输入输出语句
为了方便信息的输入输出JS中提供了一些输入输出语句其常用的语句如下
方法说明归属alert(msg)浏览器弹出警示框浏览器console.log(msg)浏览器控制台打印输出信息浏览器prompt(info)浏览器弹出输入框用户可以输入浏览器
课程目标
能够说出变量的主要作用能够写出变量的初始化能够说出变量的命名规范能够画出变量是如何在内存中存储的能够写出交换变量案例
变量概述
什么是变量
白话变量就是一个装东西的盒子 通俗变量是用于存放数据的容器。通过变量名获取数据甚至修改数据
变量在内存中的存储
本质变量是程序在内存中申请的一块用来存放数据的空间
变量的使用
变量的使用分为两步1. 声明变量 2. 赋值
声明变量
//声明变量
var age; //声明一个 名称为age的变量var 是一个JS关键字用来声明变量variable使用该关键字声明变量后计算机会自动为变量分配内存空间不需要程序员管age是程序员定义的变量名通过变量名来访问内存中分配的空间
赋值
age 10; //给age 这个变量赋值为10用来把右边的值赋给左边的变量空间中 此处代表赋值的意思变量值是程序员保存到变量空间里的值
变量的初始化
var age 18; //声明变量同时赋值为18声明一个变量并赋值称之为变量的初始化
变量案例 修改复制上一行快捷键
因为IDEA复制上一行快捷键为ctrld所以便修改VSCode快捷键也为ctrld
变量语法扩展
更新变量
一个变量重新赋值后原有的值就会被覆盖变量值将以最后的值为准
声明多个变量
同时声明多个变量时只需要写一个var多个变量名之间使用英文逗号隔开
声明变量特殊情况
情况说明结果var age;console.log(age);只声明 不赋值undefinedconsole.log(age);不声明 不赋值 直接使用报错age 10;console.log(age);不声明 只赋值10变量命名规范
由字母、数字、下划线、美元符号组成严格区分大小写不能以数字开头不能是关键字变量名必须有意义遵守驼峰命名法
推荐翻译网站金山词霸
交换变量案例 小结
问题解答为什么需要变量一些数据需要保存所以需要变量变量是什么变量是一个容器用来存放数据的变量的本质是什么变量是内存里的一块空间用来存放数据变量怎么使用先声明后赋值声明变量本质是去内存申请空间什么是变量的初始化声明变量并赋值称之为变量的初始化变量命名规范有哪些变量命名尽量要规范见名识意——驼峰命名法区分哪些变量名不合法交换2个变量值的思路临时变量
课程目标
能够说出5中简单的数据类型能够使用typeof获取变量的类型能够说出1~2种转换为数值型的方法能够说出1~2种转换为字符型的方法能够说出什么是隐式转换
数据类型简介
在计算机中不同的数据所需占用的存储空间是不同的为了便于把数据分成所需内存大小不同的数据充分利用空间于是定义了不同的数据类型
变量是用来存储值的所在处它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态的语言。这意味这不用提前声明变量类型在程序运行过程中类型会被自动确定
通俗的讲解释型语言逐行解释时变量的数据类型才会被确定且是根据所赋的值确认的
js是动态语言 变量的数据类型是可变的 简单数据类型基本数据类型
简单数据类型说明默认值Number数字型包含 整型值和浮点型值如21、0.210Boolean布尔值类型如true、false等价于1和0falseString字符串类型如“张三” 注意咱们js里面字符串都带引号“”Undefinedvar a;声明了变量a但没有给值此时a undefinedundefinedNullvar a null; 声明了变量a位空值null
在JS中 八进制前面加0标识十六进制前面加0x标识JavaScript中数值有最大值和最小值数字型中三个特殊值Infinity代表无穷大-Infinity代表无穷小NaNnot a number代表一个非数值 isNaN方法 字符串型 String
字符串可以使用单引号和双引号但因为HTML标签里面属性用的是双引号JS这里推荐使用单引号
字符串引号嵌套
单引号和双引号在JS中都是就近匹配
JS可以用单引号嵌套双引号或者用双引号嵌套单引号外双内单外单内双 字符串转义符
类似HTML里的特殊字符字符串中也有特殊字符称之为转义符
转义符都是\开头常用转义符及其说明如下
转义符解释说明\n换行符n是newline的意思\斜杠’’ 单引号 双引号\ttab 缩进\b空格b 是blank的意思
弹出警示框案例
VSCode 字符串过长换行
换行末尾加上反斜杠
效果
使用快捷键altz这个换行是以视口可见为标准换的 字符串长度及拼接
字符串是由若干个字符组成这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串长度 号口诀数值相加字符相连 显示年龄案例 undefined和null 获取变量数据类型 通过控制台输出数据的颜色可以简单判断是否为数字型
数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型此时就不能直接简单进行加法运算需要转换变量的数据类型。通俗的说就是把一种数据类型的变量转换为另一种数据类型
通常有3种实现方式的转换
转换为字符串类型转换为数字类型转换为布尔型
转换为字符串
方式说明案例toString()转成字符串var num 1;alert(num.toString());String()强制转换转成字符串var num 1;alert(String(num));加号拼接字符串和字符串拼接的结果是字符串var num 1;alert(num“我是字符串”);转换为数字型重点
方式说明案例parseInt(string)函数将string类型转成整数数值型parseInt(‘78’)parseFloat(string)函数将string类型转成浮点数数值型parseFloat(‘78.21’Number()强制转换函数将string类型转换为数值型Number(‘12’)js 隐式转换(- * /)利用算术运算隐式转换为数值型‘12’ - 0计算年龄案例 简单加法器
计算两个数的值用户输入第一个后继续弹出第二个输入框并输入第二个值最后通过弹出窗口显示出两次输入值相加的结果 转换为布尔型
代表空、否定值会被转换为false如 ‘’、0、NaN、null、undefined其余值都会转换成true 扩展阅读
解释型语言和编译型语言
概述
计算机不能直接理解任何除机器语言以外的语言所以必须把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具被称为翻译器 翻译器翻译的方式有两种一个是编译另一个是解释。两种方式之间的区别在于翻译的时间点不同
执行过程 类似于情况吃饭
编译语言首先把所有菜做好才开桌吃饭解释语言好比吃火锅边吃边涮同时进行
标识符、关键字、保留字
标识(zhi)符指开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字
关键字是指JS本身已经使用了的字不能再用它们充当变量名和方法名 包括break、case、continue、delete、return、while等
保留字实际上就是预留的“关键字”意思是现在虽然还不是关键字但未来可能称为关键字同样不能使用它们当变量名或方法名
包括boolean、byte、char、class、const等
课程目标
能够使用常用运算符能够说出前置递增和后置递增的区别能够说出运算符的优先级
运算符
JavaScript中常用的运算符有
算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符
算数运算符
算术运算符
概念算术运算符使用的符号用于执行两个变量或值的算术运算
运算符描述实例加10 20 30-减10 - 20 -10*乘10 * 20 200/除10 / 20 0.5%取余数取模返回除法的余数 9 % 2 1注意 浮点数精度存在问题算术运算会有问题
原因 要计算的数字小数部分无法用二进制精确表示类似于1/3转为小数会存在误差
所以 视浮点数为贵客不可任意驱使如不要直接判断两个浮点数是否相等
表达式和返回值
表达式 由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果返回我们称为返回值
递增和递减运算符
概述
如果需要反复给数字变量添加或减去1可以使用递增或递减–运算符来完成
在JavaScript中递增和递减–既可以放在变量前面也可以放在变量后面。
放在变量前面时可以称为前置递增递减运算符放在变量后面时可以称为后置递增递减运算符
注意 递增和递减运算符必须和变量配合使用
前置递增递减运算符
先自加后返回值 后置递增递减运算符
先返回原值后自加 前置后置练习 前置递增递减和后置递增递减小结
前置递增和后置递增运算符可以简化代码编写让变量的值 1 比以前写法更简单单独使用运行结果相同与其他代码联用时执行结果不同后置先原值后运算后自加先人后己前置先自加后运算先己后人开发时大多使用后置递增递减且独占一行如num;(num–)
比较运算符
概念比较运算符关系运算符是两个数据进行比较时所使用的运算符比较运算后会返回一个布尔值true/false作为比较运算的结果
运算符名称说明案例结果小于号1 2true大于号1 2false大于等于号大于或等于2 2true小于等于号小于或等于3 2false判等号会转型37 37true!不等号37 ! 37false !全等 要求值和 数据类型都一致37 ‘37’false符号作用用法赋值把右边给左边判断判断两边值是否相等注意此时有隐式转换全等判断两边的值和数据类型是否完全相同
逻辑运算符
概念逻辑运算符是用来进行布尔值运算的运算符其返回值也是布尔值
逻辑运算符说明案例”逻辑与“简称”与“ andtrue false||”逻辑或“简称”或“ ortrue || false!”逻辑非“简称”非“ not!true
短路运算
短路运算原理当有多个表达式值时左边的表达式值可以确定结果时就不再继续运算右边的表达式的值 赋值运算符
概念用来把数据赋值给变量的运算符
赋值运算符说明案例直接赋值var usrName ‘我是值’;、-加、减一个数后在赋值var age 10; age5; //15*、/、%乘、除、取模 后在赋值var age 2;age*5 //10运算符优先级
优先级运算符顺序1小括号()2一元运算符 - - !3算术运算符先 * / % 后 -4关系运算符 5相等运算符 ! !6逻辑运算符先 后||7赋值运算符8逗号运算符,
一元运算符里的逻辑非优先级很高逻辑与比逻辑或优先级高
课程目标
能够使用if分支语句能够使用switch分支语句能够使用三元表达式
流程控制
在一个程序执行的过程中各条代码的执行顺序对程序的结果是有直接影响的。很多时候要通过控制代码的执行顺序来实现要完成的功能
简单理解流程控制就是控制代码按照什么结构顺序执行
流程控制主要有三种结构分别是顺序结构、分支结构和循环结构这三种结构代表三种代码执行顺序 顺序流程控制
没有特定语法结构程序按照代码的先后顺序依次执行
分支流程控制
根据不同条件执行不同路径代码执行代码多选一的过程从而得到不同结果
JS语言提供了两种分支结构语句
if语句switch语句
if语法结构
if(条件表达式){//条件成立执行代码语句
}进入网吧案例 if else语句双分支语句 if else if多分支语句 判断成绩案例 三元表达式
由三元运算符组成的式子称为三元表达式
语法结构 条件表达式 ? 表达式1 表达式2;
执行思路
如果条件表达式为true则返回表达式1的值如果条件表达式为false则返回表达式2的值类似于if else(双分支的简写
数字补0案例 switch语句
语法结构 switch(表达式){case value1:执行语句1;break;case value2:执行语句2;break;...default:执行最后的语句;}执行思路 用表达式的值 和 case 后面的选项值 相匹配。匹配上就执行该case里面的语句没有匹配上则执行 default里面的语句
注意
当前case里面没有break则不会退出switch继续执行下一个case表达式的值和case 后的选项值 要全等匹配
判断成绩案例 switch语句和if else if语句
一般情况下它们两个语句可以相互替换switch…case 语句通常处理 case为比较确定值的情况 而 if…else…语句更加灵活常用于范围判断(大于、等于某个范围)switch 语句进行条件判断后直接执行到程序的条件语句效率更高。而if…else 语句有几种条件就得判断多少次当分支比较少时if… else语句的执行效率比 switch语句高当分支比较多时switch语句的执行效率比较高而且结构更清晰
循环
能够说出循环的目的能够说出for循环的执行过程能够使用断点调试来观察代码的执行过程能够使用for循环完成累加求和等案例能够使用双重for循环完成乘法表案例能够说出while循环和do while循环的区别能够说出break和continue的区别
循环的目的
在实际问题中有许多具有规律性的重复操作因此在程序中要完成这类操作就需要重复执行某些语句
JS中的循环
在JS中主要有三种类型的循环语句
for循环while循环do…while循环
for循环
在程序中一组被重复执行的语句被称为循环体能否继续重复执行取决于循环的终止条件。由循环体及循环的终止条件组成的语句被称为循环语句
语法结构
for(初始化变量;条件表达式;操作表达式){//循环体
}
//初始化变量 就使用var声明一个普通变量通常用作计数器使用
//条件表达式 用来决定每一次循环是否继续执行也就是终止条件
//操作表达式 每次循环最后执行的代码 经常用于计数器变量进行更新递增或递减断点调试
断点调试是指自己在程序的某一行设置一个断点调试时程序运行到这一行就会停止然后你就可以一步一步往下调试调试过程中可以看各个变量当前的值出错的话调试到出错的代码行即显示错误停下。
断点调试可以帮助程序员观察程序的运行过程
具体调试过程如下
在网页中按F12— sources — 找到需要调试的文件 — 在程序的某一行设置断点
Watch监视通过watch可以监视变量的值的变化非常的常用
F11程序单步执行让程序一行一行的执行这个时候观察watch中变量的值的变化
代码调试的能力非常重要只有学会了代码调试才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试代码调试这个东西自己不去练永远学不会
求和案例 for循环案例 ⭐️学生成绩案例 一行打印五颗星星
追加字符串一行打印五颗星星 升华 双重循环——五行五列星星
内层循环看作外层循环的执行语句外层循环循环一次里面的循环执行全部 打印n行n列星星 打印倒三角形星星
先分析后打印代码
打印正三角形星星 九九乘法表 for循环小结
双层循环要考虑两个循环变量代表什么联系是什么
如 上述九九乘法表i代表行数j代表列数联系就是j i
while循环
while语句可以在条件表达式为真的前提下循环执行指定的一段代码直到表达式不为真时结束循环 while循环案例 do while循环 do while循环案例 continue 关键字
continue关键字 用于立即跳出本次循环继续下一次循环
break关键字
break 退出整个循环 命名规范
标识符命名规范
变量、函数的命名必须要有意义变量的名称一般用名词函数的名称一般用动词
操作符规范
操作符左右两侧各保留一个空格
单行注释规范
单行注释前注意有个空格
其他规范 简易ATM
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptvar SaveMoney 100;var DrawMoney 0;do {while (1){var operation prompt(请输入您要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出);if (isNaN(parseInt(operation))) {alert(请输入数字选项);continue;}break;} switch (operation){case 1: SaveMoney parseInt(prompt(请您输入存的钱数:));alert(您现在的钱数是: SaveMoney);break;case 2:DrawMoney parseInt(prompt(请您输入取的钱数:));if (DrawMoney SaveMoney){SaveMoney - DrawMoneyalert(您现在的钱数是: SaveMoney);}else{alert(您现在的钱数是: SaveMoney);}break;case 3:alert(您现在的钱数是: SaveMoney);break;case 4:alert(您正在退出!);break;default:alert(请输入1~4);}} while (operation ! 4)/script
/head
body/body
/html效果演示 小技巧
学习时收集到的小技巧
博文查找
如何从博文中快速定位到要看的内容直接ctrlf弹出搜索框搜索关键字即可
VSCode
问题描述 代码提示第一项无法enter选中 问题解决