C1能力认证训练题解析 _ 第四部分 _ Web进阶(2)

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: C1能力认证训练题解析 _ 第四部分 _ Web进阶(2)

五、事件基础

事件绑定方式:


1. 方式一:行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2. 方式二:事件属性赋值


var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

3. 方式三:事件监听


//格式:addEventListener(type, listener, useCapture)
//type: 事件类型
//listener: 监听器(处理程序)
//useCapture: 默认为false,设置为true时,不会因冒泡触发监听器
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

(1)实现点击按钮,更改按钮内容效果,请补全横线处代码。


<button class="btn">点击我</button>
<script>
document.querySelector('.btn').________ ('click', function() {
    this.innerText = '我被点击了'
})
</script>

答案:addEventListener


此处需要为按钮绑定点击事件,根据代码形式可知,此处应使用事件监听方法。


(2)实现点击按钮,更改按钮内容效果,请补全横线处代码。


<div class="box">点击这个盒子</div>
<script>
    document.querySelector('.box').________ = function() {
        this.style.backgroundColor = '#000'
        this.style.color = '#fff'
        this.innerText = '盒子黑了'
    }
</script>

答案:onclick


此处使用事件属性赋值的方式绑定点击事件。


(3)实现点击变身按钮,弹出变身台词,请补全横线处代码。


<button>变身</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click', ________)
    function rider() {
        alert("胜利的法则已经确定了!")
    }
</script>

答案:rider


由题知,点击按钮需要弹出对话框,addEventListener方法第二个参数可以填写对应函数名进行监听,注意函数名后不需要括号。


(4)点击输出数字按钮,最终输出的数字是________。


<button>输出数字</button>
<script>
    var btn = document.querySelector('button')
    btn.onclick = foo2
    btn.onclick = foo1
    function foo1() {
        console.log(111)
    }
    function foo2() {
        console.log(222)
    }
</script>

答案:111


使用事件属性绑定两个事件处理程序,只会执行最后一个。


(5)代码如下,点击一次按钮,p元素中显示的数字是________。


<button >按钮</button>
<p>0</p>
<script>
  var btn = document.querySelector('button')
  var num = 0
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
</script>

答案:2


addEventListener为事件监听方法,可以调用多次事件处理程序,所以num执行了两次加法运算。


六、鼠标及键盘事件

1. 常用鼠标事件

image.png

       PS:事件处理程序中的this指代当前操作元素。


2. 常用键盘事件

image.png

3. 常用键盘属性事件

image.png

(1)实现点击按钮,弹出“已点击”提示,补全代码。

var btn = document.querySelector('button');
btn.addEventListener('________', showPublish);
function showPublish() {
  alert('已点击');
}

答案:click


addEventListener方法第一个参数为事件名称,此处应为对应的点击事件名称。


(2)点击按钮,弹框显示对应按钮中文字,补全代码。


<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
  var btns = document.querySelectorAll('button')
  for (var idx = 0; idx < btns.length; idx++) {
    btns[idx].addEventListener('click', function() {
      alert(________.innerHTML)
    })
  }
</script>

答案:this


横线处指的是当前节点,此处需要一个能指代当前节点的变量。


(3)鼠标移出span元素时,字体大小是________px。


<span>五谷丰登</span>
<script>
    var span = document.querySelector('span')
    span.addEventListener('mouseenter', function() {
        this.style.fontSize = '16px'
    })
    span.addEventListener('mouseleave', function() {
        this.style.fontSize = '14px'
    })
</script>

答案:14


mouseleave代表鼠标移出事件。


(4)补全代码 ,实现在文本框中输入内容时,唐僧先于白龙马输出。


<input type="text" />
<script>
  var input = document.querySelector('input')
  input.addEventListener('________', function() {
    console.log('白龙马')
  })
  input.addEventListener('keypress', function() {
    console.log('唐僧')
  })
</script>

答案:keyup


常用键盘事件执行顺序为:keydown->keypress->keyup。


(5)在input输入框中点击回车后,弹出登录成功提示,补全代码。


<input type="text">
<script>
  var input = document.querySelector('input')
  input.addEventListener('keyup', function(event) {
    if (event.key=== '________') {
      alert('登录成功')
    }
  })
