JavaScript基础总结

Posted 2020-11-20 future-hacker

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础总结相关的知识，希望对你有一定的参考价值。

一、javascript引入方式:

//这里写的js代码无效

</script>

//这里的代码就有用了

alert(‘hello world ,again‘)

</script>

</head>

<body>

<div onclick="alert(‘hello world‘)">这是一个div</div>

</body>

二、JavaScript基本语法:

1.定义:

var iNum01 = 12,sTr =‘abc‘,bisMove = true;

// 如果没有定义类型和值,默认就是undefine

var iNum02;

2.js基本类型:

1、number 数字类型

2、string 字符串类型

3、boolean 布尔类型 true 或 false

4、undefined undefined类型，变量声明未初始化，它的值就是undefined

5、null null类型，表示空对象，如果定义的变量将来准备保存对象，

可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

3.函数:

// js用分号的原因是,将来调用的时候回压成一行,为了区别代码所以用了分号

// 如果函数执行在函数的定义上面,这个是函数的预解析,都是可以用的

// 函数调用

fnMyalert();

//定义函数

function fnMyalert() {

// 函数体可以包裹其他函数,如下的alert函数

alert(‘ok‘)

}

// 调用函数

// fnMyalert();

// 变量的预解析,变量在下面定义,在上面调用,变量的值是undefined.

alert(iNum01);

var iNum01 = 211;

var a = 10,b = 20 ;

alert("a + b = " +a + b)

</script>

4.条件语句if:

var iNum01 = 12;

var sNum01 = ‘12‘;

if(iNum01==12){

alert(‘相等! ‘);

}

else{

alert(‘不相等! ‘);

}

// ‘==‘符号会将符号两边的变量转换成数字类型再进行对比,这个叫做隐式转换

if(sNum01==12){

alert(‘相等! ‘);

}

else{

alert(‘不相等! ‘);

}

// ‘===‘不会做隐式转换

if(sNum01===12){

alert(‘相等! ‘);

}

else{

alert(‘不相等! ‘);

}

if(10>5 && 20>15 && 2>3){

alert(‘都大于‘);

}

else{

alert(‘至少有一个不大于‘)

}

if(10>5 || 20>15 || 2>3){

alert(‘至少有一个不大于‘);

}

else{

alert(‘都不大于‘)

}

if(!10>5){

alert(‘大于‘);

}

else{

alert(‘不大于‘);

}

</script>

5.获取元素:

//window.onload表示窗口的载入事件,这样可以进行预加载,直白一点就是说可以写上面

window.onload = function(){

// 因为document.getElementById(‘div01‘)的返回值是一个对象

var oDiv = document.getElementById(‘div01‘)

oDiv.style.color = ‘red‘;

oDiv.style.fontSize = ‘30px‘;

oDiv.style.width = ‘200px‘;

oDiv.style.height = ‘200px‘;

oDiv.style.background = ‘gold‘;

}

</script>

<body>

<div id="div01" >这是一个div</div>

</body>

6.操作元素属性:

window.onload = function(){

// 获取

var oDiv = document.getElementById(‘div01‘);

var oA = document.getElementById(‘link01‘)

// 独缺属性值

var sId = oDiv.id;

alert(sId);

// 写属性值,也叫做设置属性值

oDiv.style.color = ‘red‘;

oDiv.style.fontSize = ‘30px‘;

// 操作class属性,class属性名要写成className

oA.className = ‘sty02‘;

// 操作元素包裹的内容

// 读取内容

var sTr = oA.innerhtml;

var sTr2 = oDiv.innerHTML;

alert(sTr);

// 修改内容,写入内容

oA.innerHTML = ‘改变文字‘;

oDiv.innerHTML = ‘<a href = "http://www.itcast.cn">创中国</a>‘

oDiv.innerHTML = ‘<ul><li>变成列表了</li><li>变成列表了</li><li>变成列表了</li></ul>‘

}

</script>

<body>

<div id="div01">这个还是一个div</div>

<a href="#" class="tay01" id="link01">这厮一个链接</a>

</body>

6.点击事件:

window.onload = function(){

var oBtn = document.getElementById(‘btn‘);

var oDiv = document.getElementById(‘div01‘);

// function fnChange(){ 改写成下面的匿名函数

oBtn.onclick = function(){

oDiv.style.width = ‘300px‘;

oDiv.style.height = ‘300px‘;

oDiv.style.background = ‘gold‘;

}

// 点击事件关联函数

// oBtn.onclick = fnChange;

}

</script>

<body>

<div id="div01">这是一个div</div>

</body>

7.数组:

// 第一种创建数组的方法

var aList01 = new Array(1,2,3);

// 第二种创建数组的方法:直接量的方式

var aList02 = [‘a‘,‘b‘,‘c‘,‘d‘]

// 获取数组成员的个数

var iLen = aList02.length;

// alert(iLen)

// 操作数组的某个成员

alert(aList02[2]);

//在数组后面增加成员

aList02.push(‘e‘)

alert(aList02);

// 在数组后面删除成员

aList02.pop()

// alert(aList02)

// 将数组反转

aList02.reverse();

// alert(aList02);

// 将数组转换成字符串

var sTr = aList02.join(‘-‘);

var sTr2 = aList02.join(‘‘);

// alert(sTr);

// alert(sTr2);

var aList03 = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘a‘,‘b‘];

// 在数组中增加或者删除成员

// 从第4个(‘e‘)开始删除,删除两个,得到abcdb

