关于HarmonyOS的学习

最新推荐文章于 2024-10-02 21:20:07 发布

yiyiy111yiy

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量799

点赞数 19

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/m0_72035166/article/details/141824044

版权

day15

一、debugger

是js代码调试的一种方式可以浏览器的source选项里面进行代码调试在对应的代码的序号前面打断点，就可以让代码执行到这里的时候进入调试默认，可以看到代码的执行过程打了断点后，直接刷新浏览器，可以进入这个调试模式

二、函数

1.function函数函数是一个引用数据类型 => 可以把反复使用的功能代码进行封装，达到多次使用的目的 => 函数可以让代码实现复用可以把函数理解为一个工具，方便代码的开发和代码的管理 function 函数名称(形参1, 形参2, ...){ 功能代码 } 函数名称(实参1, 实参2,...) 说明 => function是系统关键字，表示的就是函数的意思 => function关键字后面的函数名称的括号里面放的是形参 => 单独的函数名称括号里面放的是实参 => 声明了函数，如果不调用的话，那么函数不会自己执行 => 调用函数的方式，是直接使用函数名称加括号

2.函数参数 => 形参：就是形式上的参数，相当于是一个变量，起了一个占位的作用 => 实参：就是最终需要使用的数据，实参可以是任意数据类型 => 参数默认值，是ES6新增的。可以给形参设置一个默认值，当你没有传递参数的时候可以使用默认值 + 注意点 => 形参和实参需要一一对应 => 形参不要重复，不然后面的会把前面的给覆盖掉

参数默认值，是ES6新增的。可以给形参设置一个默认值，当你没有传递参数的时候可以使用默认值 function fn(name='admin'){ document.write('<h1>欢迎，'+name+'</h1>') } fn('张涛') fn()

3.函数调用 => 函数名称加括号 => 通过事件调用函数函数分类 => 命名函数 => 匿名函数，就是函数没有名称，称之为匿名函数自执行函数 IIFE（立即执行函数） => 函数可以自己调用，不需要通过其他的方式来调用语法 => (function(){})() => (function(){}()) => !function(){}() => ~function(){}()

4.自执行函数

注意点：这里报错的原因是由于两个函数之间没有分号，会把两个函数解析成一个来执行，导致语法错误 ;(function(){ console.log('hello1') })()

三、计算两个文本框之和

<input type="text" id="txt1" value=""> + <input type="text" id="txt2" value=""> 计算

<script>
    /*
        需求：
        + 点击计算按钮的时候，把第一个和第二个文本框数值相加的结果以弹窗的形式展示
        分析
        + 点击按钮，可以使用html提供的onclick属性来调用函数
        + 怎么拿到文本框？通过id方式直接拿到
        + 文本框里面值是存储在哪里的？存储value里面的
        + 怎么拿到文本框的值呢？文本框.value
        + 文本框里面的值的类型是字符串
        问题
        + 在输入框里面输入内容在获取文本框的值的后面，因此拿不到
        + 解决方案
          => 可以把获取放在函数内部，当你输入完值后，再通过事件调用函数就可以拿到值了
    */ 
    function getSum(){
        // console.log(txt1.value, txt2.value)
        alert(Number(txt1.value) + Number(txt2.value))
    }
</script>

四、获取元素

1.第一种：直接给标记取名称，在js里面使用

2.第二种：document.gerElementById（），在网页中通过id的方式获取元素，参数要求是字符串

3.以上两种的区别： => 第一种方式最早出现IE浏览器里面的，而其他的浏览器是不支持的 => 第二种方式是所有浏览器都支持的，兼容性也比较好 => 第一种方式其他浏览器也是后面版本升级了才慢慢的支持的，并不代表所有浏览器都支持它 => 因此推荐使用第二种方式

4.ES5新增的js选择器 document.querySelector() => 获取单个元素的 => 如果是多个元素的话，默认只获取第一个 document.querySelectorAll() => 获取多个元素的这两个选择器里面支持css选择器的写法

通过class形式获取元素 console.log(document.getElementsByClassName('btn2')[0]) 通过标记名称获取所有相同的标记 console.log(document.getElementsByTagName('li'))

五、return

1.函数规则默认函数内部的数据函数外部是无法访问的

2.函数返回值是函数默认隐含的一个参数，你可以使用它，也可以不使用它，选择权在你手里你可以把return理解为是函数内部与外界沟通的一个"桥梁" => 可以把函数内部的数据返回给函数的外部使用 => 可以终止函数的执行

3.外界接收返回的数据的方式 => 外界必须使用函数名称加括号的形式接收内部的数据为什么外界需要使用函数名加括号这种形式来接收内部的数据? => 为了解决命名冲突问题 => 这样做既可以解决命名冲突问题，还可以表示函数调用，一举两得注意点 => 当一个函数没有返回值的时候，你去接收，返回是一个undefined

六、return的使用

1.求两个数的最大值 function getMax(a, b){ if(a>b){ return a }else{ return b } } console.log(getMax(10, 20)) document.write(getMax(20, 66)) alert(getMax(10, 20))

2 var txt = document.querySelector('input') function fn(){ // 非空验证 if(txt.value == ''){ alert('亲，表单不能为空！') return } console.log('后续代码') }

七、选择器的封装（简化代码操作）

js选择器

+ 参数

=> 参数1表示的是要获取的元素（支持css选择器）

=> 参数2表示你是否需要获取多个（可以传递一个true）

+ 注意点：

=> all如果不传递，那么all就是undefined，undefined进行判断肯定不满足条件，所以进入的else分支

=> 如果是获取单个，那么第二个参数可以传递一个false，或者不传递，不传递默认就是undefined和你传递false一样的效果

function $(ele, all){

if(all){

return document.querySelectorAll(ele)

}else{

return document.querySelector(ele)

}

八、常用事件

1.onclick 点击事件（单击） onmouseover 当鼠标移入的时候 onmouseout 当鼠标移出的时候 onmousemove 当鼠标移动的时候（连续触发） onload 加载事件

2.事件绑定把元素和事件结合起来语法：ele.事件名称 = function(){ 你的代码 }

3.onload加载事件：当网页中其他内容都加载完毕后，才去执行这个事件里面的代码问题：html、css、js代码从上自下执行，如果遇到了script标记那么会先暂停执行其他的代码，先把js代码执行完毕后，再去执行其他的代码 console.log($('div'))

九、显示隐藏

// 开关小技巧：可以把判断条件作为两种状态，一个是开的状态、一个是关的状态

// 声明一个变量作为状态 // var flag = true // btn.onclick = function(){ // if(flag){ // box.style.display = 'block' // flag = false // }else{ // box.style.display = 'none' // flag = true // } // }

var flag = true btn.onclick = function(){ if(flag){ box.style.height = '200px' flag = false }else{ box.style.height = '0' flag = true } } </script>