- 博客(22)
- 收藏
- 关注
RSS订阅原创 数据分为单组时也没什么影响。因为，数据有多大，这组就有多大。
大家好，这里是笑颜の行方。本篇描述的是JavaScript里一种常见的数据组合——数组。嗯……数组就是数据的组合嘛。怎么写？很简单：var array = [1, 2, 3];声明一个变量array，用赋值等号连接右边，就是由方括号括起来的一堆数字。好了，这样就创建好一个数组了。创建起来是不难啦，那么数组是怎么应用的？比如，如何把数组里面的数字单独取出来？接下来就展现一下数组的...
2019-09-09 20:52:07
141
原创 没有对象？来写脚本，分分钟就可以创建一个尽情使用！
大家好，这里是笑颜の行方。本篇描述的是，JavaScript中的——对象。大家有对象吗？没有吗？如果没有的话，那真是来对地方了。很好，我们现在就来创建一个：var xiaoming={ name: "小明", age: 6}怎么样？是不是很简单？先声明一个变量xiaoming，在赋值符号后面写一对花括号。花括号里面呢，就需要注意啦。每一行都有个：冒号。冒号左边呢，叫做“...
2019-09-08 14:07:04
132
1
原创 包涵万数，无需时操作稳定，有需时，结论瞬息万变。
大家好，这里是笑颜の行方。本篇描述的是JavaScript中的主角——函数。什么是函数呢？y=kx+b那样的吗？嗯……我们先写一个最简单的函数。function dayin(){ console.log("Hello World");}我们先声明一个函数，名字叫做dayin。（= =词穷）后面的大括号叫做函数体。然后在函数体里面写一行打印方法，打印出Hello World。...
2019-09-08 13:26:58
131
原创 不断往复执行的脚本，其实也不需要写那么多。
大家好，这里是笑颜の行方。本篇描述的是JavaScript中的循环。循环，就是重复执行相同的脚本。嗯，比如，我们想打印8次Hello World。console.log("Hello World");console.log("Hello World");console.log("Hello World");console.log("Hello World");console.log...
2019-09-08 12:16:36
190
原创 如果可以，我会一直走下去。如果不行，我会走另一条路。如果站在十字路口，我会……寻找合适的路。
大家好，这里是笑颜の行方。本篇描述的是JavaScript中的条件判断。人生，充满了选择。其实，程序也是（笑）。如果这是真的话，就好了。如果用代码实现的话，就好了。if (true) { console.log("太好了");}// "太好了"如果这是假的话，就不好了。if (false) { console.log("太好了");} else { console.l...
2019-09-07 17:53:12
165
原创 逻辑运算真真假假，假假真真，迷糊不清，就由电路图来解释这一切！
大家好，这里是笑颜の行方。本篇描述的是，逻辑运算符。逻辑运算？其实是在众多真真假假之间寻求最终答案。先来一个简单的例子：console.log(!true); // falseconsole.log(!false); // true解读一下：!，也就是感叹号，可理解为相反。相反的true，就是false。相反的false，就是true。感叹号是逻辑运算符之一，也是相对容易理解...
2019-09-06 15:16:36
4284
原创 判断真假？其实是互相比较。
大家好，这里是笑颜の行方。本篇描述的是比较运算符和布尔值（Boolean）。布尔值是什么？只有两个，true(真) 和 false(假)。如果不好理解的话，可以用真命题和伪命题这两个概念思考一下。或者，对 与 错，这个条件是否成立。嗯，问大家一个问题。1 > 2，这个是对的还是错的？我们交给程序判断一下。console.log(1 > 2); // false1大...
2019-09-05 23:13:34
255
原创 为了结果不报错，JavaScript的调包功夫可谓出神入化。
大家好，这里是笑颜の行方。本篇描述的是JavaScript中诡异的隐式转换。字符串相加会怎样？var a = "Hello";var b = "World";console.log(a + b); // "HelloWorld"很正常，拼接在一起。那么，把减乘除用在字符串上呢？var a = "Hello";var b = "World";console.log(a - b)...
2019-09-05 21:17:52
128
原创 数据运算，需要认识符号的运行机制。
大家好，这里是笑颜の行方。本篇描述的是，JavaScript中的运算符。说到运算符，就离不开数学。就像这样：console.log(1 + 1); // 2console.log(2 - 1); // 1console.log(2 * 4); // 8console.log(6 / 2); // 3程序运算符里面的乘号用 * 表示，除号用 / 表示。有些计算器的按键也是这么显示的...
2019-09-05 20:46:08
123
原创 什么都要分类的时代，数据也需要好好分清楚才行。
大家好，这里是笑颜の行方。本篇描述的是JavaScript中会遇见的各种类型的数据。这些数据在CPU运作时，会从磁盘走到内存里。嗯，内存。数据们其实是跑到内存条里面了。（笑）在JavaScript中，这些数据分为两大阵营：那就是—— 栈内存 阵营，和 堆内存 阵营。为什么会这样分？栈内存是什么？堆内存又是什么？别急，先从最基本开始介绍。先看看栈内存阵营里面的数据类型，也称作基本类型...
2019-09-03 21:44:46
93
原创 变化无常的值，如果有个代名词的话？
大家好，这里是笑颜の行方。本篇描述的是JavaScript中的最基本概念——变量。变量？为什么变？其实还有个相对的概念，叫做 常量 。常量其实就是不会变化的，常量的值是固定的。所以，变量的值 不是固定的 ，而是随着不管是变量还是常量，我们都可以当作是一个代名词，即姓名那样的概念。这个代名词，就是创造新事物时，取相对应的名字而已。JavaScript中的变量，就需要一个名字。起名字...
2019-09-02 21:32:15
106
原创 上帝视角，元素上天下地无所不能，静观其变 ——论 z-index 。
大家好，这里是笑颜の行方。本篇描述的是，z-index。z-index是什么？二维坐标有两个轴，x和y。三维呢？比起二维，多出一个z。页面通常是二维平面的。X轴从页面左上角，向右方，X的像素值增加，反之减少。Y轴从页面左上角，向下方，Y的像素值增加，反之减少。那么Z轴在哪里？嗯……Z轴在页面上就是这样的。我们平常只看到X和Y，Z的话，就是显示器发向眼睛的光线(笑)。由于...
2019-08-15 23:35:44
127
原创 块元素横向排列在一起？轻飘飘的队伍也不错——论 float 浮动。
大家好，这里是笑颜の行方。本篇描述的是，float，即浮动属性。大家知道，块元素在页面中默认是独占一行的。先定义五个块元素，再定义相对的样式：<body> <div id="father"> <div>A</div> <div>B</div> <div>C</div>...
2019-08-11 16:45:10
313
原创 我在这里，你在哪里？方法不对，将迷失一切。——论 position 属性与相对、绝对定位。
大家好，这里是笑颜の行方。本篇描述的是 position 属性，即 定位。相对定位是怎样的？绝对定位又是怎样的？先来看看 relative ，即 相对定位。相对定位，相对于谁？我们来看看效果。上码！<body> <div id="father"> <div style="background-color: #f00"></div&g...
2019-08-11 15:38:24
141
原创 页面中玩捉迷藏，那些家伙到底去哪儿了？
大家好，这里是笑颜の行方。本篇描述的是，页面中那些被忽视的存在。我们先展示一幅普通不过的景象。代码如下：p>span{ text-align: center; padding: 0 10px;}#father>div{ width: 100px; height: 50px;}<body> <p> <span s...
2019-08-11 12:15:03
112
原创 行元素的盒模型，inline的脾气有点古怪。
大家好，这里是笑颜の行方。本篇描述的是inline，即行元素。行元素有什么样的特性呢？先定义一个，再定义行元素的样式，最后看效果。嗯，方便各位阅读起见，这里只放入body中的内容。<body> <span>这是一段文本</span></body>样式这样定义*{ margin: 0; padding: 0; ...
2019-08-11 10:06:43
143
原创 三角形？border属性，了解一下。
大家好，这里是笑颜の行方。本篇描述的是border属性。如何给元素添加边……才不对！标题里的三角形呢？边框不就是用下面代码就会显示出来的嘛！div{ width: 100px; height: 50px; border-width: 1px; border-style: solid; border-color: #000;}还可以简写呢！div{borde...
2019-08-10 18:01:41
76
原创 随元素而来，随元素而去，变一变样式，深藏功与名——论伪元素
大家好，这里是笑颜の行方。本篇描述的是页面中一种神奇的存在——伪元素。在CSS中有这样两个存在：:before 和 :after如何使用呢？这需要满足一些条件。我们先定义一段文本：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document&l...
2019-08-10 16:57:25
216
原创 HTML5标准首当其冲的，!DOCTYPE html
大家好，这里是笑颜の行方。本篇描述的是HTML5中的第一个标签，!DOCTYPE html。说到HTML5，这是近些年来出现的网页标准。规定了很多新特性，让我们这些码农不得不感叹时代的变化，真的是越来越快了啊。在编写H5标准的网页中，有个让我...
2019-08-10 11:35:08
246
原创 文本居中，文本垂直居中，论line-height的妙用。
大家好，这里是笑颜の行方。本篇描述的是 line-height 这个属性，也就是行高。进入正题之前，先问大家一个问题。如何使一段文本在块元素内 居中？这个问题，我想很多人都能答上来。div{ width: 200px; height: 50px; background-color: aqua; text-align: center;}在块元素的样式里设置 文本居中 ...
2019-08-10 10:07:20
237
原创 CSS中margin，也许你未见过它的另一面。
大家好，这里是笑颜の行方。也可以把の去掉，叫笑颜行方也行。咳咳…稍微自我介绍，接下来进入正题。在CSS中，有个叫盒模型的玩意。盒模型是由 内容+内边距+边框+外边距 形成的。（鄙人习惯用中文称呼。请别太在意。）本篇想描述的，是盒模型中处于最外层的外边距，也就是margin。假设在一个页面定义一个div（= =日常操作）定义这个div的外边距有以下方法。div{ mar...
2019-08-09 23:09:45
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人