分类 Web 中的文章

js intro 对象

对象 对象(object)是js的基本数据类型。是一种复合值:将很多值(原始值或者其它对象)聚合在一起,可以通过名字访问这些值。 每个属性都是一个名/值对(key/value),属性名是字符串,因此我们可以把对象看成从字符串到值的映射。 然而对象不仅仅是字符串到值的映射,除了保持自有的属性,js对象还可以从一个称为原型的对象继承属性。 对象的方法通常是继承的属性,这种原型式继承是js的核心特征。 js对象是动态的,可以新增属性,也可以删除属性。 除了字符串、数字、true、false、null和undefined之外,js中的值都是对象。 对象是可变的,我们通过引用而非值来操作对象。如果变量x是指向一个对象的引用,那么执行代码 var y = x; 变量y也是指向同一个对象的引用,而非这个对象的副本。通过y来修改这个对象也会对变量x造成影响 js的属性,除了名字和值之外,每个属性还有一些与之相关的值,称为 属性特性: - 可写,表明是否可以设置该属性的值 - 可枚举,表明是否可以通过for/in循环返回该属性 - 可配置,表明是否可以删除或修改该属性 除了包含属性之外,每个对象还拥有三个相关的对象特性: - 对象的原型(prototype)指向另一个对象,本对象的属性继承自它的原型对象 - 对象的类是一个标识对象类型的字符串 - 对象的扩展标记(extensible flag)指明了在ECMAScript5中是否可以向该对象添加新的属性 三类js对象和两类属性的区分: - 内置对象(native object)是由ECMAScript规范定义的对象或类。例如,数组、函数、日期和正则表达式 - 宿主对象(host object)是由js解释器所嵌入的宿主环境(比如WEB浏览器)定义的。客户端js中表示网页结构的HTMLElement对象均是宿主对象。既然宿主环境定义的方法可以当成普通的js函数对象,那么宿主对象也可以当成内置对象 - 自定义对象(user-defined Object)是由运行中的js代码创建的对象 - 自有属性(own property)是直接在对象中定义的属性 - 继承属性(inherited property)是在对象的原型对象中定义的属性 创建对象 创建对象主要有三种方法: - 对象直接量 - 关键字new创建 - Object.create()函数 对象直接量 对象直接量是由若干名值对组成的映射表,名值对中间用冒号分割,名值对之间用逗号分割,整个映射表用花括号括起来 属性名可以是js标识符也可以是字符串直接量 属性的值可以是任意类型js表达式、表达式的值就是这个属性的值 来个例子: var empty = {}; // 没有任何属性的对象 var point = { x:0, y:1 }; // 两个属性 var point2 = { x: point.……

阅读全文

js intro 语句

语句 js程序其实就是一系列可执行语句的集合。只要掌握了语句,就可以开始写js程序 默认情况下,js依照语句编写顺序依次执行,其中有很多语句和控制语句,来改变默认执行顺序: - 条件语句,js解释器根据一个表达式的值来判断是执行还是跳过这些语句,比如if语句、switch语句 - 循环语句,可以重复执行语句,如while语句和for语句 - 跳转语句,可以让解释器跳转至程序的其他部分继续执行,如break语句、return语句、 throw语句 表达式语句 赋值语句 递增、递减运算符 函数调用 greeting = "hello" + name; i *= 3; counter++; delete o.x; window.close(); cx = Math.cos(x); 复合语句和空语句 js可以讲多条语句联合在一起,形成一条复合语句,只需要用花括号将多条语句括起来即可。 下面代码可以当成一条单独的语句,使用在任何js希望使用一条语句的地方: { x = Math.PI; cx = Math.cos(x); console.log("cos(pi) = " + cx); } 关于语句块,需要注意: - 语句块结尾不需要分号,块中语句必须以分号结束,但语句块不需要 - 语句块中的缩进不是必须的,但是为了代码可读性,还是需要整齐的缩进更好 - js中没有快级作用域,语句块中声明的变量并不是语句块私有的 在js中,希望多条语句被当作一条语句使用时,使用复合语句来替代,空语句正好相反,允许包含0条语句 空语句如下: ; js执行空语句时,不会执行任何动作。但是创建一个具有空循环体时,空语句很有用 for(var i=0; i<a.length; a[i++]=0) ; 注意,在for循环、while循环或if语句的右圆括号后的分号不起眼,很容易造成一些不容易定位的bug if((a == 0) || ( b == 0)); // 这一行代码没有执行任何东西 o = null; // 这一行总会执行 如果有特殊目的需要使用空语句,最好在代码中注释……

