考试题

This commit is contained in:
asd
2021-04-01 09:06:07 +08:00
parent 9bf8e8d020
commit 71190d870d
47 changed files with 3570 additions and 239 deletions

451
考试/api.html Normal file
View File

@@ -0,0 +1,451 @@
<!DOCTYPE html>
<html>
<head>
<title>商品管理</title>
<meta charset="utf-8" />
<style>@charset "UTF-8";
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 6px;
}
/* 外层轨道 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.1);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.2);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
font-size: 13px;
line-height: 25px;
color: #393838;
position: relative;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,
th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a, a:link, a:visited {
color: #34495e;
text-decoration: none;
}
a:hover, a:focus {
color: #59d69d;
text-decoration: none;
}
a img {
border: none;
}
p {
padding-left: 10px;
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 16px;
font-size: 32px;
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
line-height: 50px;
}
h2 {
font-size: 28px;
padding-top: 10px;
padding-bottom: 10px;
}
h3 {
clear: both;
font-weight: 400;
margin-top: 20px;
margin-bottom: 20px;
border-left: 3px solid #59d69d;
padding-left: 8px;
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family: georgia, serif;
font-style: italic;
}
blockquote:before {
font-size: 40px;
margin-left: -10px;
font-family: georgia, serif;
color: #eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code,
pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
background: #f6f6f6;
}
pre code {
background-color: #f6f6f6;
color: #737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media print {
body,
code,
pre code,
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
}
table,
pre {
page-break-inside: avoid;
}
}
html,
body {
height: 100%;
}
.table-of-contents {
position: fixed;
top: 61px;
left: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
width: 260px;
}
.table-of-contents > ul > li > a {
font-size: 20px;
margin-bottom: 16px;
margin-top: 16px;
}
.table-of-contents ul {
overflow: auto;
margin: 0px;
height: 100%;
padding: 0px 0px;
box-sizing: border-box;
list-style-type: none;
}
.table-of-contents ul li {
padding-left: 20px;
}
.table-of-contents a {
padding: 2px 0px;
display: block;
text-decoration: none;
}
.content-right {
max-width: 700px;
margin-left: 290px;
padding-left: 70px;
flex-grow: 1;
}
.content-right h2:target {
padding-top: 80px;
}
body > p {
margin-left: 30px;
}
body > table {
margin-left: 30px;
}
body > pre {
margin-left: 30px;
}
.curProject {
position: fixed;
top: 20px;
font-size: 25px;
color: black;
margin-left: -240px;
width: 240px;
padding: 5px;
line-height: 25px;
box-sizing: border-box;
}
.g-doc {
margin-top: 56px;
padding-top: 24px;
display: flex;
}
.curproject-name {
font-size: 42px;
}
.m-header {
background: #32363a;
height: 56px;
line-height: 56px;
padding-left: 60px;
display: flex;
align-items: center;
position: fixed;
z-index: 9;
top: 0;
left: 0;
right: 0;
}
.m-header .title {
font-size: 22px;
color: #fff;
font-weight: normal;
-webkit-font-smoothing: antialiased;
margin: 0;
margin-left: 16px;
padding: 0;
line-height: 56px;
border: none;
}
.m-header .nav {
color: #fff;
font-size: 16px;
position: absolute;
right: 32px;
top: 0;
}
.m-header .nav a {
color: #fff;
margin-left: 16px;
padding: 8px;
transition: color .2s;
}
.m-header .nav a:hover {
color: #59d69d;
}
.m-footer {
border-top: 1px solid #ddd;
padding-top: 16px;
padding-bottom: 16px;
}
/*# sourceMappingURL=defaultTheme.css.map */
</style>
</head>
<body>
<div class="m-header">
<a href="#" style="display: inherit;"><svg class="svg" width="32px" height="32px" viewBox="0 0 64 64" version="1.1"><title>Icon</title><desc>Created with Sketch.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#F2F2F2" offset="100%"></stop></linearGradient><circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle><filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix></filter></defs><g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="大屏幕"><g id="Icon"><circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle><path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fill-rule="nonzero"></path><path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fill-rule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path><path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fill-rule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path><g id="inner-round"><use fill="black" fill-opacity="1" filter="url(#filter-3)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-2"></use><use fill="#F7F7F7" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-2"></use></g></g></g></g></svg></a>
<a href="#"><h1 class="title">YAPI 接口文档</h1></a>
<div class="nav">
<a href="https://hellosean1025.github.io/yapi/">YApi</a>
</div>
</div>
<div class="g-doc">
<div class="table-of-contents"><ul><li><a href="#u516cu5171u5206u7c7b">公共分类</a><ul><li><a href="#u67e5u8be2u5546u54c10a3ca20id3du67e5u8be2u5546u54c13e203ca3e">查询商品
<a id=查询商品> </a></a></li><li><a href="#u6dfbu52a0u5546u54c10a3ca20id3du6dfbu52a0u5546u54c13e203ca3e">添加商品
<a id=添加商品> </a></a></li></ul></li></ul></div>
<div id="right" class="content-right">
<h1 class="curproject-name"> 商品管理 </h1>
<h3 id="">公共信息</h3>
<h1>接口前缀</h1>
<p><code data-backticks="1">https://kaoshi-shangpin.theluyuan.com/</code></p>
<p>例如 /findshop 请求地址就是 <code data-backticks="1">https://kaoshi-shangpin.theluyuan.com/findshop</code></p>
<h1 id="u516cu5171u5206u7c7b">公共分类</h1>
<p></p>
<h2 id="u67e5u8be2u5546u54c10a3ca20id3du67e5u8be2u5546u54c13e203ca3e">查询商品
<a id=查询商品> </a></h2>
<p></p>
<h3 id="-2">基本信息</h3>
<p><strong>Path</strong> /findshop</p>
<p><strong>Method</strong> GET</p>
<p><strong>接口描述:</strong></p>
<h3 id="-3">请求参数</h3>
<h3 id="-4">返回数据</h3>
<table>
<thead class="ant-table-thead">
<tr>
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
</tr>
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> code</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">0成功 1 失败</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> data</span></td><td key=1><span>object []</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">返回数据列表</span></td><td key=5><p key=3><span style="font-weight: '700'">item 类型: </span><span>object</span></p></td></tr><tr key=0-1-0><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> _id</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">数据库id </span></td><td key=5></td></tr><tr key=0-1-1><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> mingcheng</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品名称</span></td><td key=5></td></tr><tr key=0-1-2><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> fenlei</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品分类</span></td><td key=5></td></tr><tr key=0-1-3><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> maidian</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品卖点</span></td><td key=5></td></tr><tr key=0-1-4><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> jiage</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品价格</span></td><td key=5></td></tr><tr key=0-1-5><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> huodongjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品活动价格</span></td><td key=5></td></tr><tr key=0-1-6><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> kucun</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品库存</span></td><td key=5></td></tr><tr key=0-1-7><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> shangjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">是否上架 1上架 0不上架</span></td><td key=5></td></tr><tr key=0-1-8><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> xiangqing</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品详情</span></td><td key=5></td></tr><tr key=0-1-9><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> xiaoliang</span></td><td key=1><span>number</span></td><td key=2>非必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品销量</span></td><td key=5></td></tr><tr key=0-1-10><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> num_key</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">唯一数字id</span></td><td key=5></td></tr>
</tbody>
</table>
<h2 id="u6dfbu52a0u5546u54c10a3ca20id3du6dfbu52a0u5546u54c13e203ca3e">添加商品
<a id=添加商品> </a></h2>
<p></p>
<h3 id="-5">基本信息</h3>
<p><strong>Path</strong> /addshop</p>
<p><strong>Method</strong> POST</p>
<p><strong>接口描述:</strong></p>
<h3 id="-6">请求参数</h3>
<p><strong>Headers</strong></p>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>参数值</th>
<th>是否必须</th>
<th>示例</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content-Type</td>
<td>application/json</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p><strong>Body</strong></p>
<table>
<thead class="ant-table-thead">
<tr>
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
</tr>
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> mingcheng</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品名称</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> fenlei</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品分类 1代表手机数码 2代表家用电器 3代表男装 4代表女装</span></td><td key=5></td></tr><tr key=0-2><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> maidian</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品卖点</span></td><td key=5></td></tr><tr key=0-3><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> jiage</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品价格 </span></td><td key=5></td></tr><tr key=0-4><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> huodongjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品活动价格</span></td><td key=5></td></tr><tr key=0-5><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> kucun</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品库存</span></td><td key=5></td></tr><tr key=0-6><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> xiaoliang</span></td><td key=1><span>number</span></td><td key=2>非必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品销量</span></td><td key=5></td></tr><tr key=0-7><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> shangjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">是否上架 1 上架 0不上架</span></td><td key=5></td></tr><tr key=0-8><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> xiangqing</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品详情</span></td><td key=5></td></tr>
</tbody>
</table>
<h3 id="-7">返回数据</h3>
<table>
<thead class="ant-table-thead">
<tr>
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
</tr>
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> code</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">0 成功 1 失败</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> msg</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">信息</span></td><td key=5></td></tr>
</tbody>
</table>
<footer class="m-footer">
<p>Build by <a href="https://ymfe.org/">YMFE</a>.</p>
</footer>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
考试/htmlcss测试.docx Normal file

