文档章节

前端的那些事之JavaScript(上)

上官清偌
 上官清偌
发布于 2016/12/09 18:17
字数 1522
阅读 11
收藏 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
博文 85
码字总数 118519
作品 0
浦东
程序员
用js来实现那些数据结构及算法—目录

  首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做《学习JavaScript数据结构和算法》(第二版),人民邮电出版社出版的这本书。github代...

zaking
05/10
0
0
如何在疲劳的JS世界中持续学习

作者简介 cnfi 蚂蚁金服·数据体验技术团队 本文翻译自《Stay updated in JS fatigue universe》,并对内容有所补充和修改。 部分内容参考《HOW TO KEEP UP TO DATE ON FRONT-END TECHNOLOG...

蚂蚁金服数据体验技术
05/02
0
0
精读 The Cost of JavaScript

精读 The Cost of JavaScript 36 人 如今,JavaScript 仍然是我们向移动终端分发页面时成本最高的资源,因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题,用户实...

hijiangtao
08/05
0
0
JavaScript面试大全(二)

eval()是做什么的? [eval()是“魔鬼”][1] null,undefined 的区别? [来看看大神阮一峰的解释吧][2] 写一个通用的事件侦听器函数。 [JS事件监听器][3] Node.js的适用场景? [NodeJS优缺点及...

百变茄
2014/06/05
0
0
Limu:JavaScript的那些书

又好久没写东西了 ,写上一篇的时候还以为接下来的工作会轻松一些 ,结果未从我所愿呐 ,又是一阵忙碌。而这段时间穿插着做了很多12年淘宝校园招聘的前端面试 ,很多同学都有问到 ,学校里没...

随影求是
2012/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部