阅读全文

js intro 表达式和运算符

表达式和运算符 程序中最简单的表达式就是,程序中的常量 变量名也是一种简单的表达式 复杂的表达式是由简单的表达式组成的 函数调用表达式是由函数对象的表达式和0个或多个参数表达式构成 可以使用运算符来将简单的表达式来组合成复杂的表达式 原始表达式 “原始表达式”,说简单点就是最简单的表达式,并且不再包含其他表达式 >js中原始表达式有以下: - 常量 - 直接量 - 关键字 - 变量 栗子: //直接量 1.23 // 数字直接量 "hello" // 字符串直接量 /pattern/ // 正则表达式直接 //保留字 true false null // 返回空 this // 返回“当前对象” //变量 i // 返回i的值 sum // 返回sum的值 undefined // undefined是全局变量,和null不同,不是一个关键字 对象和数组的初始化表达式 对象和数组的初始化表达式实际上是一个新创建的对象和数组,并不是原始表达式 数组初始化表达式 栗子: - [] //空数组 - [1+2,3+4] // 2个元素数组 [3,7] - var matrix = [[1,2],[3,4]] // 数组可嵌套……

阅读全文

js intro 类型/值/变量

词法结构 字符集:unicode 区分大小写,关键字、变量、函数名、标示符必须采取大小写一致 注释 ``` // 单行注释 /* ~一段注释~ / // 另一段注释 / 多行注释 多行注释 */ ``` 直接量 12 // 数字 1.2 // 小数 "hello world" // 一个字符串 'hi' // 另一种字符串 true // 布尔值 /^javascript$/gi //正则表达式直接量 null // 空 { x:1 ,y:2} // 对象 [ 1,2,3,4,5 ] //数组 标示符、保留字 TBD 可选的分号 在任何需要分割的地方使用 ; 进行分隔 在任何可以省略分号的地方都将其省略 如果不使用分号,由于语句的分隔规则,会导致一些意想不到的情况,建议无论什么时候都使用分号进行分割 类型、值和变量 js中的数据类型: - 数字 - 字符串 - 布尔值 - null - undefine - 对象……

阅读全文

js intro 基本介绍

什么是 JavaScript? JavaScript 是一门跨平台、面向对象的轻量级脚本语言。 在主机环境中, JavaScript能够通过连接环境对象而实现可控制编译。 JavaScript内置了一个包含一系列对象的标准库,比如数组,日期,数学和一个语言元素核心集合包括操作符,流程控制符以及语句等。JavaScript的核心部分可以通过组合已有语言核心对象来扩展语言以适应不同用途;例如: - 客户端的JavaScript通过提供控制浏览器及其文档对象模型(DOM)的对象来扩展语言核心。例如:客户端版本直接支持应用将元素放在在HTML表单中并且支持响应用户事件比如鼠标点击、表单提交和页面导航 - 服务端的JavaScript则通过提供有关在服务器上运行JavaScript的对象来可扩展语言核心。例如:服务端版本直接支持应用和数据库通信,提供应用不同调用间的信息连续性,或者在服务器上执行文件操作 JavaScript 和 ECMAScript 规范 JavaScript 的标准化组织是 ECMA ——这个欧洲信息与通信系统标准化协会提供基于 Javascript 的标准化方案(ECMA 原先是欧洲计算机制造商协会的首字母缩写)。这种标准化版本的JavaScript被称作ECMAScript,在所有支持该标准的应用中以相同的方式工作。公司可以使用开放标准语言来开发他们自己的JavaScript实现版本。ECMAScript标准被记录于ECMA-262规范说明中。 参照 JavaScript的新特性 以便学习更多关于不同版本的JavaScript和ECMAScript规范版本。 ECMAScript 规范是一套用于实现ECMAScript的要求。如果你想在你的ECMAScript实现版本 或 引擎(例如火狐的SpiderMonkey和Chrome 的V8)中实现标准兼容语言(例如ES6)的特性,这将十分有用. ECMAScript 文档并不有助于脚本编程。编写脚本时请参考 JavaScript 文档。 JavaScript上手 Javascript的上手是非常简单的,你仅仅只需要一个浏览器,比如Chrome浏览器 在Chrome浏览器菜单栏“设置按键”=>”更多工具“=>“开发者工具”可以打开控制台,点击Element旁边的console便可以打开console Hello world 不写一段Hello World代码,怎么能叫在学习一门语言呢,SO~DO it in the console 在console中输入 console.log('Hello World!') 你便能看到……

