文档章节

前端的那些事之JavaScript(上)

上官清偌
 上官清偌
发布于 2016/12/09 18:17
字数 1522
阅读 13
收藏 0

1.javascript的概念以及和ECMAScript的关系

  • B/S架构非常火热,B代表的是浏览器,Javascript是浏览器内置语言,采用V8引擎,又称:ECMAScript
  • ES5和ES6:     ES5是基于客户端开发的,ES6是基于服务端开发
  • JavaScript的特点:动态性(轻量级),弱类型(松散型),跨平台性

javascript的语法

  • script标签的位置:
    • a. 不要写在html标签外面
    • b.不要写在head标签里面
    • c.script标签一定要放在body结束标签的前面
    • type属性设置脚本语言的类型(默认type="text/javascript")
    • 最推荐的方式一定是html代码和逻辑分离,通过script标签的src属性去引入js
    • 一个script标签只能引入一段js代码

html,css,javascript的注释问题

  • html注释:<!--这是一个HTML的注释-->
  • css注释:/这里是CSS中的注释/
  • javascript中注释
    • //这里是单行注释
    • 多行注释
                /*
 		 * @author:上官清偌
 		 * @date:2011-07-26 21:30
 		 * @descript:这是多行注释内容
 		*/
  • 变量:可以改变的数量
    • [变量][引用] -通过变量去“引用”内存中的数据
    • 变量第一次使用一定要通过var 关键字来定义
  • 变量命名规范
    • 1.由字母数字下划线(_)和美元符号($)组成
    • 2.不能以数字开头
    • 3.变量名称要有含义
    • 4.如果遇到由多个英文单词所组成的变量名称,使用驼峰命名法
    • 5.变量的首字母一定是小写
    • 6.它跟css类命名规范相似,但是不同,css中允许出现“-”,child-node 数据类型

js中的数据类型

- 基本数据类型:undefiend 没有定义数据类型,number 数值数据类型,string 字符串数据类型用来描述文本,boolean 布尔类型 true|false 
- 复杂的数据类型:function 函数类型,object 对象类型
- 通过 typeof  关键字得到一个数据的数据类型

对象:世界上任何一个事物,它都有可能由两种不同的特征所组成

- 属性 : 属性名称 : 属性值(可以是六种数据类型中的任意一种)
- 行为
    - 对象它又一系列静态的属性特征和一系列动态的行为特征所组成
    - 只要是对象的属性特征,属性名字一定是名词;只要是对象的行为特征,行为的名字一定是动词
    - 通过"."操作符来访问对象中的属性,相当于我们中文中的“的”的含义
- 对象里面有很多成员,其中静态的特征我们叫做成员属性;动态的行为我们叫做成员方法

函数(行为、动作、方法、功能)

- 涵数的组成:关键字function+函数的名字+一对小括号(小括号里面是形参列表)+一对大括号(大括号里面就是函数的主体内容)+ return返回值
- 例如:
```
    function run(arg1,arg2,...){
		alert("上官清偌");
		return 返回值;
	}
```
- 涵数的作用:函数是一段逻辑代码的封装,使之变成一个功能
   -  一个函数体中没有return关键字的时候,默认最后一句代码return undefiend
   - 函数是个特殊的代码,函数体里面的内容不会马上执行,只有调用的时候才执行
   - 系统本身定义了一些函数,例如:alert(),我们自己定义的函数,就叫做自定义函数

表达式

- 由一组数据和运算符之间组成的一个公式,叫做表达式

运算符 (通常操作数值)

- 算术运算符:+[加]、-[减]、*[乘]、/[除]、%[取余]
    - 如果加法运算符左右两边有一边不是数值,那么就会自动转型为字符串,而且结果就变成了字符串的拼接 ,例如:str+="上官清偌";
    - 如果减法运算符左右两边有一边不是数值,那么就会自动转型为数值
- 赋值运算
    - =[赋值]、++[数值加1]、--[数值减1]、+=[数值加某个值后复制]、-=、*=、/=
- 比较运算符:==[===]、!=[不等于]、>、<、<=、>=
    - 比较运算符结果一定是boolean数据类型
- 逻辑运算符
    - && 与:每个&&表达式的结果都要为true,最后整个结果才为true
        - 如果&&左边的表达式的结果为false,右边的就不会去执行
        - || 或:所有的||表达式里面只要有一个为true,整个结果就为true,所有的都是false,结果才为false
            - 如果||左边的表达式的结果为true,右边的就不会去执行
- ! 非
    ```
                   //boolean: true===true //true          false===false//true
		//number:0===false //false   
		//undefined[未定义]===false  //false    null[空引用]===false //false
		//string ""[空字符串]===false //false  ""==false; //true
		//object {}[空对象]===true  //false
		//function===true 
    ```
