刚开始学习Javascript,在此记录学习的点滴
学习Javascript的原因
想要学习前端,前期刚学过了HTML、CSS的知识,现在刚接触Javascript,目的是想要记录自己学习过程中的点滴,保存下更多的案例,供以后查找方便。欢迎各位大佬指正、交流经验。
今天从函数学起
函数——(上)
- 函数(功能) :由一堆代码组成的,可以实现某个功能,被自己执行或被行为执行的代码段(一次实现,永久使用—);
- 函数优势 :忽略细节,重复使用,选择使用;
- 函数原则 :封装;
- 注 :函数其实也是变量;
- 创建函数 :
- 声明式: 函数的声明,声明关键字:function,如
// An highlighted block function fn(){ }
- 赋值式: - 函数名(),如fn();
//赋值式声明函数 fn();
- 声明式: 函数的声明,声明关键字:function,如
- 事件按照写法分类 :
- 写法一
function fn1(){ console.log(“hello”); } document.onclick = fn1; //此时只有在被点击的时候才会被执行 //或者 document.onclikc = fn1(); //会立即执行,不用点击,且都会执行一次
- 写法二
document.onclick = function(){ fn1: } /*因为外面又套了一层函数,外面一层函数不执行, 当点击事件触发时候才被执行。当外面函数执行的时候, 里面的函数fn1也会跟着被执行,可是fn1;没有加(),是不会被执行的, 所以只有给fn1加上()才会被执行*/ document.onclick = function(){ fn1(); } /*也就是说,涉及到函数的嵌套,内层函数fn1不会自动执行, 只有当外层函数被事件触发而执行时,内层才会执行,所以需要加() */
- 写法一
-
事件的分类
- 鼠标
点击(左键点击)onclick
双击(左键点击)ondblclick
右键点击 oncontextmenu
按下 onmousedown
抬起 onmouseup
移动 onmousemove
进入 onmouseover
离开 onmouseout - 键盘
按下 onkeydown
抬起 onkeyup
敲击(按下并抬起) onkeypress - 页面
加载 onload
改变大小 onresize
滚动 onscroll - 表单
获取焦点 onfocus
失去焦点 onblur
内容改变 onchange
输入 oninput
提交 onsubmit
重置 onreset
- 鼠标
- 注意 :
- 取决于行为怎么触发
- 事件加给谁:比如 div 标签不能加键盘事件;表单等控件可以加键盘事件
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
-
函数按写法分类:
- 有名函数:有名字的函数,正常函数,正常使用,如声明书式创建的函数
//声明式创建的函数 function fn(){}
- 无名函数
- 非完整函数,不能存在与代码空间中,如
function(){ consloe.log("hello"); } //会报错,意外的符号
- 使用场景
- 作为赋值式创建函数的值
var fn = function(){}
- 被事件直接执行(事件处理函数)
document.onclick= function(){}
- 作为匿名函数的函数题存在
- 作为参数存在(回调函数)
function fn(a){}; fn(function(){ console.log("这个函数被a接收并执行") })
- 匿名函数
(function(){ console.log("hello");}) }) //最外层的括号,就把它变成了表达式,即本身就是一个函数 (function(){ console.log("hello");}) })() /*执行这个函数,直接在后面加() 这种函数立即执行,没法控制,类似于console.log("124"); */
- 有名函数:有名字的函数,正常函数,正常使用,如声明书式创建的函数
-
函数的参数(重头戏):
含义:能够在函数执行的时候,向函数内部传递数据,函数内部接收到数据后,做 出一定的处理
例子:
//例1
function fn(a){
console.log(a);
}
fn(124);
//例2
function fn(a){
console.log(a)
}
fn("hello");
- 组成 :两部分
发:执行时,实参:实际的参数;实参发给了形参,实参相当于变量的值
收:定义时,形参:形式的参数; 形参保存了实参,形参相当于变量名 - 个数 :参数个数可以有多个
- 数量一致:位置一一对应
- 数量不一致:
实参少,形参多,多出来的形参是undefined;
实参多,形参少,多出来的实参 被派遣到神秘的区域 arguments中
function fn(qwe){
console.log(qwe);
console.log(argements);
}
fn("hello","world",true,123,456,789,"hahaha");
/*Arguments(7)[''hello", "world", true, 123, 456, 789, "hahaha", callee: f, Symbol(Symbol.iterator): f ]
*/
-
arguments
- arguments 是函数中的用来保存所有实参的对象,这个对象时数组的形式,可以使用数组的基本形式去使用;数组:一组数据;数组的数据,按照定义时的顺序被编号,这个编号叫“索引”,从0开始
function fn(qwe){
console.log(qwe);
console.log(argements);
}
fn("hello","world",true,123,456,789,"hahaha");
/*Arguments(7)[''hello", "world", true, 123, 456, 789, "hahaha", callee: f, Symbol(Symbol.iterator): f ]*/
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
console.log(arguments[5]);
console.log(arguments[6]);
console.log(arguments[7]); //这个其实是没有的
console.log(argument.length);
//拿第一个和最后一个数据
console.log(argument[0]);
console.log(argument[argument.length - 1]);
//配合for循环
for(var i=0; i<= argument.length; ++i){
console.log(argument[i] + "<br>")
}
- 可以使用数组的索引的方式,配合数组的长度length,和循环遍历,操作arguments
- 参数可以发哪些数据:参数可以传递 任何数据
function fn(){
for(var i=0; i<arguments.length; ++i){
console.log(arguments[i]);}
}
回调函数:将一个函数传到另一个函数W中,作为参数的这个函数f,在函数W中被执行,叫回调函数
function fn(a){
a(function(c){
console.log("这个函数被参数b接收并执行了");
c(function(){
console.log("这个函数被参数d接收并执行了");
});
});
}
fn(function(b){
console.log("这个函数被参数a接收并执行了");
b(function(d){
console.log("这个函数被参数c接收并执行了");
d();
});
});
}
- 好了,今天的分享到这里,之后我会将学过的内容以思维导图的形式贴上来,欢迎各位大佬分享一些技术经验、学习方法 or other something