文档章节

前端的那些事之JavaScript(上)

上官清偌
 上官清偌
发布于 2016/12/09 18:17
字数 1522
阅读 11
收藏 0
点赞 1
评论 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
码字总数 117370
作品 0
浦东
程序员
如何在疲劳的JS世界中持续学习

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

蚂蚁金服数据体验技术 ⋅ 05/02 ⋅ 0

5分钟,掌握9个风骚又简洁的JavaScript技巧

5分钟,掌握9个风骚又简洁的JavaScript技巧 编辑于 2018-05-08

优达学城(Udacity) ⋅ 05/16 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

精读《现代 js 框架存在的根本原因》

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

精读《现代 js 框架存在的根本原因

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿 ⋅ 05/07 ⋅ 0

以变制变——前端动态化代码保护方案探索

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文分享了腾讯防水墙团队关于机器对抗的动态化思路,希望能抛砖引玉,给现在正在做人机对抗的团队一些启发,帮助更多中小型公司...

腾讯云加社区 ⋅ 06/07 ⋅ 0

四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳 ⋅ 05/02 ⋅ 0

WEB前端学习JS灵魂之问:JS为什么是单线程的?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

给Web前端初学者的一些建议和学习方法路线

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 35分钟前 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 54分钟前 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部