- 三元运算符(三元表达式)
    - exp1 ? exp2 : exp3;
    - 如果exp1为真 返回exp2 否则返回exp3

条件结构

```
    当达成某种条件的时候,才执行某段代码
	如果达到条件就 干什么事
	if(){}
	每遇到一个if都会去判断里面的条件,只要达到条件,就执行代码

	if(){

	}else{

	}
	要不执行if否则执行else,两者是相斥的

	if(){

	}else if(){

	}else if()...{

	}else{

	}
	只会执行中间的一个,如果上面都没满足,则执行else
```

三元表达式

   ```
        exp1?exp2:exp3;
    ```
    - 1.前提1:如果是if...else(二选一)
    - 2.前提2:代码块只有一句代码的时候
    - 3.通常都会使用三元表达式而不是if...else,因为代码可读性更高,代码量更少,性能更好

switch[开关]...case[案例]

- 1.  if..else if...else里面每个判断项都是相斥
- 2.而switch...case里面每个case不见得是排斥的,取决于先达到哪个条件,后面的都会执行

构造涵数

  • 一个对象可以有属性和方法
  • 构造涵数中用this申明的是公有的属性和方法
var Car = function() {
  // 这是私有变量
  var speed = 10;

  //这是公有的方法
  this.accelerate = function(change) {
    speed += change;
  };

  this.decelerate = function() {
    speed -= 5;
  };

  this.getSpeed = function() {
    return speed;
  };
};

var myCar = new Car();

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
WisdomPlanet-Javascript-Primer

WisdomPlanet-Javascript-Primer是一本Javascript入门方面的前端书,目前刚开始连载。书中以小说故事模式开展,讲解了JS的语言基础,作者希望通过此书让刚学编程或准备学习JS的同学作为一个学...

念念之间
2015/04/01
1
0
web前端,使用HTML5+CSS+JS框架有那些好处

相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架、CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么?是不是节约了开发项目时间陈本,这事多么伟大的一箱工...

it智云编程
07/12
0
0
Native 与 H5 交互的那些事

Hybrid开发模式目前几乎每家公司都有涉及和使用,这种开发模式兼具良好的Native用户交互体验的优势与WebApp跨平台的优势,而这种 模式,在Android中必然需要WebView作为载体来展示H5内容和进...

oschina
2016/05/03
11.2K
10
在 Node 的帮助下,横跨多平台的 JavaScript 已经赢了

编者按:很多人都在寻找一个能够统一编程语言江湖的“老大哥”,战火也重来没有停止过。Jonny Asmar在hackernoon上发表了一篇文章指出,因为Node的存在,JavaScript具备了多功能性,已经有了...

达尔文
01/13
2.7K
24
作为一个酷爱前端的程序猿该怎么进阶 ??

Html Javascript CSS 上大学那会就接触到了,一直用到今天加上现在3年的Web全职工作经验算起来接触前端已经快6年了尤其喜欢 Javascript 的简单随意. 刚进公司那会呢是做后台开发的ASP.NET + P...

要吃九个橙子
2014/05/21
677
7

没有更多内容

加载失败,请刷新页面

加载更多

生物智能与AI——关乎创造、关乎理解(上)

摘要: 原来人工智能跟人类智能有那么深的联系! 几百万年前,第一次人类智能的星火出现在非洲大陆,并且持续发展,最终在大约10万年前在智人的大脑中达到顶峰。作为现代人类,我们只能想象我...

阿里云官方博客
8分钟前
0
0
MiniUi系列 详情逻辑

row是获取的行的数据,通过id去查看对应id的详情,所有数据是在datagrid加载完后的,比如有5条,我可以选中某一条,我也可以把获取到的数据直接传到详情页面,仅就是追加row.xx,row.xx,这样就...

architect刘源源
9分钟前
0
0
android adb实用命令小结

adb的全称为Android Debug Bridge.是android司机经常用到的工具.但是问题是那么多命令写代码已经够费劲了,过段时间在次使用时压根记不住呀.本次的大餐就是为此开篇的.这一次我们不记命令.要用...

天王盖地虎626
13分钟前
0
0
vagrant 虚拟机 磁盘100%解决

在日常开发中,我使用vagrant+VirtualBox搭建开发环境 docker+docker-compose搭建了php+nginx+redis+mysql+ELK(Elasticsearch+Kibana+Logstash+php)+phpredisadmin 但是搭建了环境之后发现磁...

DamienChen
18分钟前
0
0
详解如何用爬虫批量抓取百度搜索多个关键字数据

本文介绍如何使用软件的流程图模式,免费采集百度搜索多个关键字的信息数据。 软件下载网址:www.houyicaiji.com 采集结果预览: 下面我们来详细介绍一下如何使用流程图模式,采集在百度输入...

技术阿飞
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部