</script>

答案:Enter


event.key返回按键标识符,此处应为对应的回车键标识符。


七、窗口事件

常用鼠标事件:

image.png

(1)实现窗口大小发生变化时,重置div元素高度为当前窗口高度的一半,请补全横线处代码。


<style>
    .box {
        width: 200px;
        height: 500px;
        background-color: blue;
    }
</style>
<div class="box"></div>
<script>
  window.addEventListener('________', function() {
      document.querySelector('.box').style.height = window.innerHeight/2 + 'px'
  })
</script>

答案:resize


此处需要监听窗口大小的变化,横线处应为对应的窗口大小改变事件名。


(2)实现窗口滚动时,类名为top的元素固定在顶部,请补全横线处代码。


<style>
    .box {height: 3000px;}
    .top {width: 200px;height: 200px;background-color: gray;}
</style>
<div class="box">
    <span>我是顶部</span>
    <div class="top">顶部元素</div>
</div>
<script>
  window.addEventListener('________', function() {
      document.querySelector('.top').style.position = 'fixed'
  })
</script>

答案:scroll


此处需要监听窗口滚动变化,横线处应为对应的元素滚动事件名。


(3)将h1元素中文字改为“欢迎光临”,请补全横线处代码。


<script>
  window.addEventListener('________', function() {
    document.querySelector('h1').innerText = "欢迎光临"
  })
</script>
<h1>等待中</h1>

答案:load


由于代码中的js写在了h1元素上方,所以需要等待页面加载完成才能获取到此元素,此处需使用页面加载完成时触发的事件。


(4)代码如下,最后输出的num数字是________。


<script>
  var num = 0
  function add() {
    if(document.querySelector('.box')) {
      num++
    }
    console.log(num)
  }
  add()
  window.addEventListener('load', function() {
    add()
  })
  add()
</script>
<div class="box"></div>

答案:1


add方法中,只有获取到box节点时才会对num加1;


box节点在JS代码下方,只有在load事件中的add方法才能获取到box节点,所以最终num只会执行一次相加。


八、BOM window 对象

1. window对象:

image.png

image.png


2. location 对象:

image.png

3. history 对象:

image.png

4. navigator对象:

image.png

5. screen对象:

image.png


(1)补全代码,完成点击按钮返回顶部的功能。


<style>
  .box { height: 3000px; }
  .btn { position: fixed;bottom: 50px;right: 50px; }
</style>
<div class="box"><p>我是顶部</p></div>
<button class="btn">返回顶部</button>
<script>
  var btn = document.querySelector('.btn')
  btn.addEventListener('click', function() {
    scrollTo(0,________)
  })
</script>

答案:0


返回顶部需要使用scrollTo方法,scrollTo的两个参数为窗口横坐标和纵坐标位置,此处应为顶部对应的纵坐标大小。顶部为(0,0)


(2)判断当前网页是否为http协议,如果是,则在当前页面跳转到https协议的页面,补全代码。

<script>
  if (location.________ === 'http:') {
  window.open('https://newsite.com', 'self')
  }
</script>

答案:protocol


此处需要判断网址协议,横线处应使用location对象中代表网址协议的属性。


(3)当前操作系统是否为windows,如果是windows则跳转对应下载地址,补全代码。


<button>下载VS code</button>
<script>
  if (navigator.________ === 'Win32') {
      document.querySelector('button').addEventListener('click', function() {
          location.href= 'https://code.visualstudio.com/docs/?dv=win64user'
      })
  }
</script>

答案:platform


此处需要判断当前系统类型,横线处应使用navigator中代表当前运行操作系统的属性。


(4)div元素的字体大小为________px,补全代码。


<style>
  .box {
    font-size: 16px;
  }
</style>
<div class="box">宽度比较</div>
<script>
  var box = document.querySelector('.box')
  if (screen.width < window.innerWidth) {
    box.style.fontSize = '12px'
  }
</script>

答案:16

screen.width代表屏幕宽度,window.innerWidth代表浏览器窗口宽度,浏览器宽度不可能超过屏幕宽度。


九、BOM 定时器

image.png

