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 // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
2.1 字符串型
var n1 = 10;
var n2 = "2";
console.log(n1 - n2); // 8 在javascript里面,当字符串和数字进行算术运算的时候,系统会先把字符串转换为数字再计算
console.log("10"+2-"1"); // 101 先执行减号(-) 再执行 +
console.log(11 == "11"); // true 只是比较值,不比较数据类型。
console.log(11 === "11");// false 即比较值,也比较数据类型。
总结:
1.一般加引号的都是字符型。比如”123”,”abc”等等。
2.数字转为字符型有两种方法:
a. +”” 转为字符串
b. String(num) 强制转换
2.2 布尔类型
<script>
console.log(1+true); // 2 true默认为1
var num = 10;
console.log(!num); // false
console.log(!!num); // true 强制转换为布尔型
var n = 0; // 0 就相当于false
console.log(!n); // true
</script>
总结:true 和 1 比较是相同,false 和 0 比较是相同(是 “==” 比较),因为系统会实现数据类型的 转化,将true 转换成1,将false 转换成0
2.3 number类型
console.log(1+2); // 3
console.log(0.1+0.2); // 0.30000000000000004
console.log(0xb); // 11 十六进制 转换为 10进制
console.log(020); // 八进制 16
var num = "10";
console.log(typeof num); // string
console.log(typeof Number(num)); // 转为数字类型
console.log(typeof (num-0));// 转为数字类型
console.log(parseInt(10.35)); // 10
console.log(parseInt(10.99)); // 10
console.log(parseInt(7,8)); // 7
console.log(parseInt("11",2)); // “11” 是 2 进制 的值, 输出结果是 3(10进制)
console.log(parseInt("15px")); // 只取到前面的数字 15
console.log(parseInt("15px13")); // 只取到前面的数字 15
console.log(parseInt("px13")); // NaN 不是一个数字
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; // 局部变量 这个变量只能在 fun 函数体内使用
console.log(num); // 10
}
fun();
// console.log(result);
var aa = 10; // 全局变量
function fn() {
bb = "我是全局变量"; // 注意,这里是全局变量,没有var声明的变量,即使在函数中也属于全局变量
}
fn();
console.log(bb); // 我是全局变量
总结:
全局变量:
1. 写在最外层。 函数体外面 。
2. 写在函数体内部,但是没有var 声明的变量也是全局变量。
4.函数
function fn(a,b) {
console.log(a+b);
}
fn(1,3); // 4
fn(6); // NaN -> 因为b是undefined。
fn(1,2,3); // 3 -> 只将1,2传递给了a和b,所以结果是3
4.1 arguments参数
在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。
// 尽量要求形参和实参相互匹配
function fn(a,b) {
// console.log(fn.length); 返回的是 函数的 形参的个数
// console.log(arguments.length); 返回的是正在执行的函数的 实参的个数
if(fn.length == arguments.length)
{
console.log(a+b);
}
else
{
console.error("对不起,参数不匹配,参数正确的个数应该是" + fn.length);
}
}
fn(1,2);
4.2 返回值
function fn() {
return 8; // 终止程序执行 不会执行return 下面的语句
console.log(12);
}
fn(); // 函数返回的结果就是8
console.log(fn());
5.数组声明以及遍历
var arr = ["刘德华","郭富城","黎明","张学友"];
console.log(arr[2]); // 黎明
console.log(arr.length); // 4
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"); // 伪数组
// alert(divs.length);
divs[0].style.backgroundColor = "red";
for(var i=0;i<divs.length;i++)
{
divs[i].style.backgroundColor = "red"; // 给div 改样式 不是改 数组
}
</script>
总结:
1.伪数组:能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。
特点:有length属性;按索引方式存储数据;没有数组的push或pop等方法;
jQuery中的$()对象都是伪数组对象。
6.for循环
<script>
// for 循环
var sum = 0;
for(var i=1;i<=100;i++) { // 从 1 累加 到 100
sum = sum + i;
}
console.log(sum);
// while
var sumWhile = 0;
var i = 1;
while(i<=100) // 满足条件就执行下面{}的内容
{
sumWhile +=i;
i++;
}
console.log(sumWhile);
// do while 至少执行一次
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; // 变量 里面值 10
var arr = []; // 数组 空数组 对象
arr.index = 20; // 我们自己定义的数组的属性
arr.aa = 10;
arr.bb = "abc"
arr.length // 数组的长度 数组的属性
console.log(index); // 变量
console.log(arr.index); // 属性
</script>