JS常用技术与规范

一.JS简介 

1.概念

JavaScript 是一种运行在客户端(浏览器)的编程语言

2.作用

1. 网页特效 (监听用户的一些行为让网页作出对应的反馈)

2. 表单验证 (针对表单数据的合法性进行判断)

3. 数据交互 (获取后台的数据, 渲染到前端)

4. 服务端编程 (node.js)

3.组成

ECMAscript,DOM,BOM

二.输入输出语法

1.语法

人和计算机打交道的规则约定

2.输入语法

prompt

3.输出语法

alert    // 弹窗,警告窗

console.log  // 控制台输出

document.write  //页面输出打印

三.字面量

在计算机科学中,字面量(literal)是在计算机中描述事/物

123        //是数字字面量

'黑马程序员'  //字符串字面量,用引号的都是

 [  ]             // 数组字面量

四.变量

1.概念

容器

2.声明赋值的几种写法

1.先声明,再赋值 

let name

  name=xx

2.声明并直接赋值

let name=xx

3.同时声明多个变量

let name=xx,name2=xxx

3.变量本质

在内存开辟一个空间

4.命名规则与规范

1.规则

由字母、数字、下划线、$符号组成,不能以数字开头

不能是关键字和保留字,例如:var for while

严格区分大小写

2.规范

变量名必须有意义

遵守小驼峰式命名法,如:MyName

5.数组

1.什么是数组? 为什么需要数组?

如:存储班级所有人的姓名

2.创建数组:字面量

3.取值:数组[下标]

五.数据类型

1.概念和作用

1. 更加充分和高效的利用内存

2. 也更加方便程序员的使用数据

2.分类介绍

1.基本数据类型

 number 数值型

 string 字符串 (单引号,双引号,反引号,字符串拼接)

 boolean 布尔型

undefined 未定义

null 空引用

2.引用数据类型

 object  对象

 function  函数

array    数组 

六.数据类型的转换

1.为什么需要转换?

从用户得到的数据都是字符串,而字符串和数字相加会变成相连

2.显示转换

1.转换成数字

Number()

parse系列

如果介绍parse系列就是介绍区别和使用场景

三者的区别

2.转换成字符串

String()

变量.toString()

括号里面可以跟进制

两者区别

3.隐式转换的小技巧

+号作为正号解析可以转换成Number

任何数据和字符串相加结果都是字符串



七.运算符 

1.作用: 实际开发需要进行各种运算

2.算术运算符

+

-

*

/

Infinity  无穷

% 判定是否可以被整除,求奇偶数

3.赋值运算符

1.=

2.带操作赋值(修改变量本身)

+=

-=

*=

/=

%=

3.自操作运算

++   --  (每次变化1)

前置自操作  , 后置自操作 (特点:独立一行: 没有区别.   

  不独立

前置: 先改变自己,后参与运算

后置: 先参与运算,后改变自己

)

4.比较运算符

比值

>

<

>=

<=

==

!=

比值比类型

===

!==

5.特殊比较

1.字符串比较规则

不比长度

比对应位置的字母的ASCII码值

2.NaN比较

不能比较, 所得结果一定是false

3.小数不适合精确比较

小数存储不精确

6.逻辑运算符

逻辑与&&一假则假   //(短路运算:逻辑与: false短路)

一真则真,逻辑或|| (短路运算:逻辑或: true短路)

逻辑非!,取反

7.运算符优先级

运算从左往右

()可以提升优先级

八.流程控制

1.顺序结构

代码从上往下, 顺序执行(一定会执行)

2.分支结构

代码根据条件选择执行(可以跳过代码)

3.循环结构

代码重复执行( 减少代码书写)

九.if分支


1.单分支

控制代码是否执行

if(条件){

满足条件时执行

}

2.双分支

二选一: 选择一段代码执行

if(条件){

满足条件时执行

}eles{否则执行

}

3.多分支

多选一: 选择一段代码执行, 条件分层

if(条件){

满足条件时执行

}eles  if(否则满足条件){

否则满足条件时执行

}

十.三元运算

1.语法: 条件表达式 ? 结果表达式1 : 结果表达式2


1或者2代表整个结果

条件真: 1代表结果

条件假: 2代表结果

作用: 简化 if-else双分支

2.switch-case分支

case代表一个条件

break: 结束case以及switch

没有break: 穿透到下一个case

default: 所有条件都不匹配

   // 简易版网页计算器

        // 1. 用户输入两个数: 要变成数字

        // 2. 用户输入操作符

        // 3. 使用switch对操作符进行判定, 利用case去匹配结果, 输出结果

        let num1 = +prompt('请输入第一个数')

        let num2 = +prompt('请输入第二个数')

        let op = prompt('请输入操作符:+ - * / %')

        switch (op) {

            case '+':

                alert(`您选择的是加法:结果是:${num1 + num2}`)

                break

            case '-':

                alert(`您选择的是减法:结果是:${num1 - num2}`)

                break

            case '*':

                alert(`您选择的是乘法:结果是:${num1 * num2}`)

                break

            case '/':

                alert(`您选择的是除法:结果是:${num1 / num2}`)

                break

            case '%':

                alert(`您选择的是取余:结果是:${num1 % num2}`)

                break

            default:

                alert(`您选择的是错误的`)

                break

        }

        // switch如果case中没有break: 就会形成穿透效果: 直接进入下一个case(哪怕条件不满足), 直到遇到break或者default或者全部执行完才结束

        // 代表的是if中的逻辑或运算: if(op =='+' || op == '-' || op == '*')

        // 穿透解决的是代码的共用的问题

十一.循环

1.while循环

条件在外部定义

条件变化在循环体中变化

适合: 不限定次数的循环( 死循环),后端用的多

  // 递增

        let i = 0

        while (i < 10) {

            document.write(`月薪过万`)

            i++

        }

2.for循环

条件初始化, 条件判定, 条件变化: 都在for()小括号中

循环体: 只要专注解决业务问题

适合: 指定次数的循环

数组的循环遍历

循环案例

求和: 空筐思想

循环外面定义一个筐: 空的

循环里面不断的给筐添加内容(累加)

扩展平均值: 求和 / 数量

求极值: 擂台思想

循环外面定义一个擂主

循环里面不断pk擂主: 成功更换擂主

//1-100岁

for (let i = 1; i <= 100; i++) {

            document.write(`${i}岁<br>`)

        }


        for循环遍历数组

        // 复盘: 数组 数据的组合, 一个变量可以保存多个数据

        // heros数组: 有length代表长度, 元素下标从0开始, 到length - 1 结束

        // 访问元素: 数组的特点, 一次只能访问1个

        // 找到特点: 如果是顺序访问数组, 下标刚好从: 0 --- 数组.length - 1

        // for循环: 可以让一个变量从0 边到 数组.length - 1  for(let i = 0; i< 数组.length;i++)


        let heros = ['黄忠', '马超', '赵云', '关羽', '张飞']

        for (let i = 0; i < 5; i++) {

            document.write(heros[i])

        }

3.循环控制

给程序员提供了一种方便的机制, 让程序员可以在循环的内容控制循环

continue

跳过continue之后的代码

break 终止循环

4.循环嵌套

循环内部嵌入循环

执行逻辑

外部一次, 内部全部

十二.数组

1.作用: 存储多个数据

每个数据: 元素

每个元素: 都有下标(从0开始,每次变化1,最后一个: 数组.length - 1)

2.访问

数组名[下标]

arr[xx,xx,xx]




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容