aList03.splice(4,2);

// alert(aList03);

// 从第四个开始删除,删除一个,任何增加‘e‘,‘f‘两个元素

aList03.splice(4,1,‘e‘,‘f‘);

alert(aList03);

// 获取某个成员在数组中第一次出现的索引值

var aList04 = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘a‘,‘b‘,‘b‘,‘a‘,‘c‘] ;

var iPost = aList04.indexOf(‘c‘);

alert(iPost);

</script>

8.循环(for):

var aList = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘];

var iLen = aList.length;

//遍历

for(var i = 0;i<iLen;i++){

alert(aList[i]);

}

var aList01 = [‘a‘,‘b‘,,‘a‘,‘c‘,‘d‘,‘b‘,‘e‘,‘f‘];

var aList02 = [];

//去重

for(var i=0;i<aList01.length;i++){

if(aList01.indexOf(aList01[i])==i){

aList02.push(aList01[i]);

}

alert(aList02);

</script>

9.将数组载入页面中:

window.onload = function(){

var oList = document.getElementById(‘list‘);

var aList = [‘七龙珠‘,‘高达‘,‘火影‘,‘海贼‘,‘死神‘,‘鲁路修‘,‘‘];

var sTr = ‘‘;

//遍历数组内容,存放在空字符串中

for (var i = 0;i<aList.length;i++){

sTr += ‘<li>‘ + aList[i] + ‘</li>‘

}

//替换页面内容

oList.innerHTML = sTr;

}

</script>

</head>

<body>

</ul>

</body>

10.字符串反转:

var sTr1 = ‘afuiajflasjfl230893482‘;

var sTr2 = sTr1.split(‘‘).reverse().join(‘‘);

alert(sTr2);

</script>

11.字符串:

var iNum01 = 12;

var sNum01 = ‘12‘;

var sNum02 = ‘26‘;

var sNum03 = ‘88.90‘;

// ‘+‘符号两遍如果都是数字,就做加法运算,如果有一个是字符串,就做字符串拼接操作

alert(iNum01 + 10);

alert(iNum01 + sNum01);

// parseInt方法将整数的字符串转化为整数,如果是小数的字符串会将小数去掉

alert(parseInt(sNum02) + iNum01);

alert(parseInt(sNum03) + iNum01);

// parseFloat会将小数字符串转换为小数

alert(parseFloat(sNum03) + iNum01);

// 将字符串转换为数组

var sTr = ‘2018-06-14‘;

var aList = sTr.split(‘-‘)

var aList2 = sTr.split(‘‘);

alert(aList);

alert(aList2);

var sTr2 = ‘jdfafka11hk2332akfh‘;

var iPos = sTr2.indexOf(‘888‘);

alert(iPos);

// 切取字符串,从11开始切,到16结束

var sTr3 = sTr2.substring(11,16);

alert(sTr3);

// 如果不写结束就直接切到结尾

var sTr4 = sTr2.substring(11);

alert(sTr4);

</script>

12.定时器(setInterval):

function fnMalert(){

alert(‘上床了!‘);

}

// fnMalert();

// 创建只执行一次的定时器

// 第一个参数是要调用的函数名称,第二个参数是间隔时间,单位是毫秒,我们不用写单位

// setTimeout(fnMalert,2000);

var oTimer01 = setTimeout(fnMalert,2000);

// 关闭只执行一次的定时器

// clearTimeout(oTimer01);

// 创建反复执行的定时器

var oTimer02 = setInterval(fnMalert,2000);

// 关闭反复执行的定时器

// clearInterval(oTimer02);

</script>

-----------------

<style>

.box{

width: 200px;

height: 200px;

background: gold;

margin-left: 10px;

position: fixed;

top: 100px;

left: 0px;

}

</style>

window.onload = function(){

var oDiv = document.getElementById(‘box‘);

var iLeft = 0;

function fnMove(){

iLeft += 3;

oDiv.style.left = iLeft + ‘px‘;

}

// for(var i = 0;i < 19;i++){

// fnMove();

// }

setInterval(fnMove,30);

}

</script>

<body>

</body>

13.变量定义域:

// 定义全局变量

var iNum01 = 12;

function fnMyalert(){

//定义局部变量

var iNum02 = 24;

// 调用全局变量

alert(‘函数里面弹出：‘+iNum01);

//调用局部变量

alert(‘函数里面弹出：‘+iNum02);

// 在函数内部修改全局变量

iNum01 = 13;

alert(‘函数里面弹出：‘+iNum01);

// 函数内部定义变量时，如果不用var关键字，那么它使用一次之后，就会变成全局变量

iNum03 = 48;

}

fnMyalert();

// 函数外部调用全局变量

alert(‘函数外面弹出：‘+iNum01);

alert(‘函数外面弹出：‘+iNum03);

alert(‘函数外面弹出：‘+iNum02);

</script>

14.封闭函数:

function fnWrap(){

function fnTouzi(){

alert(‘亲，请关注我们新的产品！‘);

}

fnTouzi();

}

fnWrap();

简写方式1:

;~function(){

function fnTouzi(){

alert(‘亲，请关注我们新的产品！‘);

}

fnTouzi();

}();

简写方式2:

;!function(){

function fnTouzi(){

alert(‘亲，请关注我们新的产品！‘);

}

fnTouzi();

}();

15.

以上是关于JavaScript基础总结的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript基础总结

JavaScript基础入门总结目录

JavaScript 面向对象开发知识基础总结