Binary file not shown.

47
考试/htmlcss测试.md Normal file
View File

@@ -0,0 +1,47 @@
# 前端基础测试
### 考试说明:
1. 在电脑上新建一个以自己名字拼音命名的文件夹 完成答题后将文件夹压缩发到微信
2. 本次考试试题都是开放性题目,实现题目要求的效果即可,阅卷采用 采点得分制
3. 考试时间 180分钟
4. 图片仅限于小图标,好像也用不到图标,布局样式以写的内容为准,大面积截图的本题不得分 情节严重者本次考试分数为0分
### 考试内容
一、京贡商城 h5端
![](E:\web\考试\htmlcss测试.assets\image-20210121161513990.png)
![image-20210121161533574](E:\web\考试\htmlcss测试.assets\image-20210121161533574.png)
![image-20210121161544894](E:\web\考试\htmlcss测试.assets\image-20210121161544894.png)
根据蓝湖设计图要求高度还原
要求:
1. 还原设计图的页面架构,内容,图片,文字...
2. 文件命名规范,目录结构规范,变量命名有较高的可读性
3. 运行效果跟设计图高度一致 不能出现横向滚动条
4. 灵活运用各种标签 各种布局方式
评分标准:
根据完成状况,代码可读性进行评分
顶部导航 10分
广告(大) 15分
导航菜单 15分
小的广告 每个10分
今日主推 10分
为您推荐 15分
底部导航 15分

BIN
考试/htmlcss测试.pdf Normal file

Binary file not shown.

View File

