前端JavaScript-day01

JavaScript历史回顾

1990年,欧洲的伯纳斯·李 发明了浏览器,不可以浏览图片。
1992年,NCSA开始开发一个独立的浏览器,叫做Mosaic,可以浏览图片。

1994年12月,navigator发布了1.0版

1995年5月,Brendan Eich只用了10天,就设计完成了这种语言的第一版。最初名字叫做 Mocha,1995年9月改为LiveScript。12月改名叫做JavaScript当时的意图是将 JavaScript 作为 Java 的补充,用来操作网页。

  • 1996年3月,Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。
  • 1996年8月,微软模仿JavaScript开发了一种相近的语言,取名为JScript(JavaScript是Netscape的注册商标,微软不能用),首先内置于IE 3.0。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
  • 1996年11月,Netscape公司决定将JavaScript提交给国际标准化组织ECMA。目前共25个人。该委员会定期开会,所有的邮件讨论和会议记录,都是公开的。

JavaScript版本

  • 1997年7月,ECMA组织发布ECMAScript 1.0版。ECMAScript只用来标准化JavaScript这种语言的基本语法结构
  • 1998年6月,ECMAScript 2.0版发布。
  • 1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
  • 2008年7月,发布为ECMAScript 3.1,会后不久,ECMAScript 3.1就改名为ECMAScript 5。
  • 2009年12月,ECMAScript 5.0版正式发布。
  • 2015年6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”。

JavaScript特点

  • JavaScript:简称:JS
  • 是一门编程语言
  • 是一门客户端脚本语言,是一门弱类型的语言,声明都用var
  • 是一门解释性的语言,是一门动态类型的语言,当浏览器解析这行代码的时候,才知道这个变量具体是什么类型,
  • 是一门基于对象的语言,直接使用系统当中的对象.
  • js最初的目的:解决用户和浏览器之间的交互问题
  • 现在的目的:特效,游戏,应用程序,服务器端的程序

JavaScript的组成

ECMAScript DOM BOM

ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会
网景:JavaScript
微软:JScript
定义了JavaScript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器的功能的API
通过BOM可以操作浏览器窗口,比如:弹出框,控制浏览器跳转,获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API
DOM可以叭HTML看作是文档树,通过DOM提供的API可以对树上的节点进行操作,比如:购物车的增删改查

JavaScript的初体验

CSS: 行内样式。嵌入样式,外部样式

JavaScript的书写位置

-写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />
  • 写在script标签中
<head>
  <script>
    alert('Hello World!');
  </script>
</head>
  • 写在外部js文件中,在页面引入
<script src="main.js"></script>

注意点!!

引用外部js文件的script标签中不可以写JavaScript代码

ECMAScript标准 - JavaScript的核心

ECMA 欧洲计算机制造联合会,定义了JavaScript的语法规范

JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标 准与具体实现无关

BOM - 浏览器对象模型

Browser Object Model
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

Document Object Model
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

四种输出方式

a)  alert() 在页面中弹出提示框 
b)  console.log() 在控制台中打印出信息 
c)  document.write() 在页面中打印出 
d)  prompt(“这里写我们要提示的内容:”) 接收用户输入的信息

标识符

概念: 给变量,函数等取名字的字符序列
命名规则:
1 由数字,字母,下划线_,美元符号$ 组成
2 不能以数字开头
3 不能是关键字(关键字是js语言赋予特定含义的单词 如:var)
4 区分大小写变量及变量声明

什么是变量:在程序运行过程中,值会发生改变的量

如何声明: 用var声明:

  var a;  //声明一个变量a
      a = 10; //将10赋值给a
      简化为:
      var a = 10; // 声明一个变量命名为a,将10赋值给a
      声明多个变量
      var a = 10;// 声明一个变量a并赋值
      var b = 20;// 声明一个变量b并赋值
      var c = 30; // 声明一个变量c并赋值
      var a,b,c; //同时声明变量a b c   
      a = 10;
      b = 20;
      c = 30;
      var a = 10,b=20,c=30; //不建议

命名规则:

1 由数字,字母,下划线_,美元符号$组成
2 不能以数字开头
3 不能是关键字(关键字是JS语言赋予特定含义的单词如:var)
4 区分大小写

命名规范:

见名识意:applePrice name height color width
驼峰命名法:
applePrice
bigApplePrice 大苹果价格
backgroundColor 背景颜色
backgroundImage 背景图片
borderColor 边框颜色
borderWidth 边框宽度

常用命名:
sum(和)
max(最大值)
min(最小)
num(数字)
str(字符串名)
arr(数组名)
代码注释

typeof 操作符

代码注释

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

数据类型

Number 数值类型
整数,浮点数 ,NaN(非数字的数值类型)
10 10.1 NaN
String 字符串类型
‘10’ “哈哈” “10.1”
Boolean 布尔类型
true 真
false 假
undefined 未定义类型
只声明,未赋值
var a;
null 空类型
手动赋值
var a = null;
Object 对象类型

操作符

运算符 operator
5 + 6
表达式 组成 操作数和操作符,会有一个结果

算术运算符

+ - * / %  

一元运算符

一元运算符:只有一个操作数的运算符
5 + 6 两个操作数的运算符 二元运算符
++ 自身加1
– 自身减1
前置++:先加1,后参与运算
后置++:先参与运算,后加1
前置-- :先减1,后参与运算
后置-- :先参与运算,后减1

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true,结果为true,否则都是false
|| 或 两个操作数有一个为true,结果为true,否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==
==与===的区别:==只进行值得比较,===类型和值同时相等,则相等
var result = ('55' == 55);      // true
var result = ('55' === 55);     // false 值相等,类型不相等
var result = (55 === 55);   // true

! 非 取反

赋值运算符

= += -= * = /= %=

例如:
var num = 0;
num += 5;	//相当于  num = num + 5;

关系表达式

关系表达式作用:测试两个值之间的关系,根据关系返回true或false。

关系表达式总是返回一个布尔值。通常在 if、while、或者for语句中使用关系表达式,用于控制程序的执行流程。

三目运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

格式: 条件 ? 语句1: 语句2;

执行流程:先判断条件,如果条件为true,结果为语句1,如果条件为false,结果为false。

如果变量 age 中的值小于 18,则向变量 voteable 赋值 “年龄太小”,否则赋值 “年龄已达到”。

voteable=(age<18)?“年龄太小”:“年龄已达到”;

运算符的优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符   =  +=  -=
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值