JavaScript基础(一)
1.JavaScript控制样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="demo01"></div>
</body>
</html>
<script>
document.getElementById("demo01").style.backgroundColor = "blue";
document.getElementById("demo01").style.width = "200px";
</script>
总结： 通过使用obj.style.*控制dom对象的css样式 ， 而且js操作css具有一定的规律: 1.如果css属性没有中划线(-)的，可以直接用style.属性名： 比如：obj.style.background，obj.style.height,obj.style.left，obj.style.position等等。 2.对于含有中划线(-)的属性，将中划线去掉，并将中划线后的第一个字母转为大写字母： 比如：（margin-top,background-image,font-size）转为：obj.style.marginTop,obj.style.backgroundImage，obj.style.fontSize等等。
2.数据类型
字符串(string)、数字(number)、布尔(bool)、数组(Array)、对象(obj)、Null、Undefined
var x
var x =
6;
var x =
"Bill";
2.1 字符串型
var n1
= 10;
var n2
= "2";
console
.log(n1
- n2);
console
.log(
"10"+2-"1");
console
.log(
11 == "11");
console
.log(
11 === "11");
总结： 1.一般加引号的都是字符型。比如”123”，”abc”等等。 2.数字转为字符型有两种方法： a. +”” 转为字符串 b. String(num) 强制转换
2.2 布尔类型
<script>
console.log(1+true);
var num = 10;
console.log(!num);
console.log(!!num);
var n = 0;
console.log(!n);
</script>
总结：true 和 1 比较是相同，false 和 0 比较是相同（是 “==” 比较），因为系统会实现数据类型的 转化，将true 转换成1，将false 转换成0
2.3 number类型
console
.log(
1+2);
console
.log(
0.1+0.2);
console
.log(
0xb);
console
.log(
020);
var num
= "10";
console
.log(typeof num);
console
.log(typeof Number(num));
console
.log(typeof (num
-0));
console
.log(parseInt(
10.35));
console
.log(parseInt(
10.99));
console
.log(parseInt(
7,
8));
console
.log(parseInt(
"11",
2));
console
.log(parseInt(
"15px"));
console
.log(parseInt(
"15px13"));
console
.log(parseInt(
"px13"));
2.4 null 以及 undefined
var num =
10;
var txt =
"abc"
var boo =
true;
var timer =
null;
// 空类型
var test;
// 声明变量未给值为
undefined
console.log(
typeof num);
// number
console.log(
typeof txt);
// string
console.log(
typeof boo);
// boolean
console.log(
typeof timer);
// object
console.log(
typeof test);
// undefined
var e= [
1,
2,
3];
// 数组
console.log(
typeof e);
// object
console.log(e
instanceof Array);
// true ->表示 e是数组。
console.log(timer == test);
// true ->他们都没有值
console.log(timer === test);
// false -> 类型不同
console.log(timer +
10);
// 10
console.log(test +
10);
// NaN
总结: 1.typeof 可以判断变量的类型，但唯独数组不能判断出来。number, string, undefined, function，boolean类型均能通过typeof方法判断，而array类型输出object，因为typeof方法只能判断基本类型类型（number, string, undefined，boolean），除此之外（包括Date, RegExp，null等都只是object的扩展！）都不靠谱数组一般情况下可以用instanceof来判断。
3.变量以及作用域
3.1 变量
JavaScript 是一种弱类型的脚本语言，即定义变量的时候没有确定他具体是什么类型，都是统一用var关键字来定义； var x = 3；即变量的声明(变量使用之前必须加var声明，编程规范)
变量的命名规则! 1.变量命名必须以字母或是下标符号”_”或者”$”为开头。 2.变量名长度不能超过255个字符。 3.变量名中不允许使用空格。 4.不用使用脚本语言中保留的关键字及保留符号作为变量名。 5.变量名区分大小写。(javascript是区分大小写的语言)
3.2 变量作用域
var num =
10;
var num =
10;
function fun() {
var result =
20;
console.log(num);
}
fun();
var aa =
10;
function fn() {
bb =
"我是全局变量";
}
fn();
console.log(bb);
总结： 全局变量： 1. 写在最外层。 函数体外面 。 2. 写在函数体内部，但是没有var 声明的变量也是全局变量。
4.函数
function
fn(a,b) {
console.
log(a+b);
}
fn(1,
3);
fn(6);
fn(1,
2,
3);
4.1 arguments参数
在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。
function
fn(a,b) {
if(
fn.length == arguments.length)
{
console.log(a+b);
}
else
{
console.error(
"对不起，参数不匹配，参数正确的个数应该是" +
fn.length);
}
}
fn(1,
2);
4.2 返回值
function
fn() {
return 8;
console.
log(
12);
}
fn();
console.
log(
fn());
5.数组声明以及遍历
var arr = [
"刘德华",
"郭富城",
"黎明",
"张学友"];
console.
log(arr[
2]);
console.
log(arr.
length);
var arr = [
"马超",
"关羽",
"张飞",
"赵云",
"黄忠"];
console.
log(arr[
0]);
for(var i=
0; i<arr.
length; i++){
console.
log(arr[i]);
}
for(var i=
0,len = arr.
length;i<len;i++)
{
console.
log(arr[i]);
}
var arr = new Array(
"1",
"2");
5.1 数组使用注意
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor = "red";
for(var i=0;i<divs.length;i++)
{
divs[i].style.backgroundColor = "red";
}
</script>
总结： 1.伪数组：能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。 特点：有length属性；按索引方式存储数据；没有数组的push或pop等方法； jQuery中的$()对象都是伪数组对象。
6.for循环
<script
>
var sum = 0;
for(
var i
=1;i
<=100;i
++) {
sum = sum + i;
}
console
.log(
sum);
var sumWhile
= 0;
var i
= 1;
while(i
<=100)
{
sumWhile
+=i;
i
++;
}
console
.log(sumWhile);
var sumDoWhile
= 0;
var j
= 1;
do {
sumDoWhile
+= j;
j
++;
}
while(j
<=100);
console
.log(sumDoWhile);
</script
>
6.1 排他思想
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.current {
background-color: #daa520;
}
</style>
</head>
<body>
<button>按钮
</button>
<button>按钮
</button>
<button>按钮
</button>
<button>按钮
</button>
<button>按钮
</button>
</body>
</html>
<script>
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++) {
btns[i].onclick = function() {
for(var j=0;j<btns.length;j++) {
btns[j].className = "";
}
this.className = "current";
}
}
</script>
总结：排他思想就是先清除所有的样式，再给当前dom对象添加样式。
7.switch语句
<script>
switch(4) {
case 4:
alert("我是4");
break;
case 5:
alert("我是5");
break;
default:
alert("没有");
}
</script>
8.变量和属性
<script>
var index = 10;
var arr = [];
arr.index = 20;
arr.aa = 10;
arr.bb = "abc"
arr.length
console.log(index);
console.log(arr.index);
</script>