阅读全文

js 保留关键字以及危险变量名

Javascript 的保留关键字(标识符)不可以用作变量、标签或者函数名。 有些保留关键字是作为 Javascript 以后扩展使用。 关键字是严格不允许,而浏览器定义的变量名或者类名在使用的时候注意确保作用域 EMCAScript 中的关键字 break case catch continue s 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 ‘*’ 标记的关键字是 ECMAScript5 中新添加的。……

阅读全文

CSS入门笔记 - 认识盒子模型

引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧,后面再细细道来~ CSS元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型: * 块状元素 * 内联元素(又叫行内元素) * 内联块状元素 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input> 元素分类–块级元素 什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是块级元素。设置display:block就是将元素显示为块级元素。 如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点: * 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) * 元素的高度、宽度、行高以及顶和底边距都可设置。 * 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 元素分类–内联元素 在html中,<span>、<a>、<label>、 <strong> 、<em>就是典型的内联元素(行内元素)(inline)元素。 当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。 div{ display:inline; } ...... <div>我要变成内联元素</div> 内联元素特点: * 和其他元素都在一行 * 元素的高度、宽度及顶部和底部边距不可设置 * 元素的宽度就是它包含的文字或图片的宽度,不可改变。 友情提示:行内元素之间会产生间隙bug问题的场景: 当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下代码: <div> <a>1</a> <a>2</a> <span>33333</span> <span>44444</span> <em>555555</em> </div> 解决方法: 1. 写在一行,之间不要有空格之类的符号。 2. 使用font-size:0 div{font-size:0;} a,span,em{font-size:16px;} 元素分类–内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.……

阅读全文

CSS入门笔记 - 初识CSS

引言 本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 上次给大家带来了html部分的笔记,大家的反馈让我非常开心😄。 这次给大家带来css部分的第一篇笔记,由于本人比较蠢,学的很慢,而且css部分内容非常的细、广,需要不断code,才能体会其中细节,因此这次暂时只能带来本人已经整理好一部分,以供大家一同进步。 另外有一个求助,Atom中Toc插件生成页面,无法在Github或者简书中使用,希望有知道解决方法的高手,能够给予帮助 CSS入门笔记 - 初识CSS 1 - 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块(例如,选择器模块,盒模型模块),这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。 2 - 为何使用CSS? CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知,如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来,以便您能够: * 避免重复 * 更容易维护 * 为不同的目的,使用不同的样式而内容相同 例如: 您的网站可能有成千上万的页面外观相似。使用CSS,您可以将样式信息存储在公共的文件中以供所有的页面共用。 当用户显示页面时,用户的浏览器将样式信息和页面内容一同加载。 当用户打印页面时,您可以提供不同的样式信息,以便于打印出来的页面更易于阅读。 总之,在HTML中,您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 3 - CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器:指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成红色,而其他的元素(如ol)不会受到影响。 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示: p { color:red; text-align:center; } CSS 注释 注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。 CSS注释以 /* 开始, 以 */ 结束, 实例如下: /* p标签的样式 */ p { text-align:center; /* 文本居中 */ color:black; font-family:arial; } 4 - CSS样式引入 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种: >* 内联式css样式 >* 嵌入式CSS样式 >* 外部式CSS样式……

阅读全文

HTML 入门笔记 - 初识HTML

本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 基础框架 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标题标签</title> </head> <body> <h1>了不起的盖茨比</h1> <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p> </body> </html> 了解HTML的代码注释 什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。 语法: <!--注释文字 --> 认识标签<head> 文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 <head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head> <title>标签 在<title> 和<title> 标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。 例如: <head> <title>hello world</title> </head> <title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示 <body>标签,网页上显示的内容放在这里 在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。 开始学习<p>标签,添加段落 如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。 语法: <p>段落文本</p> 注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示。 了解<hx(1-6)>标签,为你的网页添加标题 文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法:<hx>标题文本</hx> x:1-6 注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1> h1-h6标签的默认样式: 标签代码: 在浏览器中显示的样式: 加入强调语气,使用<strong>和<em>标签 有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签 但两者在强调的语气上有区别:……

阅读全文