基础JavaScript(一)
来源：互联网 发布：java replaceall \\s 编辑：程序博客网 时间：2024/05/22 14:54
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 为 undefinedvar 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，所以结果是34.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>阅读全文
0 0
- javascript基础实例教程(一)
- javascript(基础整理一)
- javascript基础一
- JavaScript入门基础 (一)
- javascript基础一
- Javascript基础（一）
- JavaScript 基础（一）
- javascript基础一
- javascript基础（一）
- JavaScript语言基础(一)
- Javascript基础（一）
- Javascript基础（一）
- javascript基础一
- JavaScript（一）-- 基础
- JavaScript进阶基础一
- javascript基础一
- JavaScript基础（一）
- javascript基础（一）
- 单元最短路模板 dijistra
- redhat6.4桌面版
- Mac下配置maven
- DevExpress报表设计器自定义工具箱
- Array对象目录 总览概括
- 基础JavaScript(一)
- Python XML解析之SAX
- c3p0 JNDI
- log4j学习
- Object对象目录 总览概括
- 一个晚上写出来的C语言版生命游戏
- Property属性对象目录 总览概括
- POJ2186 Popular Cows Kosaraju
- Date对象目录 总览概括