@@ -0,0 +1,98 @@
# 前端基础测试
### 考试说明:
1. 在电脑上新建一个以自己名字拼音命名的文件夹 完成答题后将文件夹压缩发到微信群
2. 本次考试试题都是开放性题目,实现题目要求的效果即可,阅卷采用 采点得分制
3. 图片仅限于小图标,好像也用不到图标,布局样式以写的内容为准,大面积截图的本题不得分 情节严重者本次考试分数为0分
4. 题目中只规定显示的内容和交互的要求,对样式不做描述,样式方面尽可能做的好看就行
### 考试内容
一、商品添加表单
包括内容:
- 商品名称(必填)
- 商品分类(下拉框 必选)
下拉框内容: 手机数码 家用电器 男装 女装
- 商品卖点 (选填 商品卖点描述)
- 商品价格(必填)
- 活动价(选填)
- 商品库存(必填)
- 商品销量(选填)
- 是否上架 (单选框 必选)
- 商品详情(文本域 必填)
- 保存按钮
要求
1. 除了指定控件的之外,其他的都是文本框
2. 商品名称为空时 输入框显示预期值“请输入商品名称”,
商品卖点为空时 输入框显示预期值”请输入商品卖点“,
商品价格为空时,输入框显示预期值”请输入商品价格“
商品库存为空时,输入框显示预期值”请输入商品库存“
商品销量为空时 输入框显示预期值”请输入商品销量“
商品详情为空时textarea中显示 ”请输入商品详情“
3. 用户点击保存时,需要做如下验证
- 所有必选项的为空验证 为空时提示”请完善商品信息“
- 活动价必须低于商品价格
- 商品销量必须低于商品库存
4. 验证通过后 根据接口说明表生成对象并转成json字符串调用后台接口 根据返回值说明 成功后弹框保存成功
二、商品列表
将商品添加的内容显示在列表上包括内容:
- 商品名称
- 商品分类
- 商品卖点
- 商品价格
- 活动价
- 商品库存
- 商品销量
- 是否上架
### 说明
商品分类: 1代表手机数码 2代表家用电器 3代表男装 4代表女装
是否上架1代表是 2 代表否
价格相关单位为元
接口说明:

View File

@@ -0,0 +1,322 @@
# 考试题目
## 填空
1. js变量类型一共有 2 种,分别是哪些
原始值和引用值
原始值 number string boolean undefined nll
引用值 object
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5
3. 1 + 1 的运算结果是 11
4. 0 || 3 的返回结果是 3
5. 1 && 5 的返回结果是 5
6. 三种数据类型检测的方法 typeof instance of object.prototype.toString.call()
7. js选中dom元素的几种方式 至少5种
document.getelementbyid
document.getelementsbyclassname
document.getelementsbytagname
document.getelementsbyname
document.queryselectorall
8. jq选择器 至少5种(含组合型选择器) 并附上说明
$('#id')
$('.类名')
$('标签名')
$('[href='aaa']')
## 简答
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
var arr=[1,2,4,8,32]
var sum=0
for(let i in arr){
sum+=arr[i]
}
document.write(sum)
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
function add(e){
var sum=0
for(let i=1;i<=e;i++){
sum+=i
}
return sum
}
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
function panduan(e){
if(e%2){
return 0
}else{
return 1
}
}
4. 有下面一段代码 请写出答案
```javascript
let obg = {
name:"啦啦啦",
age:18
};
function func(o){
o.name = 123
}
func(obg);
```
执行完之后obg的值是什么 为什么
{name:123,age:18}
func(obg) 把obg 当作参数传了进去 然后 从函数体内 修改了obj里name的值为123
然后 重新输出obg时 name 就变成123了
5. 有下面一段代码 请写出答案
```javascript
let n = "喵喵喵"
window.n = "汪汪汪"
let obg = {
n:"啦啦啦",
echo: ()=> {
return this.n;
}
}
let jieguo = obg.echo()
```
请问变量 jieguo 的值是什么,为什么
汪汪汪
箭头函数内部没有this 他的this会指向外面一层的对象所以会从window 里取n的值 即汪汪汪
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
6. function miao(name){
this.name=name
this.echo=function(){
return this.name
}
}
var mao=new Miao('本猫咪')
7. 分析下面代码的预编译过程
```
var shopname='解忧杂货店';
var auth="东野圭吾"
function echo(){
var say=function(){console.log("welcome")}
age=40
function end(){
console.log('欢迎下次光临')
}
}
```
go:
1.{
shopname:undefined
auth:undefined
age:undefined
echo:undefined
}
2.{
shopname:"解忧杂货店"
auth:"东野圭吾"
age:40,
echo:undefined
}
3.{
shopname:"解忧杂货店"
auth:"东野圭吾"
age:40,
echo:function
}
AO:
1.{
pri:undefined
say:undefined
end:undefined
}
2.{
pri:0.0,
say:function(){},
end:undefined
}
3.
{
pri:0.0,
say:function(){},
end:function(){},
}
8. 用js创建元素的方式 画一个五环之歌
如下:
![image-20210219130402087](E:\web\考试\前端考试原题.assets\image-20210219130402087.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@@ -0,0 +1,227 @@
# javascript 基础测试
## 单选题
1. javascript 代码需要放置在______标签之间
A.scripe
B.javascript
C.script
D.scripte
答案 A
解析 js代码需要放置在script标签之间才能被识别
2. script 标签可以被放置的位置是
A.<!doctype>文档声明之后就可以
B.boby标签内部
C.html标签结束之后
D.head标签内部
答案 D
解析 script标签可以放置在 head标签内或者是 body 标签内部
B选项是boby标签
3. 下面哪种javascript引入方式是错误的
A.在.html文件中的body标签中创建script 标签 在script 标签中写 js代码
B.在.js文件中写js代码 在.html通过 ``` <link src="js文件路径"> ```
C.在html 标签内执行js语句 如:``` <button onclick="alert()">save</button> ```
D.在.html文件内 在head标签中创建script 标签 在script 标签中写 js代码
答案 B
解析 link标签是用来引入外部css文件的
1. 下面两段代码js文件的加载顺序
demo1:
```
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
```
demo2:
```
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
```
A.demo1的顺序为jquery.js, script2,script3
demo2的顺序为script2.js, script3.js, jquery
B.demo1的顺序为script2.js,script3.js,jquery.js
demo2的顺序为script3.js,script2.jsjquery.js
C.demo1的顺序为只执行script2
demo2的顺序是 jquery.js, script2.js, script3.js
D.demo1的顺序是script3.js,script2.js,jquery.js
demo2的执行顺序是script3.js script2.js jquery,js
答案C
解析 引入js时 script标签中加入async后js文件的执行顺序不确定 。但是 如果js代码报错就会造成阻塞 即后面的js代码不执行 所以 demo1 除了jquery.js, script2.js, script3.js 这个顺序之外 其他顺序会因为报错只执行第一个
引入script标签中加入 defer后js文件执行顺序确定为 文件引入的顺序
defer属性只支持外部引入的方式
2. 下面哪一种js注释添加方式是正确的
A. /
B.//
C.\
D.*
答案 B
js单行注释 符号是// js多行注释符号是 /* */
3. console.log()在chrome运行的结果会打印在哪里
A. 页面上
B.开发者工具中的sources中
C.开发者工具中的xhr中
D.开发者工具的console中
答案 D
解析 console.log 会打印在chrome浏览器的console板块中
4. 下面哪种JavaScript输出数据方式的表述是错的
A.使用 window.alert() 弹出带输入框的警告框。
B.使用 document.write() 方法将内容写到 HTML 文档中。
C.使用 innerHTML 写入到 HTML 元素。
D.使用 console.log() 写入到浏览器的控制台。
答案: A
解析 alert 弹出的警告框不包含 输入框
5. 下面哪个关键字能声明js变量
A.def
B.var
C.数据类型+变量名=变量值
D.变量不需要声明 直接写变量名就行
答案 B
6. 下面哪个不是js关键字
A.abstract
B.let
C.import
D.absolute
答案 D
解析 absolute是css的绝对定位
7. 下面哪个变量名符合要求
A.shop1
B.public
C.point&
D.12SY
答案 A
解析:
名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
名称对大小写敏感y 和 Y 是不同的变量)
保留字(比如 JavaScript 的关键词)无法用作变量名称
8. 阅读下面代码 选择运行结果
code :
```
var person = "Bill ";
var person1="Bill";
console.log(person,person1)
```
A. bill Bill
B. BillBill
C.BILLBILL
D. billbill
9. 将 "025.5" 的string类型变量转化为 number 类型后 值是
A.0255
B.255
C.25.5
D.5.5
10. 1 + 1aa 的运算结果是
A.11aa
B.2
C.2aa
D.1aa
11. 0 || 3 || 3 的返回结果是
A.0
B.3
C.true
D.1
12. 1 && 0 && 5 的返回结果是
A.0
B.1
C.true
D.5
## 填空题
1. 什么是字面量 常见的字面量有__ , __ , __ , __ , __ , __
答案字面量literal用于表达源代码中一个固定值的表示法notation
字符串自变量 整数字面量 浮点数字面量 布尔字面量 数组字面量 对象字面量
2. 运算符的优先级
3. js基本数据类型和引用数据类型的区别是__________
4. 外部引入js文件的优势是
5. 在html中 javascript语句是由 "执行"的"指令"
6. javascript语句由 构成
7. 分割javascript语句
8. 阅读下面代码 写出运行结果
code :
```
typeof "John"
typeof 3.14
typeof NaN
typeof false
typeof [1,2,3,4]
typeof {name:'John', age:34}
typeof new Date()
typeof function () {}
typeof myCar // (如果 myCar 没有声明)
typeof null
```
答案:
```
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
```

