爱站程序员基地JavaScript基础
- 一、变量
- 二、运算符
- 三、数据类型
- 1、数字类型
- 2、字符串类型
- 3、数组类型
- 4、其他类型
一、变量
1.1
声明变量用var关键字后接变量名等于值
var number = \'perhaps\';
1.2
变量名命名规范
只能使用数字、字母、下划线、美元符$
不能使用关键字、保留字
不能以数字开头
大小写敏感
1.3
同时赋值多个变量
var name = \'perhaps\' , age = 18 , addr = \'shanghai\'
二、运算符
2.1
算数运算符
加：
+
减：
-
乘：
*
除：
/
余数：
%
2.2
赋值运算符
值等于：
==
横等(值和类型都相等)：
===
不等：
!=
横不等：
!==
2.3
关系运算符
大于：
>
大于等于：
>=
小于：
<
小于等于：
<=
2.4
逻辑运算符
与：
&&
或：
||
非：
!
2.5
加强运算符
自身加1：
++
自身减1：
--
自身加等于：
+=
自身减等于：
-=
自身余等于：
%=
自身除等于：
/=
三、数据类型
1、数字类型
3.1.1
整数
int()
转换成整数：
parseInt()
3.1.2
浮点数
float()
转换成浮点数：
paserFloat()
2、字符串类型
3.2.1
字符串：一对单引号或者一对双引号括起来的的数据
字符串是不可变数据类型
var number = \'perhaps\'；
3.2.2
字符串常用的方法
获取字符串的长度：
str.length()
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.length)；</script></body></html>
以下省略
标签
3.2.3
获取字符串下标为n的字符：
str.charAt(n)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.charAt(3))；</script>
3.2.4
获取下标为n的字符编码：
str.charCodeAt(n)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.charCodeAt(3))；</script>
3.2.5
字符串拼接：
str.concat(字符串)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.concat(\' hello world\'))；</script>
3.2.6
查找字符第一个第一次出现的位置，如果没找到返回-1：
str.lastIndexOf(字符串)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.lastIndexOf(\'Haps\'))；</script>
3.2.7
替换字符串(注意字符串是不可变数据类型，不会改变原字符串)：
str.replace(old_str,nwe_str)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.replace(\'PerHaps\',\'LanAn\'))；</script>
3.2.8
截取字符串：
str.substr(start,end)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.substr(3,5))；</script>
3.2.9
切割字符串：
str.split(‘按字符切割返回数组类型’)
<script type=\"text/javascript\">var s = \'PerHaps\'；console.log(s.split(\'r\'))；</script>
3.2.10
将字符串转换为小写：
str.toLocaleLowerCase()
<script type=\"text/javascript\">var s = \'PerHaps\'；// 将字符串转换为大写toLocaleUpperCase()console.log(s.toLocaleLowerCase())；</script>
3、数组类型
3.3.1
可变数据类型
一对中括号括起来的数据
var arr = [1, 2, 3, 6, 5, 4]
数组的方法
3.3.2
索引数组
索引数组中第i个元素：
arr[i]
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">// 索引下标为2的元素console.log(arr[2]);</script></body></html>
3.3.3
获取数组的长度：
arr.length
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var arr = [1, 2, 5, 3, 6, 5, 7, 8];// 获取数组的长度console.log(arr.length);</script></body></html>
3.3.4
以下将省略
标签
在数组中添加元素：
splice()
// 增/*在第0个位置替换0个，也就是不替换增加两个元素*/arr.splice(0,0,8,9);console.log(arr);
3.3.5
修改元素：
splice()
// 改/*将数组中的第0个元素，替换一次，替换后的元素*/arr.splice(0,1,8);console.log(arr);
3.3.6
删除数组中的元素：
splice()
// 删/*将数组的第0个元素不替换删除一次*/arr.splice(0,1);console.log(arr);
3.3.7
向数组末尾追加元素：
push()
// 在数组末尾追加一个元素4arr.push(4);console.log(arr);
3.3.8
将两个数组合成一个数组：
concat()
/* concat不改变原数组，合并两个数组生成一个新的数组*/new_arr = arr.concat([99, 88, 77]);console.log(new_arr);
3.3.9
向数组最前面加入一个元素：
shift()
// 向数组最前面添加一个元素arr.shift(99);console.log(arr);
3.3.10
向数组最前面加入多个元素：
unshift()
// 向数组最前面添加多个元素arr.unshift(33,44,55);console.log(arr);
3.3.11
删除数组末端的元素：
pop()
// 删除数组末端的一个元素arr.pop();console.log(arr);
3.3.12
遍历数组
var arr = [1, 4, 2, 3 ,55]for (var i = 0; i<arr.length;i++){console.log(arr[i])}
4、其他类型
3.4.1
null
：空类
Nna
：非数字
boolean
：布尔类型
undefind
：没定义
四、分支语句
4.1
三种输出方式：
弹框：
alert
(‘hello world’)
文档界面：
document.write
(‘helloworld’)
控制台：
console.log
(‘hello’)
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script type=\"text/javascript\">// 弹框alert(\'hello world\');// 文档界面document.write(\'helloworld\');// 控制台console.log(\'hello\');</script></head><body><!-- 企业开发者，建议写在body后面 --><script type=\"text/javascript\">/*这就是多行注释*/</script><script src=\"jsss\" type=\"text/javascript\" charset=\"UTF-8\"></script></body></html>
4.2
公式：
if (条件){语句}
4.3
公式：
if (条件){语句}else{语句}
4.4
公式：
if (条件){语句}else if(条件){语句}else{语句}
4.5
公式:
常用于已知的，不需要范围。
swith(变量){case 变量值:语句breakcase 变量值:语句breakcase 变量值:语句breakdefault:语句}
实例：
<script type=\"text/javascript\">var grade=\'D\';switch(grade){case \'A\':console.log(\'80-100\');breakcase \'B\':console.log(\'70-79\');breakcase \'C\':console.log(\'60-69\');breakcase \'D\':console.log(\'<60\');breakdefault:console.log(\'erro\');}</script>
4.6
三目运算符：？
// 三目运算符var res=10<5?\'真的\':\'假的\';console.log(res);
五、Math方法
5.1
返回0-1之间的随机数：
Math.random()
四舍五入：
Math.round()
返回最大值：
Math.max()
返回最小值：
Math.min()
向上取整：
Math.ceil()
向下取整：
Math.floor()
x的y次方：
Math.pow(x,y)
开平方：
Math.sqrt()
六、for循环
6.1
for (表达式1；表达式2；表达式三){语句}表达式1，表示初始值表达式2，表示条件表达式3，表示出口
实例
<script type=\"text/javascript\">for(var a=1;a<5;a++){console.log(\'hellow world\')；}</script>
6.2
for循环嵌套
打印三角形到文档界面
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">for (var i = 1;i<10;i++){for (var j = 1;j<i;j++){document.write(\'o\');}document.write(\'<br />\')；}</script></body></html>
6.3
打印九九乘法表到文档界面
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">for (var i = 1;i<10;i++){for (var j = 1;j<i+1;j++){document.write(j+\'*\'+i+\'=\'+i*j+\' \' );}document.write(\'<br />\')；}</script></body></html>
6.4
打印三角形
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">for(var i=0;i<6;i++){for(var j=0;j<i;j++){document.write(\'a\');}document.write(\'<br />\');}</script></body></html>
6.5
冒泡排序
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var arr = [1, 2, 4, 6, 5, 3, 7, 8];/*循环趟数，长度减一是因为两两比较，所以比较的次数只有length-1次*/for (var i = 0; i<arr.length-1; i++){for (var j=0; j<arr.length-1-i; j++){/*相邻的两个元素作比较如果前一个元素大于后一个元素就交换位置这是升序排序如果要降序排序则将>改成<*/if(arr[j]>arr[j+1]){var t = arr[j];arr[j] = arr[j+1];arr[j+1] = t;}}}document.write(arr)</script></body></html>
七、while循环
7.1
公式
while (条件){语句}
实例
<script type=\"text/javascript\">var a=7;while(a<100){console.log(a);a+=7;}</script>
<script type=\"text/javascript\">var b = 0;while(b<100){if(b%7===0){console.log(b);}b++;}</script>
八、函数
8.1
函数公式：
function声明函数 函数名(){}
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">function fun(){console.log(\'hello world\')}fun()</script></body></html>
九、对象
9.1
对象：object，引用类型，引用对象的实例，也就是实例化
创建对象的方式有多种方法
这里选择选择两种中的其中一种
创建对象：
第一种使用new运算符创建
var object =
new Object()
;
object.‘name’ = ‘zhangsan’;
object.‘age’ = 18;
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var obj = new Object();obj.name = \'zhangsan\';obj.age = 18;console.log(obj);</script></body></html>
第二种
var object = {
‘name’ = ‘zhangsan’，
‘age’ = 18，
};
其他方式略；
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var obj2 = {\'name\':\'zhangsan\',\'age\':19,//这是对象的方法\'run\':function(){console.log(\'pao?\');}}console.log(obj2);//调用对象的方法obj2.run()</script></body></html>
十、日期
10.1
Date
调用对象的方法，创建实例。
var d =
new Date()
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">var d = new Date();// Thu Aug 06 2020 20:05:46 GMT+0800 (中国标准时间)console.log(d);// Thu Aug 06 2020console.log(d.toDateString());// 20:06:16 GMT+0800 (中国标准时间)console.log(d.toTimeString());// 2020/8/6console.log(d.toLocaleDateString());// 下午8:07:25console.log(d.toLocaleTimeString());// Thu, 06 Aug 2020 12:07:51 GMTconsole.log(d.toUTCString());</script></body></html>
10.2
定时器
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><script type=\"text/javascript\">// var start = 10// var tmid = setInterval(function(){// if (start>0){// console.log(start)// start--// }else{// clearTimeout(tmid)// }// },1000)// var start = 10// var tmid = setInterval(function(){// start--// console.log(start)// },1000)var c=10// 设置变量保存定时器函数返回的id，用于终止定时器var tmid = setInterval(function(){// 自减c--// 当定时器到0时终止定时器if ( c === 0){clearInterval(tmid)}// 选择33个随机数，自上而下随机选择，// 将选到的值给到selectvar select = Math.ceil(Math.random()*33)console.log(select)},500)</script></body></html>
十一、Dom文档
11.1
dom文档对象模型
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div id=\"container\"><h2 id=\"title\">hha</h2><h3 id=\"aa\">嘻嘻</h3><h4 class=\"cc\">我们挨打游戏</h4><h4 class=\"cc\">我们都是渣渣</h4></div><script type=\"text/javascript\">// 获取标签idvar h2 = document.getElementById(\'title\')// 修改内容h2.innerText = \'我会dom操作\'// 获取标签idvar h3 = document.getElementById(\'aa\')// 修改内容h3.innerText = \'不爱\'// 获取标签idvar h4s = document.getElementsByTagName(\'h4\')// 修改内容for (var i = 0 ;i<h4s.length;i++){h4s[i].innerText = \'爱\'}</script></body></html>
节点获取的三种方式
document.getElementById()
：获取节点id
document.getElementsByTagName()
：获取节点标签，返回元组
document.getElementsByClassName()
：获取相同值的class的节点，返回列表
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div id=\"a\"><p class=\"m\"></p><div id=\"b\"></div><p class=\"m\"></p></div><script type=\"text/javascript\">var a = document.getElementsByClassName(\'m\')console.log(a)var b = document.getElementsByTagName(\'p\')console.log(b)var c = document.getElementById(\'a\')console.log(c)</script></body></html>
增删改
创建一个元素节点：
createElement()
添加一个新子节点到节点的末尾：
appendChild()
在当前节点前插入一个新的节点：
insertBefore()
将新节点替换成旧节点：
repalceChild()
移除节点：
removeChild()
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div id=\"a\"><p id=\"start\"></p><div id=\"b\"></div><p id=\"end\"></p></div><script type=\"text/javascript\">var b = document.getElementById(\'b\')// 创建标签var p = document.createElement(\'p\')// 给元素设置内容p.innerHTML = \'今晚加班\'// 在b中住家pb.appendChild(p)// 创建h2标签var h2 = document.createElement(\'h2\')h2.innerHTML = \'好好复习\'// 通过操作父节点，将h2插入到b之前b.parentNode.insertBefore(h2,b)// 替换// b.parentNode.replaceChild(h2,b)// 删除b.parentNode.removeChild(b)</script></body></html>
十二、project
12.1
进度条
首先给一个标签创建文本框，在创建一个包含的标签属性
然后获取相应的id，用计时器实现。
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">#a{width: 400px;height: 50px;border: 1px solid #00BFFF;}#b{height: 50px;background-color: #FF1493;}</style></head><body><div id=\"a\"><div id=\"b\"></div></div><script type=\"text/javascript\">// 获取标签idvar b = document.getElementById(\'b\')；// 设置起点var start = 0；// 计时器var timeid = setInterval(function(){// 宽度增加b.style.width = start + \'px\'；// 停止的条件if (start===400){clearInterval(timeid)；}/*每次加10，放在这里控制与外边框宽度相等如果放在前面判停止的条件要加10个像素的宽度*/start+=10},1000)</script></body></html>
12.2
换皮肤
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">#a{height: 500px;border: 1px solid #FF1493;/* background-repeat: no-repeat; */}#b{height: 300px;width: 300px;border: 1px solid #00BFFF;position: relative;left: 300px;top: 100px;background-repeat: no-repeat;background-position: center;}.select1{background-image: url(./img/bg1.gif);}.select2{background-image: url(img/2.jpg);}.select3{background-color: #00BFFF;}.select4{background-color: #FF1493;}</style></head><body><div id=\"a\"><div id=\"b\"><button onclick=\"pi1()\">皮肤一</button><button onclick=\"pi2()\">皮肤二</button></div><script type=\"text/javascript\">function pi1(){var a = document.getElementById(\'a\')；a.className = \'select1\'；var b = document.getElementById(\'b\')；b.className = \'select2\'；console.log(\'换了\')；}function pi2(){var a = document.getElementById(\'a\')；a.className = \'select3\'；var b = document.getElementById(\'b\')；b.className = \'select4\'；console.log(\'换了\')；}</script></div></body></html>
12.3
隔行换色
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">li{width: 700px;height: 50px;border: 1px solid salmon;}.select1{background-color: #00BFFF;}.select2{background-color: #FF1493;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><script type=\"text/javascript\">var list = document.getElementsByTagName(\'li\')for (var i = 0 ;i<list.length;i++){if(i%2===0){list[i].className = \'select1\'；}else{list[i].className = \'select2\'；}}</script></body></html>
12.4
图片切换
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><img src=\"img/1.jpg\" onclick=\"one()\">；<img src=\"img/2.jpg\" onclick=\"two()\">；<img src=\"img/3.jpg\" onclick=\"three()\">；<hr >；<img src=\"img/bg2.jpg\" id=\"qie\">；<script type=\"text/javascript\">function one(){var qie = document.getElementById(\'qie\')；qie.src = \"img/1.jpg\"；}function two(){var qie = document.getElementById(\'qie\')qie.src = \"img/2.jpg\"；}function three(){var qie = document.getElementById(\'qie\')；qie.src = \"img/3.jpg\"；}</script></body></html>
十三、事件
13.1
事件：产生然后得到处理操作。
事件的模式：内联模式、脚本模式
事件的分类：鼠标事件、键盘事件、HTML事件。
13.2
鼠标事件
onmouseover：鼠标移入到某个元素内都会触发
onmouseout：鼠标移出某个元素时都会触发
onmouseenter：鼠标只在移入本元素时调用一次
onmouseleave：鼠标只在移出本元素时触发一次
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><img src=\"images3/big_1.jpg\" >；<img src=\"images3/big_10.jpg\" >；<img src=\"images3/big_2.jpg\" >；<script type=\"text/javascript\">；var imgs = document.getElementsByTagName(\'img\')for (var i = 0 ;i<imgs.length-1;i++){imgs.index = i；onmouseover = function(){console.log(\'comein\')；}}</script></body></html>
13.2
键盘事件
onkeydown：按下了键盘上的某个键
keypress：按下了键盘上的字符键
keycode：按下了键盘上的ACll编码键，返回编码
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><img src=\"images3/big_1.jpg\" ><img src=\"images3/big_10.jpg\" ><img src=\"images3/big_2.jpg\" ><script type=\"text/javascript\">// 三者同时存在只能生效最后一个// onkeydown = function(event){// console.log(event.shiftKey)// }// onkeydown = function(event){// console.log(event.ctrlKey)// }// onkeydown = function(event){// console.log(event.altKey)// }onkeydown = function(event){console.log(event.keyCode);console.log(event);console.log(event.layerX);console.log(event.layerY);}// 返回字符onkeypress = function(event){var letter = String.fromCharCode(event.keyCode);console.log(letter);}</script></body></html>
13.3
HTML事件
windows.onload：当页面完全加载后触发
select：当用户选择文本框的中的内容时触发
scroll：当用户滚动带滚动条的元素时触发
change：当文本框(input)或(textarea)内容改变且失去焦点后触发
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">.select{width: 100px;height: 100px;border: 1px solid #FF0000;}</style><script type=\"text/javascript\">window.onload = function(){console.log(\'加载完成了\');}</script></head><body></body></html>
13.4
事件流
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">#a{width: 300px;height: 300px;border: 1px solid #FF0000;}#b{width: 150px;height: 150px;border: 1px solid #FF0000;}#c{width: 75px;height: 75px;border: 1px solid #FF0000;}</style></head><body><div id=\"a\"><div id=\"b\"><div id=\"c\"></div></div></div><script type=\"text/javascript\">// 事件流，从外向内，从内向外// evt.stopPropagation()停止或者切断var a = document.getElementById(\'a\');var b = document.getElementById(\'b\');var c = document.getElementById(\'c\');a.onmousedown = function(evt){console.log(\'a\');evt.stopPropagation();}b.onmousedown = function(evt){console.log(\'b\');evt.stopPropagation();}c.onmousedown = function(evt){console.log(\'c\');evt.stopPropagation();}</script></body></html>
