只是作为个人学习的记录。其中的注解都不是很详细,还很乱!既然已经点进来了就随意看吧。
<!-- 第一次知道一个元素能指定多个类。多个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/>