View File

@@ -0,0 +1,191 @@
# web前端javascript综合水平测试
## 填空
1. javascript 由 ,三部分组成,简单介绍一下这三部分
2. 检测数据类型的方式有 三种方式什么区别
3. 检测NaN的数据类型结果为
4. js中 对象转json的方法为 json格式转对象的方法为
5. js 浏览器对象模型包括 ,五部份 分别介绍一下这5部分
6. var a=1;console.log(a++) 运行的结果为:
7. js运算符的优先级
8. js设置属性和属性值的方法为
9. 五大主流浏览器及内核
10. jq ajax基本结构及解释
11. 本地缓存的增删改查
12. jq选择器列举
## 指出下面代码运行结果并分析其执行过程
1 .
```
function a(n) {
if (n <= 1) {
return 1
} else {
return n * a(n - 1)
}
}
console.log(a(5))
var cheng=a
a=null
console.log(cheng(5))
```
2
```
function C1(name) {
if (name) {
this.name = name;
}
}
function C2(name) {
this.name = name;
}
function C3(name) {
this.name = name || 'join';
}
C1.prototype.name = 'Tom';
C2.prototype.name = 'Tom';
C3.prototype.name = 'Tom';
alert((new C1().name) + (new C2().name) + (new C3().name));
```
3
```
function fn()
{
this.user = '追梦子';
var obj={user:"momo"}
return {};
}
var a = new fn;
console.log(a.user);
```
4
```
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call();
changeColor.call(window);
changeColor.call(document);
changeColor.call(this);
changeColor.call(s1);
```
## 简答题
1. 说明call,apply,bind 的区别几个
2. js的typeof的返回值有哪些
3. 说出数组相关的几个方法并说明作用
4. ajax请求时的get、post的区别
5. 如何阻止浏览器的默认事件
6. 如何阻止事件冒泡
7. == 和===的区别
8. 局部变量和全局变量的区别
## 通过代码实现下面要求
1. 通过原型链实现对象继承
2. js手动实现 jq的链式操作
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算
4. 实现一个打点计时器,要求
1、从 start 到 end包含 start 和 end每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1start 和end为用户输入
2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
5. 在页面上将下面的json数据需要放到表格里
json数据为
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
注: title对应文章标题auth 对应的是作者 contnet对应的是简介 date对应的是日期
6. 实现 fizzBuzz 函数,参数 num 与返回值的关系如下:
1、如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz
2、如果 num 能被 3 整除,返回字符串 fizz
3、如果 num 能被 5 整除,返回字符串 buzz
4、如果参数为空或者不是 Number 类型,返回 false
5、其余情况返回参数 num

View File