(1)实现页面等待2.5秒后显示对话框,请补全代码。


<script>
  setTimeout(showAlert, _____)
  function showAlert() {
    alert('你的小可爱突然出现')
  }
</script>

答案:2500


setTimeout设置的时间单位为毫秒,1秒 = 1000毫秒


(2)监听是否点击支付按钮,若点击支付则弹出支付成功提示,请补全代码。


<button>支付</button>
<script>
  var btn = document.querySelector('button')
  var flag = false
  btn.onclick = function() {
    flag = true
  }
  ________(function() {
    if (flag) {
      alert('支付成功')
    }
  }, 1000)
</script>

答案:setInterval


用户点击支付按钮的时机不确定,所以需要多次查询用户是否点击(点击后,flag为true),需要使用周期性定时器。


(3)代码如下,实现点击按钮停止定时器的功能,请补全代码。

<h1>0秒</h1>
<button>停止</button>
<script>
  var timer = setTimeout(function() {
    document.querySelector('h1').innerText = '5秒过去了'
  }, 5000);
  document.querySelector('button').addEventListener('click', function() {
    document.querySelector('h1').innerText = '提前停止'
    ________(timer)
  })
</script>

答案:clearTimeout


此处使用了setTimeout定时器,为了实现定时器的提前停止,需要使用其对应的清除定时器方法。

相关文章
|
3月前
|
机器学习/深度学习 自然语言处理 算法
人类偏好对齐训练技术解析
大型语言模型(LLMs)通过在大量文本数据集上进行无监督预训练,获得丰富的语言模式和知识,这一阶段训练后的模型被称为base model。
|
3月前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
【7月更文挑战第26天】在 Web 开发中, SQL 注入与 XSS 攻击常令人担忧, 但掌握正确防御策略可化解风险. 对抗 SQL 注入的核心是避免直接拼接用户输入至 SQL 语句. 使用 Python 的参数化查询 (如 sqlite3 库) 和 ORM 框架 (如 Django, SQLAlchemy) 可有效防范. 防范 XSS 攻击需严格过滤及转义用户输入. 利用 Django 模板引擎自动转义功能, 或手动转义及设置内容安全策略 (CSP) 来增强防护. 掌握这些技巧, 让你在 Python Web 开发中更加安心. 安全是个持续学习的过程, 不断提升才能有效保护应用.
47 1
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
82 2
|
4月前
|
Python
Python面向对象进阶:深入解析面向对象三要素——封装、继承与多态
Python面向对象进阶:深入解析面向对象三要素——封装、继承与多态
|
3月前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
【7月更文挑战第20天】模板引擎如Jinja2在Python Web开发中连接后端与前端,提高代码可读性和协作效率。Flask默认集成Jinja2,提供条件语句、循环、宏和模板继承等功能。例如,创建一个简单Flask应用,渲染&quot;Hello, World!&quot;,并展示如何使用条件语句和循环处理数据。通过宏定义重用代码,模板继承实现页面结构共享。学习模板引擎能提升开发效率和项目质量。
50 0
|
3月前
|
SQL 前端开发 数据库
Python Web开发进阶之路:从模板引擎到ORM的全面掌握
【7月更文挑战第19天】在Python Web开发中,提升技能的关键是理解和运用模板引擎(如Jinja2)与ORM技术。模板引擎,如在Flask中使用的Jinja2,使前端HTML与后端逻辑分离,便于维护。例如,通过路由函数`show_posts()`和`render_template()`呈现文章列表模板,用Jinja2的`for`循环展示内容。ORM,如SQLAlchemy,提供Pythonic的数据库操作,将表映射为类,SQL转化为方法调用。在博客系统中,定义Post模型并与数据库交互,展示了ORM简化数据管理的优势。通过实践这些工具,开发者能更好地驾驭复杂的Web项目。
45 0
|
3月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
57 0
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。
60 0
|
4月前
|
前端开发 开发者
CSS文本样式全面解析:从基础到进阶
CSS文本样式全面解析:从基础到进阶
|
5月前
|
网络协议 数据格式 Python
Python进阶---HTTP协议和Web服务器
Python进阶---HTTP协议和Web服务器
43 4

推荐镜像

更多