JavaScript每日一学 —— 第四天

<input type="text" value="" id="txt1">
    +
<input type="text" value="" id="txt2">
<!-- onclick（事件）这个html属性，可以帮助咱们调用函数（当点击按钮的时候调用函数） -->
<button onclick="getSum()">计算</button>
<input type="text" value="" id="txt3">
/*
分析：
    1.文本框里面的值是存储在什么地方的？存储在value属性里面的
    2.如何拿到文本框里面的值呢？
        可以通过先拿到文本框这个标记本身，再去拿到它的值
        可以给标记取一个id名称，就可以拿到它
        语法：ele.value 
    3.为什么咱们在输入了内容后，再取去拿value值的时候，拿不到呢？
        因为输入内容在后，输出再前
        函数不调用不会执行，就可以延迟执行代码，那么就可以输出放在函数里面
    4.怎么调用函数呢？
        当点击了按钮后，再去调用函数，那么就可以拿到文本框里面最新的值了
    5.函数调用
        通过函数名称加括号形式
        通过事件来调用函数（函数只有在你触发事件的时候调用，可以做到控制代码执行时间）
*/
<script>
    function getSum(){
            txt3.value = Number(txt1.value) + Number(txt2.value)
    }
      
</script>

事件调用可以控制函数执行的时间

二、函数的返回值

return函数返回值

return是函数隐含的一个参数，可以把函数内部的数据给函数外部返回

把return理解为是函数内部和外部沟通的一个‘桥梁’

函数访问规则

函数内部可以访问函数外部的数据

函数外部是访问不了函数内部的数据

return作用

返回函数内部的数据

终止函数的执行

需求

有时候希望函数外部可以拿到函数内部的数据

因此可以使用return

函数外部拿到函数内部数据方式

可以通过函数名称加括号的形式来拿到

return 数据 <--> fn()

思考

函数外部为什么要通过fn()这种形式拿到函数内部的值呢

原因

如果在外界直接使用函数内部的变量名称，那么很容易产生命名冲突问题

函数名称加括号表示函数调用，那么再给它加了层含义，这样的话一举两得

函数名称加括号作用

函数名称加括号，第一层意思是表示函数的调用

函数名称加括号，第二层意思是表示的是接收函数内部返回的数据

注意点

当一个函数没有返回值的时候，那么外界接收的到就是undefined

三、获取元素的两种方式

1.第一种方式

给元素取一个id名称，就可以直接获取到当前的元素（在js里面可以直接使用这个id名称）

一定是元素的名称是id的时候，js里面才可以直接获取。class或者name形式是不行的

2.第二种方式

document.getElementById()

在网页中通过id的形式获取元素

获取元素两种方式区别

第一种方式（取id，直接使用id名称），最早出现在IE浏览器（低版本）里面的，其他的浏览器是不支持这种方式的

其他浏览器支持的是document.getElementById()第二种方式，随着后面的发展慢慢的其他浏览器也支持了第一种放松，但是为了兼容更多的浏览器，推荐使用第二种方式

四、常用的事件

事件：把用户在网页中的一些列操作称之为事件，例如，鼠标点击、移入移出、键盘敲击

1.onclick：单击事件，当点击（单击）的时候

2.onmouseover：移入事件

3.onmouseout：移出事件

4.onload：加载事件

事件绑定：把元素和事件绑定在一起，这样就可以通过事件调用函数

ele.事件名称 = function(){}

ele是获取到的元素，后面的函数是匿名函数（把没有名称的函数称之为匿名函数）

// 获取元素
var box = document.getElementById('box')
// 绑定事件
box.onmouseover = function(){
    console.log('我悄悄的来了')
}

五、js代码位置问题

正常的情况下只要不涉及获取元素、操作元素那么你的js代码放在页面的任何地方其实都可以

代码执行顺序问题

html、css、js代码开始都是按照自上而下的顺序去加载和执行的

但是在加载的过程中如果遇到了script标记，那么此时其他代码要暂停执行，会优先把js代码执行完毕后，再去执行其他的代码

所以问题就来了

<script>
     var btn = document.getElementById('btn')
     console.log(btn) // null
</script>

//由于js代码在前，此时还没有执行下面的html代码，所以获取不到相应的元素

<button id="btn">哈哈！嘿嘿！嘻嘻！</button>

可以通过onload事件来解决

//使用onload事件，会让对应的js代码在整个页面加载完了之后再执行，这样就可以拿到了，
//但这样会导致onload里面的代码过多，这时候可以通过封装调用函数来解决
<script>
    onload = function(){
        var btn = document.getElementById('btn')
         console.log(btn) // <button id="btn">哈哈！嘿嘿！嘻嘻！</button>
    }
</script>


<button id="btn">哈哈！嘿嘿！嘻嘻！</button>

小屁孩你滑稽掉了

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript每日一学 —— 第四天

对于反复使用的功能代码，对其封装成一个独立的模块，这种功能代码块就是函数。或者说简单点儿就：是将一段公共的代码进行封装，给它起个名字叫"函数"。说通俗点儿函数就是一个功能，就是一个方便的工具。
复制链接

扫一扫

专栏目录