@@ -0,0 +1,157 @@
# 考试题目
## 填空
1. js变量类型一共有 种,分别是哪些
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么?
3. 1 + 1 的运算结果是
4. 0 || 3 的返回结果是
5. 1 && 5 的返回结果是
6. 三种数据类型检测的方法
7. js选中dom元素的几种方式 至少5种
8. jq选择器 至少5种(含组合型选择器) 并附上说明
## 简答
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
4. 有下面一段代码 请写出答案
```javascript
let obg = {
name:"啦啦啦",
age:18
};
function func(o){
o.name = 123
}
func(obg);
```
执行完之后obg的值是什么 为什么
5. 有下面一段代码 请写出答案
```javascript
let n = "喵喵喵"
window.n = "汪汪汪"
let obg = {
n:"啦啦啦",
echo: ()=> {
return this.n;
}
}
let jieguo = obg.echo()
```
请问变量 jieguo 的值是什么,为什么
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
7. 分析下面代码的预编译过程
```
var shopname='解忧杂货店';
var auth="东野圭吾"
function echo(){
var say=function(){console.log("welcome")}
age=40
function end(){
console.log('欢迎下次光临')
}
}
```
8. 用js创建元素的方式 画一个五环之歌
如下:
![image-20210219130402087](E:\web\考试\前端考试原题.assets\image-20210219130402087.png)

Binary file not shown.

View File

@@ -0,0 +1,165 @@
# 考试题目
## 填空
1. js由几部分组成 分别是
2. js数据类型中原始值与引用值的区别为
3. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么?
4. 1 + 1aa 的运算结果是
5. 0 || 3 || 3 的返回结果是
6. 1 && 0 && 5 的返回结果是
7. 三种数据类型检测的方法
8. typeof 的返回值有
9. 列举几个与页面交互的函数
10. 列举操作数组的常用方法
## 简答
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
4. 某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,
加密规则如下每位数字都加上5,然后用除以10的余数代替该数字再将第一位和第四位交换
第二位和第三位交换,请编写一个函数,传入原文,输出密文
5. 写一个函数实现传入一个数组返回冒泡排序后的结果
6. 读代码 写出执行结果 并且分析原因
```
const pri=10
pri=8(pri)
```
```
var num=0
num++
console.log(++num)
```
```
var echo=function(e){
console.log("传入的值为"+e)
return
console.log("echo")
}
```
```
var a=0
while(a<5){
console.log(true)
}
```
```
function say(){
console.log(hello)
return
}
var word=say()
console.log(word)
```

View File

@@ -0,0 +1,512 @@
# web前端javascript综合水平测试 178
## 填空
1. javascript 由 ECMAscript DOM BOM ,三部分组成,简单介绍一下这三部分 5
ECMAscript: javascript的语言规范 包括:语法,类型,语句等等
DOM文档对象模型指的是html页面上的标签
BOM :即浏览器对象模型,是浏览器提供的接口
2. 检测数据类型的方式有 typeof instanceof Object.prototype.toString.call() 三种方式什么区别 4
typeof: 原始值数据类型直接返回null返回Object , 引用值除了function 返回的是function 其他的引用值返回的是 object
instanceof :能检测引用值,原始值不行
Object.prototype.toString.call() 都可以检测
3. 检测NaN的数据类型结果为 [object Number] 5
4. js中 对象转json的方法为 JSON.stringify() json格式转对象的方法为 JSON.parse() 5
5. js 浏览器对象模型包括 window location screen navigator history ,五部份 分别介绍一下这5部分 5
window: 浏览器的窗口
location:浏览器当前url信息
screen:客户端屏幕信息
navigator:浏览器本身信息
history:记录历史信息
6. var a=1;console.log(a++) 运行的结果为: 1 5
js运算符的优先级 优先级从高到低依次是:(); 一元加减 ;求幂 ; */ ; +,- ; = ; 4
7. js设置属性和属性值的方法为 object.setAttribute(attribute,value) 5
8. 五大主流浏览器及内核 Chrome:Webkit/blink; Safari:Webkit; IE:trident; FireFox:gecko; Opera: presto 5
9. jq ajax基本结构及解释 5
$.ajax({
url: "address", // 网络地址
data:obj, //传输数据
type:"GET", //传输方法
dataType:"json", //数据类型
success: function (res) { //成功返回的函数方法
console.log(res)
}
});
10. 本地缓存的增删改查 5
localStorage.setItem(key, obj)
localStorage.removeItem(key);
localStorage.setItem(key, obj)
localStorage.getItem(key);
11. jq选择器列举 4
$(".class") $("p") $("#id") $("ul li:first") $("p[target = "xxx"]")
## 指出下面代码运行结果并分析其执行过程
1 . 10
```
function a(n) {
if (n <= 1) {
return 1
} else {
return n * a(n - 1)
}
}
console.log(a(5)) //120 调用a函数递归5*4*3*2*1=120
var cheng=a //把函数a赋给cheng
a=null //a的值改为null
console.log(cheng(5)) //执行cheng时return的a找不到故错误Error: a is not a function
```
2 10
```
function C1(name) {
if (name) {
this.name = name;
}
}
function C2(name) {
this.name = name;
}
function C3(name) {
this.name = name || 'join';
}
//c1/2/3的原型的name为tom
C1.prototype.name = 'Tom';//调用时没有name传值if里的语句不调用故找原型的name为tom
C2.prototype.name = 'Tom';//调用时没有name传值故this.name为undefined
C3.prototype.name = 'Tom';//调用时没有name传值故name为false||'join'这个true||返回第一个真值故this.name为join
alert((new C1().name) + (new C2().name) + (new C3().name));
//Tomundefinedjoin
```
3 10
```
function fn()
{
this.user = '追梦子';
var obj={user:"momo"}
return {};
}
var a = new fn;
console.log(a.user); //undefined
//构造函数中的this与被创建的新对象a绑定当函数return的值为对象时this就指向这个被return的对象对象里为空故.user为undefined
```
4 10
```
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red 默认window借用changeColor方法输出this.color及window的颜色red
changeColor.call(window); //red 同上
changeColor.call(document); //yellow document借用changeColor方法输出document.color及document的颜色yellow
changeColor.call(this); //red this默认是window的故同window
changeColor.call(s1); //blue s1借用changeColor方法输出s1.color及s1的颜色blue
```
## 简答题
1. 说明call,apply,bind 的区别几个 10
call参数一个个传参
apply 参数放到一个数组传参;
bind是返回对应函数便于稍后调用apply、call是立即调用
2. js的typeof的返回值有哪些 10
number, boolean, string, undefined, object, function,
3. 说出数组相关的几个方法并说明作用 6
push() 在末端添加项 pop() 从末端移除并返回该元素
shift() 从首端移除并返回该元素 unshift() 从首端添加项
splice(p, d, items) —— 从p开始删除d个元素并插入 items
4. ajax请求时的get、post的区别 5
使用Get请求时,参数在URL中显示, 发送数据量小 ,不安全
使用Get请求时,参数不会在URL中显示, 发送数据量大 ,安全
5. 如何阻止浏览器的默认事件 5
event.preventDefault();
6. 如何阻止事件冒泡 5
event.stopPropagation();
7. == 和===的区别 5
===比较类型和值,==只比较值
8. 局部变量和全局变量的区别 10
1. 作用域不同:全局作用域为整个程序,而局部为当前函数或循环等
2. 内存存储方式不同:全局存储在全局数据区中,局部存储在栈区
3. 生命期不同:全局的生命期随主程序的销毁而销毁,局部随函数或循环退出就销毁
4. 使用方式不同:全局声明后程序的各个部分都可以用到,局部只能在局部使用。
## 通过代码实现下面要求
1. 通过原型链实现对象继承 10
**function** Parent(p) {
this.p = p;
this.psay = **function** () {
console.log("Parent:"+p);
}
}
**function** Child(c) {
**var** c = c;
this.csay = **function** () {
console.log("childName: "+c)
}
}
**function** GrandChild(g) {
this.g = g;
this.gsay = **function** () {
console.log("grandChildName :"+ this.g);
}
}
**let** parent = new Parent();
Child.prototype = parent;
**let** child = new Child();
GrandChild.prototype = child;
**let** grandchild = new GrandChild();
2. js手动实现 jq的链式操作 10
function Person(){};
Person.prototype ={
setName:function(name){
this.name = name;
return this;
},
setAge:function(age){
this.age = age;
return this;
},
setSex:function(sex){
this.sex = sex;
return this;
}
}
var Person= new Person(); Person.setName("Tom").setAge(24).setSex("male");
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算 10
<body>
<input type="text" name="text" id="pre" >
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="text" id="next" >
<span>=</span>
<input type="text" id="result" readonly="true">
<input type="button" id="btn" value="提交" onclick="calculator();">
    <script>
