前端笔记——JavaScript

作者: ALLIN5 | 来源:发表于2018-09-03 00:01 被阅读130次

一、什么是JavaScript？

概念：JavaScript是运行在浏览器端的'脚本语言'，JavaScript是浏览器解释执行的

作用：JavaScript主要解决的是前端与用户交互的问题，包括'使用交互'与'数据交互'。 

意义：负责 '页面行为'：部分动画效果、页面与用户的交互、页面功能；

二、嵌入页面的三种方式

1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入——开发一般采用此方式

<script type="text/javascript" src="js/index.js"></script>

三、获取元素的方法

方法一

使用内置对象document上的 getElementById 方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量;

避免获取元素失败的方法：
法一：将javascript放到页面最下边；
法二：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行；（实际开发常用此方法）

demo

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>
....
<div id="div1">这是一个div元素</div>

方法二

使用内置对象document上的 getElementsByTagName 方法来获取页面上的某一种标签;
获取的是一个 选择集 ，不是数组，但是可以用 下标的方式 操作选择集里面的标签元素;

demo

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

四、常用内置对象

document

document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)

location

window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

五、调试程序的方法

1、alert——以弹框的方式输出
2、console.log——在浏览器的控制台输出
3、document.title——在标签页的头部输出

六、操作元素属性

流程

获取元素
读取属性
写属性

属性的写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

操作属性的二种方法
*① 通过“.” 操作

<script type="text/javascript">
    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.XXX" id="link1">XXX</a>

②通过“[ ]”操作

<script type="text/javascript">
    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[sVal1] = sVal2;        
    }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.XXX" id="link1">XXX </a>

特别地——innerHTML

功能：innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.XXX">XXX<a/>';
    }
</script>
......
<div id="div1">这是一个div元素</div>

七、基础知识点

① 变量

定义变量需要用关键字 'var'
同时定义多个变量可以用","隔开，公用一个‘var’关键字
demo

 var iNum = 123;
 var sTr = 'asd';
 //同时定义多个变量可以用","隔开，公用一个‘var’关键字
 var iNum = 45,sTr='qwe',sCount='68';

变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null;

1种复合类型：object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：——业界常用命名习惯

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

② 函数

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

函数传参

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

函数'return'关键字

函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

③ 条件语句

运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = '大于';
}
else
{
    sTr = '小于';
}
alert(sTr);

多重if else语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

switch语句

多重if else语句可以换成性能更高的switch语句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

④ 循环语句

for循环

for(var i=0;i<len;i++)
{
    ......
}

while循环

var i=0;

while(i<8){
    ......
    i++;
}

⑤ 数组及操作方法

定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的方法
1、获取数组的长度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

多维数组
多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;

⑥ 字符串处理方法

1、字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt() 获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

7、substring() 截取字符串

用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

8、toUpperCase() 字符串转大写

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF

9、toLowerCase() 字符串转小写

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);

⑦ 类型转换

1、直接转换 parseInt() 与 parseFloat()
2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

⑧ 封闭函数

一般定义的函数和执行函数：

function myalert(){
    alert('hello!');
};
myalert();

封闭函数：

(function myalert(){
    alert('hello!');
})();

封闭函数的好处 :
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全;

⑨ 匿名函数

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}
</script>

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function myalert(){
    alert('hello!');
}()

前端笔记——JavaScript

一、什么是JavaScript？

二、嵌入页面的三种方式

三、获取元素的方法

四、常用内置对象

document

location

Math

五、调试程序的方法

六、操作元素属性

特别地——innerHTML

七、基础知识点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读