JS基础

一、JS语言介绍

1、概念

  • 浏览器脚本语言
  • 可以编写运行在浏览器上的代码程序
  • 属于解释性、弱语言类型编程语言

2、组成

  • ES语法：ECMAScript、主要版本ES5和ES6
  • DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
  • BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、三种存在位置

1、行间式：存在于行间事件中

<body id="body" onload="body.style.backgroundColor='#0ff'">

</body>

2、内联式：存在于页面script标签中

<body id="body">

    <script type="text/javascript">

		body.style.backgroundColor='#0ff'

	</script>

</body>

3、外联式：存在于外部JS文件，通过script标签src属性链接

index.js文件

body.style.backgroundColor='#0ff'

index.html文件

<script src="./js/index.js"></script>

三、解释性语言特性决定JS代码位置

  • 出现在head标签底部：依赖型JS库
  • 出现在body标签底部：功能型JS脚本

四、JS语法规范

  • 注释
// 单行注释

/*

多行注释

*/
  • 以分号作为语句结尾（允许省略）

五、变量的定义

1、ES5定义变量

var num = 10;  // 无块级作用域变量

num = 10;  // 全局变量

2、ES6定义变量

let num = 10;  // 局部变量

const NUM = 10;  // 常量

3、变量(标识符)的命名规范

  • 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
  • 区分大小写
  • 不能出现关键字及保留字
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

六、三种弹出框

  • alert：普通弹出框
  • confirm：确认框
  • prompt：输入框

七、四种调试方式

  • alert()
  • console.log()
  • document.write()
  • 浏览器断点调试

八、数据类型

1、值类型

  • number：数字类型
var a = 10;

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'number')
  • string：字符串类型
var a = '10';

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'string')
  • boolean：布尔类型
var a = true;

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'boolean')
  • undefined：未定义类型
var a = undefined;

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'undefined')

console.log(a == undefined)

2、引用类型

  • function：函数类型
var a = function(){};

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'function')
  • object：对象类型
var a = {};

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'object')

console.log(a instanceof Object)

3、具体的对象类型

  • null：空对象
var a = null;

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'object')

console.log(a == null)
  • Array：数组对象
var a = new Array(1, 2, 3, 4, 5);

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'object')

console.log(a instanceof Object)

console.log(a instanceof Array)
  • Date：时间对象
var a = new Date();

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'object')

console.log(a instanceof Object)

console.log(a instanceof Date)
  • RegExp：正则对象
var a = new RegExp();

console.log(a, typeof a)

// 判断方式

console.log(typeof a == 'object')

console.log(a instanceof Object)

console.log(a instanceof RegExp)

4、类型转换

  • 数字|布尔 转换为 字符串
var a = 10 or true

String(a)

a.toString()
  • 布尔|字符串 转换为 数字
var a = true or '10'

Number(a)

+ a

parseFloat()

parseInt()
  • 字符串|数字 转换为 布尔
var a = 10 or '10'

Boolean(a)
  • 自动转换
5 + null  // 5

"5" + null  // "5null"

"5" + 1  // "51"

"5" - 1  // 4
  • 特殊产物
// NaN: 非数字类型

// 不与任何数相等，包含自己

// 利用isNaN()进行判断

九、运算符

1、算数运算符

前提：n = 5

运算符 描述 例子 x结果 n结果
+ 加法 x=n+2 7 5
- 减法 x=n-2 3 5
* 乘法 x=n*2 10 5
/ 除法 x=n/2 2.5 5
% 取模(余数) x=n/2 1 5
++ 自增 x=++n 6 6
x=n++ 5 6
-- 自减 x=--n 4 4
x=n-- 5 4

2、赋值运算符

前提：x=5，y=5

运算符 例子 等同于 运算结果
= x=y 5
+= x+=y x=x+y 10
-= x-=y x=x-y 0
*= x*=y x=x*y 25
/= x/=y x=x/y 1
%= x%=y x=x%y 0

3、比较运算符

前提：x=5

运算符 描述 比较 结果
== 等于 x=="5" true
=== 绝对等于 x==="5" false
!= 不等于 x!="5" fales
!== 不绝对等于 x!=="5" true
> 大于 x>5 false
< 小于 x<5 false
>= 大于等于 x>=5 true
<= 小于等于 x<=5 true

4、逻辑运算符

前提：n=5