**function** calculator(){
**var** pre=document.getElementById("pre").value;
**var** next=document.getElementById("next").value;
**var** opra=document.getElementById("operator").value;
**var** result=0;
switch(opra) {
case "+":
result=parseFloat(pre)+parseFloat(next);
break;
case "-":
result=parseFloat(pre)-parseFloat(next);
break;
case "*":
result=parseFloat(pre)*parseFloat(next);
break;
case "/":
if(parseFloat(next)!=0){
result=parseFloat(pre)/parseFloat(next);
}
else{
alert("除数不能为0");
return;
}
break;
default:
break;
}
document.getElementById("result").value=result;
}
</script>
</body>
4. 实现一个打点计时器,要求
1、从 start 到 end包含 start 和 end每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1start 和end为用户输入
2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
start = prompt('输入一个数从它开始到逐渐加一');
end = prompt('一直加到几为止');
count(start,end);
**function** count(start, end) {
console.log(start);
**var** temp=setInterval(**function**(){
if(start<end){
console.log(++start);
}
else{
clearInterval(temp);
}
},1000);
return {
cancel:**function**(){
clearInterval(temp);
}
}
}
5. 在页面上将下面的json数据需要放到表格里
json数据为
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
注: title对应文章标题auth 对应的是作者 contnet对应的是简介 date对应的是日期
**var** stu = [
{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"}
]
<table border="1px" id="tab">
        <tr>
            <th>文章标题</th>
            <th>作者</th>
            <th>简介</th>
            <th>日期</th>
        </tr>
    </table>
$(document).ready(**function**() {
**var** s = "";
for(**var** i = 0; i < stu.length; i++) {
s = "<tr><td>" + stu[i].title + "</td><td>" + stu[i].auth + "</td><td>" +
stu[i].content + "</td><td>" + stu[i].date + "</td></tr>";
$("#tab").append(s);
}
});
6. 实现 fizzBuzz 函数,参数 num 与返回值的关系如下:
1、如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz
2、如果 num 能被 3 整除,返回字符串 fizz
3、如果 num 能被 5 整除,返回字符串 buzz
4、如果参数为空或者不是 Number 类型,返回 false
5、其余情况返回参数 num
**function** fizzBuzz(num) {
if(num%3==0&&num%5==0){
return "fizzbuzz";
}else if(num%3==0){
return "fizz";
}else if(num%5==0){
return "buzz";
}else if(typeof(num)!="number"){
return false;
}else{
return num;
}
}

View File

@@ -0,0 +1,222 @@
# 考试题目
<font color="red">77</font>
## 填空
1. js变量类型一共有 7 种,分别是哪些 boolean string undefined null bigint number symbol <font color="red">3</font>
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5 <font color="red">5</font>
3. 1 + 1 的运算结果是 11 <font color="red">5</font>
4. 0 || 3 的返回结果是 3 <font color="red">5</font>
5. 1 && 5 的返回结果是 5 <font color="red">5</font>
6. 三种数据类型检测的方法 typeof instance of object.prototype.toString.call()
<font color="red">3</font>
## 简答
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。<font color="red">10</font>
let num = [1,2,4,8,32];
let sum = 0;
for (let i=0;i<num.length;i++) {
sum += num[i];
}
alert(sum);
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加) <font color="red">10</font>
let s = 0;
function sum(n){
for (let i=1;i<=n;i++) {
s += i;
}
alert(s);
}
sum(3);
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0 <font color="red">10</font>
function odd(n){
if (n%2==0) {
return 1;
}
else { return 0; }
}
odd(3);
4. 有下面一段代码 请写出答案 <font color="red">8</font>
```javascript
let obg = {
name:"啦啦啦",
age:18
};
function func(o){
o.name = 123
}
func(obg);
```
执行完之后obg的值是什么 为什么
obg {
name:123,
age:18
};
函数把obj当做参数传入并改变了obj的name属性
5. 有下面一段代码 请写出答案 <font color="red">10</font>
```javascript
let n = "喵喵喵"
window.n = "汪汪汪"
let obg = {
n:"啦啦啦",
echo: ()=> {
return this.n;
}
}
let jieguo = obg.echo()
```
请问变量 jieguo 的值是什么,为什么
汪汪汪
jiegou调用obg的echo方法由于echo是箭头函数不能调用对象内的n啦啦啦只能调用对象外一层的n对象外一层的n 先定义为喵喵喵后改为汪汪汪所以jiegou的值为汪汪汪
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name <font color="red">3</font>
function Fnname{
this.name = name;
echo(name){
return "name";
}
}
let fn = new Fn("LiMing");
7. 分析下面代码的预编译过程 <font color="red">5</font>
```
var shopname='解忧杂货店';
var auth="东野圭吾"
function echo(){
var say=function(){console.log("welcome")}
age=40
function end(){
console.log('欢迎下次光临')
}
}
```
GO: 1.先找到变量和函数声明 找到 shopname auth echo()
2.执行过程中给变量赋值 var shopname='解忧杂货店' var auth="东野圭吾"
3.执行过程中给函数赋函数体 function echo(){ ...}
4.执行
AO 1.在函数体内部先找到变量和形参 找到say
2.执行过程中形参和实参相统一,并且给函数表达式赋值
var say=function(){console.log("welcome")}
3.执行过程中寻找函数声明并给函数赋函数体
function end(){console.log('欢迎下次光临')}
4.执行

