day50
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的更多相关文章
- day50——js补充
day50 前端内容回顾 HTML 标签分类 块级标签:div p h1-h6 form hr br ul li ol table标签 内联标签:span a img label input sele ...
- CSS实现输入框的高亮效果-------Day50
又到周末了,这一天天过的真快,明天应该回老家了.不知道会不会有机会进行编写.尽量争取吧,实在不想就这样间断.假设说从前会一天天无聊到爆,那如今自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可 ...
- day50 盒子显隐2D形变
复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...
- day50 django第一天 自定义框架
主要内容: 1.http协议 2.web框架 3.Django 1.http协议 1.1 http协议的简介 超文本传输协议(英文:Hyper Text Transfer Protocol,HTTP) ...
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- CSS 之怀疑自己的审美 2 （Day50）
阅读目录 伪类 选择器的优先级 css 属性操作 一.伪类 anchor伪类:专用于控制链接的显示效果 ''' a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链 ...
- Pyhton学习——Day50
#HTTP协议# 又是转载:http://www.cnblogs.com/yuanchenqi/articles/6000358.html# 一 HTTP概述# HTTP(hypertext tran ...
- （day50）二、文件配置、ORM
目录 一.静态文件 (一)配置html文件 (二)什么是静态文件 (三)静态文件配置 (四)静态文件动态绑定 (五)form表单POST请求配置 二.request方法初识 (一)request.me ...
- 学到了林海峰,武沛齐讲的Day50 django
http请求中产生两个核心对象: http请求:HttpRequest对象 http响应:HttpResponse对象 所在位置:django.http 5/8结束
随机推荐
- SVN查看所有日志提交记录
1. svn默认显示最近一周的文件提交和修改记录,怎么查看更长时间的日志记录呢? 2. TortoiseSVN 3. 点击show all 或者NEXT 100,就可显示更长时间的文件提交记录.
- js-ES6学习笔记-Class
1.ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 2. //定义类 class Point { constructor(x, y ...
- python学习笔记之——unittest框架
unittest是python自带的单元测试框架,尽管其主要是为单元测试服务的,但我们也可以用它来做UI自动化测试和接口的自动化测试. unittest框架为我们编写用例提供了如下的能力 定义用例的能 ...
- Android实用代码
1.展开.收起状态栏 public static final void collapseStatusBar(Context ctx) { Object sbservice = ...
- 带你从零学ReactNative开发跨平台App开发（二）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- Python+Selenium笔记（十二）：数据驱动测试
(一) 前言 通过使用数据驱动测试,实现对输入值和预期结果的参数化.(例如:输入数据和预期结果可以直接读取Excel文档的数据) (二) ddt 使用ddt执行数据驱动测试,ddt库可以将测试 ...
- Git 命令快速浏览
Git 命令快速浏览 创建 Git 可管理的仓库 git init 查看当前仓库的状态 git status 添加到仓库,实际上是添加到暂存区 git add [-A | --all] git add ...
- .NET Dispose模式的实现
以下是代码: /// <summary> /// Dispose Pattern /// </summary> /// <remarks> /// 由逻辑可知: / ...
- c#考勤统计
现在项目需求,需要从多张表中获取数据,组装到一个实体对象中,并通过计算统计出每个员工的考勤记录.(全凭自己思考做的,不足的地方希望各位大神指正!毕竟自己能力有限,思考不全) 考勤统计列表: 明细列表: ...
- Oracle EBS OPM close batch
--close_batch --created by jenrry DECLARE x_message_count NUMBER; x_message_list VARCHAR2 (4000); x_ ...