运算符 描述 例子 结果
&& 与 x=n>10&&++n x=false,n=5（短路）
|| 或 x=n<10||n-- x=true,n=5（短路）
! 非 x=!n x=false,x=5

5、三目运算符

// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:

var tq = prompt("天气(晴|雨)")

var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";

console.log(res);

6、ES6语法解构赋值

  • 数组的解构赋值
let [a, b, c] = [1, 2, 3]

// a=1,b=2,c=3

let [a, ...b] = [1, 2, 3]

// a=1,b=[2,3]
  • 对象的解构赋值
let {key: a} = {key: 10}

// a=10
  • 字符串解构赋值
let [a,b,c] = 'xyz'

// a='x',b='y',c='z'

day50的更多相关文章

  1. day50——js补充

    day50 前端内容回顾 HTML 标签分类 块级标签:div p h1-h6 form hr br ul li ol table标签 内联标签:span a img label input sele ...

  2. CSS实现输入框的高亮效果-------Day50

    又到周末了,这一天天过的真快,明天应该回老家了.不知道会不会有机会进行编写.尽量争取吧,实在不想就这样间断.假设说从前会一天天无聊到爆,那如今自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可 ...

  3. day50 盒子显隐2D形变

    复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...

  4. day50 django第一天 自定义框架

    主要内容: 1.http协议 2.web框架 3.Django 1.http协议 1.1 http协议的简介 超文本传输协议(英文:Hyper Text Transfer Protocol,HTTP) ...

  5. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  6. CSS 之怀疑自己的审美 2 （Day50）

    阅读目录 伪类 选择器的优先级 css 属性操作 一.伪类 anchor伪类:专用于控制链接的显示效果 ''' a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链 ...

  7. Pyhton学习——Day50

    #HTTP协议# 又是转载:http://www.cnblogs.com/yuanchenqi/articles/6000358.html# 一 HTTP概述# HTTP(hypertext tran ...

  8. （day50）二、文件配置、ORM

    目录 一.静态文件 (一)配置html文件 (二)什么是静态文件 (三)静态文件配置 (四)静态文件动态绑定 (五)form表单POST请求配置 二.request方法初识 (一)request.me ...

  9. 学到了林海峰,武沛齐讲的Day50 django

    http请求中产生两个核心对象: http请求:HttpRequest对象 http响应:HttpResponse对象 所在位置:django.http 5/8结束

随机推荐

  1. DataTable的数据或表结构复制

    把datatable的结构全部数据或部分数据复制到一个新的datatabledatatable复制表结构:我们可以使用.clone()方法: DataTable oldDT = GetDataTabl ...

  2. python-装饰器模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 有时为了给某个对象而不是给整个类添加一个功能,使用继承机制是添加功能的一个有效途 ...

  3. angular.js 教程 -- 实例讲解

    angular.js AngularJS [1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Ang ...

  4. 通过sql的DMV查看数据库使用状态

    --数据库隔离级别 读未提交 SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED; --查找每次执行时引发I/O最多的前10位的查询 total_logi ...

  5. [基础架构]PeopleSoft Tuxedo 重要文件说明

    我们都知道PeopleSoft是由几个不同的服务组成的,他们在PeopleSoft体系结构中扮演着自己的角色.这些服务具有不同的文件结构并包含重要的可执行文件和配置文件. 以下是Peoplesoft体 ...

  6. 标准工作流（AWE）邮件通知

    今天遇到一个问题,UAT环境收不到流程待办,最终审批,最终拒绝等邮件. 检查了PT_WF_NOTIFICATION包的Notification类中的Send方法,发现如果app服务器在psappsrv ...

  7. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  8. Nginx的介绍

    1.什么是NGINX: Nginx是一个开源的,支持高性能的.支持高并发的web服务软件和代理服务软件,它是由俄罗斯人lgor Sysoev开发的 Nginx具有高并发(特别是对于静态资源)占用系统资 ...

  9. python中pip

    经常在安装软件过程中用pip 安装,当时的我总觉得pip是给linux还有mac用的,所以就从没有仔细研究过pip,后来用了python才知道pip这么好用 今天总结一下pip的用法 我的电脑是win ...

  10. 从零自学Java-5.使用条件测试进行判断

    1.使用if语句进行最基本的条件测试:2.测试一个值大于还是小于另一个值:3.测试两个值是否相等:4.使用与if语句对应的else语句:5.组合多个条件测试:6.使用switch语句进行复杂的条件测试 ...