View File

@@ -0,0 +1,326 @@
# web前端javascript综合水平测试
## 填空
1. javascript 由 ECMAscriptDOM BOM ,三部分组成,简单介绍一下这三部分
ECMAscript :javascript 的核心描述了js基本语法和数据类型是一套 标准
DOM: 文档对象模型dom通过节点树来创建文档使开发者对文档节点控制力提高
BOM: 对浏览器窗口的访问和操作
2. 检测数据类型的方式有 typeof instanceof Object.prototype.toString.call() 三种方式什么区别
区别typeof 可以对JS基本数据类型做出准确的判断除了null而对于引用类型返回的基本上都是objec
instanceof判断对象和构造函数在原型链上是否有联系如果有返回true 没有返回false
toString是Object原型对象上的一个方法该方法默认返回其调用者的具体类型更严格的讲是 toString运行时this指向的对象类型, 返回的类型
格式为[object xxx],xxx是具体的数据类型
3. 检测NaN的数据类型结果为 number
4. js中 对象转json的方法为 JSON.stringfy() json格式转对象的方法为 JSON.parse()
5. js 浏览器对象模型包括 window location navigator history screen ,五部份 分别介绍一下这5部分
window 全局作用域
location 对窗口url的信息
navigator 提供浏览器信息
history 提供历史访问记录
screen 用户显示器相关信息
6. var a=1;console.log(a++) 运行的结果为: 1
7. js运算符的优先级 从高到低为: () > .,[] 函数调用() > 后置递增a++后置递减a-->逻辑非 ! + - 前置递增(++a) 前置递减(--a) typeof > * / % > - + > 小于 (<) 小于等于(<=) 大于(>) 大于等于(>=) in instanceof >等于(==) 非等于(!=) 全等(= = =) 非全等(!= =>&& || >?: >赋值相关>
8. js设置属性和属性值的方法为 setattribute()
9. 五大主流浏览器及内核
1、IE浏览器内核Trident内核也是俗称的IE内核
2、Chrome浏览器内核统称为Chromium内核或Chrome内核以前是Webkit内核现在是Blink内核
3、Firefox浏览器内核Gecko内核俗称Firefox内核
4、Safari浏览器内核Webkit内核
5、Opera浏览器内核最初是自己的Presto内核后来是Webkit现在是Blink内核
10. jq ajax基本结构及解释
$.ajax({
url:"" 请求地址
type:"" 请求方式
datatype:"" 后台返回的数据格式
success 回调函数
})
11. 本地缓存的增删改查
localstorage.setitem()
localstorage.getitem()
localstorage.clear()
localstorage.removeitem()
12. jq选择器列举
```
$("#id") $(".class") $("标签") $([属性]) $(A,B) ...
```
## 指出下面代码运行结果并分析其执行过程
1 .
```
function a(n) {
if (n <= 1) {
return 1
} else {
return n * a(n - 1)
}
}
console.log(a(5))
var cheng=a
a=null
console.log(cheng(5))
```
报错 cheng is not a function
a是个递归函数 cheng 等于a 执行到内部的时候会调用a(5-1) 但是这时候a 已经被赋值成null了
2
```
function C1(name) {
if (name) {
this.name = name;
}
}
function C2(name) {
this.name = name;
}
function C3(name) {
this.name = name || 'join';
}
C1.prototype.name = 'Tom';
C2.prototype.name = 'Tom';
C3.prototype.name = 'Tom';
alert((new C1().name) + (new C2().name) + (new C3().name));
```
Tomundefinedjoin
new c1 this指向 c1的实例对象没有传参就不执行 this.name的赋值 所以 取name的时候要从原型中取 即tom
c2 new的时候传得值为空 但是没有判断过直接赋值 所以 c2函数中的 this.name 就直接被赋值成了 undefined
c3函数中赋值的时候 判断了name参数是否为空 如果为空的话就赋成默认值 join
3
```
function fn()
{
this.user = '追梦子';
var obj={user:"momo"}
return {};
}
var a = new fn;
console.log(a.user);
```
undefined
new fn 的时候生成 的实例是fn的返回值 也就是{} 空对象
从空对象中找不到 a.user的值
4
```
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call();
changeColor.call(window);
changeColor.call(document);
changeColor.call(this);
changeColor.call(s1);
```
red
red
yellow
red
blue
call() 不加参数的时候 this指向window其他的参数是谁就指向谁
## 简答题
1. 说明call,apply,bind 的区别
bind 不会立即调用 而是返回一个新函数
call/apply 会立即调用 返回的是函数调用后的结果
call 传参数的时候 函数需要的参数可以一个一个传
apply 函数需要的参数只能写成类数组的形式 [a,b,c]
2. js的typeof的返回值有哪些
number, boolean, string, undefined, object, function,symbol.
3. 说出数组相关的几个方法并说明作用
push() 向数组最后面添加一个元素
pop() 删除数组最后面的元素 并返回这个被删除的值
shift() 删除第一个元素
unshift() 向数组开头添加一个元素
...
4. ajax请求时的get、post的区别
AJAX GET和POST的区别
**ajax** 请求的时候**get 和post** 方式的**区别**? **GET**请求会将参数跟在URL后进行传递而**POST**请求则是作为HTTP消息的实体内容发送给WEB服务器。 **GET**请求有数据长度限制,而**POST**没有。 **GET**方式请求的数据会被浏览器缓存起来,**POST**没有
5. 如何阻止浏览器的默认事件
```
event.preventDefault()
或 return false
```
6. 如何阻止事件冒泡
```
event.preventDefault()
或return false
```
7. == 和===的区别
== 只比较数值大小 不比较数据类型 会发生隐式类型转换
=== 不发生类型转换 会比较数据类型
8. 局部变量和全局变量的区别
全局变量是整个程序都可访问的变量,生存期从程序开始到程序结束;局部变量存在于模块中(比如某个函数),只有在模块中才可以访问,生存期从模块开始到模块结束。
全局变量分配在全局数据段,在程序开始运行的时候被加载。局部变量则分配在程序的堆栈中。因此,操作系统和编译器可以通过内存分配的位置来知道来区分全局变量和局部变量。
## 通过代码实现下面要求(略)
1. 通过原型链实现对象继承
2. js手动实现 jq的链式操作
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算
4. 实现一个打点计时器,要求
1、从 start 到 end包含 start 和 end每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1start 和end为用户输入
2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
5. 在页面上将下面的json数据需要放到表格里
json数据为
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
注: title对应文章标题auth 对应的是作者 contnet对应的是简介 date对应的是日期
6. 实现 fizzBuzz 函数,参数 num 与返回值的关系如下:
1、如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz
2、如果 num 能被 3 整除,返回字符串 fizz
3、如果 num 能被 5 整除,返回字符串 buzz
4、如果参数为空或者不是 Number 类型,返回 false
5、其余情况返回参数 num

View File

@@ -0,0 +1,251 @@
# 考试题目
## 填空
1. js变量类型一共有 2 种,分别是哪些
原始值和引用值
原始值 number string boolean undefined nll
引用值 object
3. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5
4. 1 + 1 的运算结果是 11
5. 0 || 3 的返回结果是 3
6. 1 && 5 的返回结果是 5
7. 三种数据类型检测的方法 typeof instanceof **Object.prototype.toString.call**
## 简答
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和 最后把数组元素的总和写在页面上。
var arr=[1,2,4,8,32]
var sum=0
for(let i in arr){
sum+=arr[i]
}
document.write(sum)
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加) 并返回总和
function add(e){
var sum=0
for(let i=1;i<=e;i++){
sum+=i
}
return sum
}
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
function panduan(e){
if(e%2){
return 0
}else{
return 1
}
}
4. 有下面一段代码 请写出答案
```javascript
let obg = {
name:"啦啦啦",
age:18
}
function func(o){
o.name = 123
}
func(obg)
```
执行完之后obg的值是什么 为什么
{name:123,age:18}
func(obg) 把obg 当作参数传了进去 然后 从函数体内 修改了obj里name的值为123
然后 重新输出obg时 name 就变成123了
5. 有下面一段代码 请写出答案
```javascript
let n = "喵喵喵"
window.n = "汪汪汪"
let obg = {
n:"啦啦啦",
echo: ()=> {
return this.n;
}
}
let jieguo = obg.echo()
```
请问变量 jieguo 的值是什么,为什么
汪汪汪
箭头函数内部没有this 他的this会指向外面一层的对象所以会从window 里取n的值 即汪汪汪
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
function miao(name){
this.name=name
this.echo=function(){
return this.name
}
}
var mao=new Miao('本猫咪')
7. 分析下面代码的预编译过程
```
var shopname='解忧杂货店';
var auth="东野圭吾"
function echo(pri){
var say=function(){console.log("welcome")}
age=40
function end(){
console.log('欢迎下次光临')
}
}
echo("0.0")
```
go:
1.{
shopname:undefined
auth:undefined
age:undefined
echo:undefined
}
2.{
shopname:"解忧杂货店"
auth:"东野圭吾"
age:40,
echo:undefined
}
3.{
shopname:"解忧杂货店"
auth:"东野圭吾"
age:40,
echo:function
}
AO:
1.{
pri:undefined
say:undefined
end:undefined
}
2.{
pri:0.0,
say:function(){},
end:undefined
}
3.
{
pri:0.0,
say:function(){},
end:function(){},
}