前端的那些事之JavaScript(上)
前端的那些事之JavaScript(上)
上官清偌 发表于1年前
前端的那些事之JavaScript(上)
  • 发表于 1年前
  • 阅读 10
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 前端的那些事之JavaScript

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();
共有 人打赏支持
粉丝 10
博文 79
码字总数 85670
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: