墙上的堆积物

被稿子虐,被代码搞

D3.js:准备工作

只是作为个人学习的记录。其中的注解都不是很详细,还很乱!既然已经点进来了就随意看吧。


<!-- 第一次知道一个元素能指定多个类。多个class中间用空格分隔。-->
<p class="uplifting awesome">Awe-inspiring paragraph</p>
<!-- 比如uplifting和awesome就是两个class-->

<!--也第一次了解了DOM的概念-->

<!--相同属性可以应用给多个class,用,分隔-->

<style type="text/css">
selectorA,
selectorB,
selectorC {
    
    property: value;
    property: value;
    property: value;
}
</style>

<!--编码声明这东西之前从来没有注意要写入-->

<meta charset="utf-8">

<!-- attach inline styles 内部CSS控制,但不推荐 -->
<p style="color: blue; font-size: 48pt;font-style: italic;">Inline styles are kind of a hassle</p>


//JavaScript的初始尝试;

//赋值;
var numbers = [ 5, 10, 15 ];
var names =["Ernie", "Bert", "Oscar"];
// 构造对象;
var fruit ={
  kind: "grape",
  color: "red",
  quantity: 12,
  tasty: true
};

//引用对象;
fruit.kind

//构造数组;
var fruit =[
  {
    kind: "grape",
    color: "red",
    quantity: 12,
    tasty: true
  },
  {
    kind: "kiwi",
   color: "brown",
    quantity: 98,
    tasty: true
  },
  {
    kind: "banner",
    color: "yellow",
    quantity: 0,
    tasty:true
  }
];

//运行结果
fruit[0];
fruit[0].color;

/*运算符
根据昨天看的代码规范【==等于号】最好使用【===恒等号】,类似【!==】*/

== // 等于
!= // 不等于
< // 小于
> // 大于
<= // 小于等于
>= // 大于等于

//控制结构
//if语句

if (3 < 5) {
  console.log("Eureka! Three is less than five!")
}

//测试
var a = 3;
var b = 5;

if (a < b){
  a = b
};

a

result = 5


//for循环语句
for (initialization; test; update){
  //运行代码
}

for (var i = 0; i < 5 ;i++){
  console.log(i)
}

//i++ -> i = i + 1


//数组循环

var numbers = [ 8, 100, 22, 98, 99, 45 ];
for (var i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
};

//函数

calculateGratuity(38);
var calculateGratuity = function(bill) {
  return bill * 0.2;
};


var tip = calculateGratuity(38)
console.log(tip);
tip;



//引用脚本文件
<head>
  <title>Page Title</title>
  <script src="myscript.js"></script>
</head>

//判断数据类型 typeof
//boolean的概念 only True or False


/*特殊:变量提升
事实上也是代码规范所建议的。*/

var numLoops = 100;
var i;
for(i = 0; i<numLoops; i++){
  console.log(i);
};

<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>

<rect x="0" y="0" width="500" height="50"/>
<circle cx="250" cy="25" r="25"/>
<ellipse cx="250" cy="25" rx="100" ry=25/>



评论
热度(1)
只展示最近三个月数据

© 墙上的堆积物 | Powered by LOFTER