文档章节

前端的那些事之JavaScript(上)

上官清偌
 上官清偌
发布于 2016/12/09 18:17
字数 1522
阅读 12
收藏 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
博文 84
码字总数 118568
作品 0
浦东
程序员
web前端,使用HTML5+CSS+JS框架有那些好处

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

it智云编程
07/12
0
0
用js来实现那些数据结构及算法—目录

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

zaking
05/10
0
0
为什么要前端构建?讲得很清楚全面

为什么要前端构建? JavaScript和CSS的依赖问题 我们经常出现的另一个问题,就是JavaScript和CSS的依赖问题,说的通俗点就是JavaScript和CSS的在页面中的顺序问题! 我们经常发现CSS没起作用...

柴高八斗之父
08/30
0
0
【JavaScript】兼容IE6的JS模板化

版权声明:本文为博主原创文章,未经博主允许,欢迎随意转载,标好作者+原文地址就可以了!感谢欣赏!觉得好请回个贴! https://blog.csdn.net/yongh701/article/details/78354326 所谓的JS模...

yongh701
2017/10/26
0
0
JavaScript面试大全(二)

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

百变茄
2014/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOasd

能够使用FileUtils常用方法操作文件 字符流体系介绍 : 在 IO 开发中, 我们传输最频繁的数据为字符, 而以字节的方式来传输字符数据会使程序员丧失对数据内容的判断.因为程序员只认识字符, 不认...

码农屌丝
23分钟前
0
0
创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
9
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部