web前端入门学习笔记——JS基础(传智播客)

Javascript基础

1   聊聊Javascript

1.1 Javascript的历史来源

  94年网景公司   研发出世界上第一款浏览器。

  95年 sun公司   java语言诞生

  网景公司和sun合作。

  Java+script   ===> javascript

JavaScript 借鉴了C语言的基本语法,借鉴了JAVA的数据类型和内存管理,借鉴scheme语言将函数提升到第一阶级的地位(first class),借鉴self语言,使用基于原型(prototype)的继承机制。

1.2 W3c规范

       ☞结构标准        html

           ☞表现标准             css

       ☞行为标准      js

  

1.3JavaScript和ECMAScript的关系

    ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer ManufacturersAssociation,制定的标准。

JavaScript是由公司开发而成的,公司开发而成的一定是有一些问题,不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。

简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。就是说,你JavaScript学完了,Flash中的程序也会写了。

ECMAScript在2015年6月,发布了ECMAScript 6版本,语言的能力更强。但是,浏览器的厂商不能那么快的去追上这个标准。这些新的特性,我们就业班的深入,也会给大家介绍。

1.4 今天的JavaScript:承担更多责任

   2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。什么东西让人烦,什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。

2004年JavaScript命运开始改变了,那一年谷歌公司,开始带头使用Ajax技术了,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。

2010年的时候,人们更加了解HTML5技术了,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript

2011年,Node.js诞生,使JavaScript能够开发服务器程序了。

今天,JavaScript工程师是绝对的吃香,能够和iOS、Android工程师比肩,毫不逊色的。

现在,公司都流行WebApp,就是用网页技术开发手机应用。什么意思呢?手机系统有iOS、安卓、windows phone。那么公司比如说开发一个“携程网”APP,就需要招聘三队人马,比如iOS工程师10人,安卓工程师10人,windows工程师10人。共30人,工资开销大。并且,如果要改版,要改3个版本。所以,现在公司,都用web技术,用html+css+javascript技术来开发app。好处是不用招聘那么多工程师,只需要几个前端开发工程师即可。并且也易于迭代,就是网页一改变,所有的终端都变了。

2   Js介绍

◆js是一款运行在客户端的网页编程语言。

◆组成部分

      ★ecmascript   js标准

      ★dom        通过js操作网页元素

      ★bom        通过api操作浏览器

◆特点

     ★简单易用

     ★解释执行可以在浏览器中识别

对应的是:编译执行  java c#  转化为.dll可执行文件==>电脑读取.dll可执行文件

     ★基于对象没有封装和多态,不同于面向对象。直接操作元素。

       (面向过程:一步步写和执行,最后呈现结果,某一步出错结果出错。)

使用范围

◆表单验证

◆轮播特效

◆开发游戏

3   Js书写位置

◆内嵌式

由于会逐条执行,所以为了不覆盖掉HTML代码,一般JS会写在</html>的后面,即最后。

◆外链式

★先创建一个外部JS文件

★通过src将外部js调用。

◆写js代码的时候,分号不能省略。

◆推荐将JS代码写在html结束标签后边

  将多个JS文件合成为一个JS文件

4   输出消息的几种方式

4.1 alert()  在页面弹出一个对话框,早期JS调试使用。

4.2 Confirm()  在页面弹出一个对话框, 常配合if判断使用。比alert多了一个取消按钮。

4.3 console.log()  将信息输入到控制台,用于js调试。

4.4 prompt() 弹出对话框,用于接收用户输入的信息。

4.5  document.write()在页面输出消息

document.write不仅能输出信息,还能输出标签。其他方式不可以。

◆转义字符

\”   转双引

\’转单引

\n转换行

\r 转回车

4.6 Js注释

快捷键  ctrl+/

单行注释   //

多行注释  /*  */

5   变量

会变化的量。

变量是用来存储数据的容器。

◆定义变量

◆给变量赋值

“=”是赋值运算符

◆定义并赋值

5.1 变量的命名规范

◆不能以数字或者纯数字开头来定义变量名。

◆不推荐使用中文来定义变量名。

◆不能使用特殊符号或者特殊符号开头(-除外);

◆不推荐使用关键字和保留字来定义变量名。

★在JS中严格区分大小写的!!!

6   数据类型

6.1 简单数据类型

◆Number   数字类型

   包含正数  负数 小数

数字类型的表达方式

★十进制表示法

★十六进制表示法

从0-9,a(A)-f(F)表示数字。以0x开头。

★八进制表示法

0开头,0-7组成。

◆字符串  String

凡是用双引号或者单引号引起的都是字符串。

 

◆布尔数据类型    Boolean

只有2个值一个是true, 一个是false.   实际运算中true=1,false=0

◆undefined    变量未初始化

定义了变量,没有给变量赋值

◆null  变量未引用  值为空   object 常用于数据销毁。

6.2 复杂数据类型

★ object  对象

★array  数组

7   判断数据类型

typeof()

8   比较运算符

<  >  <=  >=   ==  !=

9   算术运算符

◆+ 加号

    ★两个数字类型的变量相加,得到的是一个数字类型。

    ★一个数字类型和一个字符串相加,得到的是一个字符串。

◆—减号

 ★两个数字类型的变量相减,得到的是一个数字类型。

    ★一个数字类型和一个数字字符串相减,得到的是一个数字类型。

    ★一个数字类型和一个非数字字符串相减,得到的是NaN,是一个数字类型。

NaN,    not a number

◆/ 除号

 ★两个数字类型的变量相除,得到的是一个数字类型。

 ★一个数字类型和一个数字字符串相除,得到的是一个数字类型。

 ★一个数字类型和一个非数字字符串相除,得到的是NaN,是一个数字类型。   

★0做为除数的时候,得到结果  Infinity (无限大),是一个数字类型。

◆%  取余数

◆优先级  有()先计算()里边的

10   带操作的赋值运算

11   新知识

11.1   Date()对象

Date对象用于处理日期和时间。

11.2   Math对象

不用像data一样需要先创建,可以直接使用。

◆Math.ceil()   天花板函数    向上取整

    ★如果是整数,取整之后是这个数本身

    ★如果是小数,对数进行向上舍入。

◆Math.floor()  地板函数

★如果是整数,取整之后是这个数本身

      ★如果是小数,对数进行向下舍入。

◆Math.max()

◆Math.min()

◆Math.pow()

◆Math.round() 

◆Math.random()

12   数据类型转换

12.1   数字类型转字符串

  String()

 

 变量.toString()

12.2   字符串转数字类型

◆Number

  ★数字类型的字符串,转换之后得到的数字。

  ★非数字字符串,转换之后得到是NaN。

  ★小数类型的字符串,转换之后得到的是原数字。

◆parseInt

★整数数字类型的字符串,转换之后得到的整数数字。

★数字开头的字符串,转换之后得到的是前边的数字。

★非数字开头的字符串,转换之后得到的是NaN。

★小数类型的字符串,转换之后取整。

◆parseFloat

★整数数字类型的字符串,转换之后得到的整数数字。

★数字开头的字符串,转换之后得到的是前边的数字。

★非数字开头的字符串,转换之后得到的是NaN。

★小数类型的字符串,转换之后得到的是原数字。

12.3   转布尔类型

Boolean()

★数字和字符串转完之后为true。

★undefined、null、0转完之后为false.

12.4   隐式数据类型转换

在运算过程中,程序自己进行的数据转换(程序员没有操作)

12.5   逻辑运算符

逻辑运算只有2个结果,一个为true,一个为false.

◆且&&

★两个表达式为true的时候,结果为true.

◆或||

★只要有一个表达式为true,结果为true.

◆非!

★和表达式相反的结果。

13   等号运算符

“=”赋值运算符

“==”只判断内容是否相同,不判断数据类型。

“===”不仅判断内容,还判断数据类型是否相同。

!=  只判断内容是否不相同,不判断数据类型。即只要内容不相同就是true。

!==不全等于  不仅判断内容是否不相同,还判断数据类型是否不相同。即内容和类型只要有一个不相同,就是true。

13.1   变量的集体声明

14   If...else  条件判断

If(条件表达式){

如果条件表达式结果为true,执行该处代码。 如果条件表达式结果为false,执行下边代码。 

}else{

如果条件表达式结果为false,执行该处代码。

}

15   If else嵌套

If(条件表达式){

如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。

}else  If(条件表达式){

如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。

}else  If(条件表达式){如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。

}else{

如果上边条件表达式结果都为false,执行该处代码。

}

16   三元表达式

表达式?结果1:结果2;

如果表达式结果为true,执行结果1,如果表达式结果为false,执行结果2.

可以理解为if else  的另外一种写法。

8代码调试

◆先让程序运行一遍

◆f12   代码调试工具

◆刷新页面

◆找到一步步调试,每点击一次,执行一步。

◆添加变量或者表达式到监视窗口。

选择变量或表达式右键add to watch.

◆监视窗口


17  Switch语句

  Switch(变量){

case1:

如果变量和1的值相同,执行该处代码

break;

case2:

如果变量和2的值相同,执行该处代码

break;

case3:

如果变量和3的值相同,执行该处代码

break;

default:

如果变量和以上的值都不相同,执行该处代码

break;

}

★switch后边的变量和case后边值的数据类型必须保持一致。

 

◆Switch语句可以对变量进行集体判断:

18   自增自减

i++  ++i

◆在不参与运算的情况下,i++和++i都是在变量的基础加1

◆在参与运算的情况下

Var i=123;

Var j=i++;  先将i的值123赋值给j,之后再自增

j的值为123  i 的值为124

Var j=++i;  i先自增,在赋值给j

J的值为124,i的值 124

19  While循环

While(条件表达式){

   只要条件表达式结果为true,循环一直执行,当条件表达式结果为false的时候,循环终止

}

While循环语句需现在循环体外定义变量。

20  Do while

Do{

循环体代码;首先执行该循环体代码一次。如果while后边的表达式结果为true,该循环体会一直循环。如果结果false,该循环终止。

}while(条件表达式)

◆do  while 比while循环多循环一次。

21  for循环

for(定义变量;条件表达式;自增自减){

循环体代码

}

执行顺序:

◆首先定义变量

◆如果条件表达式结果为true的时候,执行for循环里的代码,如果为false,循环体代码终止执行。

◆先执行变量和条件表达式循环一次,再执行自增自减。

22  Break语句

在循环体内,只要代码遇到break,程序立马结束当前循环。

当前循环指的是break语句所在的循环体。

 

23  continue语句

Continue语句指的是跳出本次循环,该语句后面的代码不再执行,整个循环体继续循环。

 

24  数组

24.1     定义

24.2   赋值

  ☞数组中通过下标的方式进 行赋值。下标从0开始。

24.3   数组的初始化和遍历

24.4   数组数据的个数  length属性

通过数组名.length获取数组长度(元素个数)

24.5   数组合并

使用concat方法合并数组。

24.6   Join 方法  返回一个字符串

Join方法返回一个字符串数组。

 

25  函数

☞函数(方法)定义

 通过 function  关键字

和自定义方法名既可定义一个函数。  如下:

 

方法的调用。

  

 

函数案例介绍:

 
  • 16
    点赞
  • 89
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值