位置: IT常识 - 正文

《Web应用开发》(头歌)(《web应用开发》是什么)

编辑：rootadmin

《Web应用开发》(头歌) 这里写目录标题实验一 HTML基础HTML——表单类的标签第1关表单元素——文本框第2关表单元素——密码框第3关表单元素——单选框第4关表单元素——多选框第5关表单元素——checked属性第6关表单元素——disabled 属性第7关表单元素——label 标签第8关表单元素——下拉列表第9关表单元素——文本域第10关表单元素——提交按钮第11关表单元素的综合案例HTML入门——基础第1关初识HTML：简单的Hello World网页制作第2关 HTML结构：自我简介网页HTML入门——文本第1关 HTML链接：带超链接的网页第2关 HTML标题与段落：网络文章网页第3关 HTML表格：日常消费账单表格展示网页HTML——基本标签第1关创建第一个 HTML 标签第2关创建 h2-h6 标签第3关创建 p 标签第4关创建 a 标签第5关创建 img 标签第6关创建 div 标签实验二 css入门使用 HTML/CSS 实现 Educoder 顶部导航栏第1关使用flex布局实现Educoder顶部导航栏容器布局第2关使用flex布局实现Educoder顶部导航栏容器布局第3关实现右侧功能图标排序第4关实现左侧鼠标悬停效果与选中状态CSS从入门到精通——文本与字体样式第1关字体颜色、类型与大小第2关字体粗细与风格第3关文本装饰与文本布局CSS从入门到精通——背景样式第1关背景颜色第2关背景图片第3关背景定位与背景关联CSS从入门到精通——基础选择器第1关 css元素选择器第2关 css类选择器第3关 css id选择器实验三 JavaScript基础JavaScript学习手册十一：JSON第1关 JSON对象第2关 JSON数组第3关 JSON字符串JavaScript学习手册十四：HTML DOM——文档元素的操作（二）第1关创建节点第2关插入节点第3关删除节点第4关替换节点第5关综合练习JavaScript学习手册十三：HTML DOM——文档元素的操作（一）第1关通过id获取文档元素第2关通过类名获取文档元素第3关通过标签名获取文档元素第4关 html5中获取元素的方法一第5关 html5中获取元素的方法二第6关节点树上的操作第7关属性值的获取第8关属性值的设置JavaScript学习手册十六：浏览器对象模型第1关第2关第3关第4关第5关JavaScript学习手册八：JS函数第1关用函数语句定义函数第2关用函数语句定义函数第3关函数的调用第4关未定义的实参第5关实参对象第6关对象作为参数第7关对象作为参数JavaScript学习手册十一：JSON第1关用函数语句定义函数实验一 HTML基础HTML——表单类的标签第1关表单元素——文本框<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  昵称：<input type="text" name="nickName"/> </body></html>第2关表单元素——密码框<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  密码：<input type="password" name="check" value="123"/> </body></html>第3关表单元素——单选框<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> 1. HTML是什么语言？(单选题)<br>  <p><input type="radio" name="question"/>A：高级文本语言<p> <input type="radio" name="question"/>B：超文本标记语言<p> <input type="radio" name="question"/>C：扩展标记语言<p> <input type="radio" name="question"/>D：图形化标记语言 </body></html>第4关表单元素——多选框<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> 休闲方式:<br>  <p><input type="checkbox" name="relax"/>逛街<p> <input type="checkbox" name="relax"/>看电影<p> <input type="checkbox" name="relax"/>宅 </body></html>第5关表单元素——checked属性<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> 婚姻状况:<br>  <p><input type="radio" name="marry" checked="checked"/>未婚 <p><input type="radio" name="marry"/>已婚 </body></html>第6关表单元素——disabled 属性<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> 难度系数:<br>  <p><input type="radio" name="degree"/>简单 <p><input type="radio" name="degree"/>中等 <p><input type="radio" name="degree" disabled="disabled"/>困难 </body></html>第7关表单元素——label 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  <label for="user">用户：</label><input type="text" id="user" name="user"/><br> <label for="pwd">密码：</label><input type="password" id="pwd" name="password"/><br> </body></html>第8关表单元素——下拉列表<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> 选择版块：  <select> <option>问答</option> <option>分享</option> <option>招聘</option> <option selected="selected">客户端测试</option></body></html>第9关表单元素——文本域<!DOCTYPE html><html><head> <meta charset="UTF-8">  <style> textarea { width:200px; height:120px; } </style></head><body> 用一句话描述自己的特点：<textarea maxlength="15"></textarea> </body></html>第10关表单元素——提交按钮<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <label for="user">用户：</label><input type="text" id="user" name="user"/><br> <label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>  <input type="submit" value="submit"/> </body></html>第11关表单元素的综合案例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> .container{ width: 40%; margin: 20px auto; } .common{ width:230px; height: 30px; } span{ display:inline-block; width: 150px; text-align: right; } div{ margin-bottom: 10px; } </style></head><body> <form class="container">  <div> <span>用户名：</span> <input type="text" class="common"/> </div><div> <span>昵称：</span> <input type="text" class="common"/> </div><div> <span>性别：</span> <label for="male"> <input type="radio" id="male" name="sex"/>男 </label> <label for="female"> <input type="radio" id="female"name="sex"/>女 </label> <label for="other"> <input type="radio" id="other" name="sex" disabled="disabled"/>保密 </lable></div><div> <span>教育程度：</span> <select class="common"> <option>高中</option> <option>中专</option> <option>大专</option> <option selected="selected">本科</option> <option>硕士</option> <option>博士</option> <option>其他</option> </select></div><div> <span>婚姻状况：</span> <label for="single" name="state"> <input type="radio" checked="checked" id="single"/>未婚 </label> <label for="married" name="state"> <input type="radio" id="married"/>已婚 </label> <label for="secret" name="state"> <input type="radio" id="secret"/>保密 </label></div> <div> <span>兴趣爱好：</span> <label for="football" name="hobby"> <input type="checkbox" id="football"/>踢足球 </label> <label for="basketball" name="hobby"> <input type="checkbox" id="basketball"/>打篮球 </label> <label for="film"> <input type="checkbox" id="film" checked="checked" name="hobby"/>看电影 </label> </div><div> <span>描述自己的特点：</span> <textarea maxlength="20" class="common"></textarea></div><div > <span></span> <input type="submit" value="提交" class="common"/> </div></form></body></html>HTML入门——基础第1关初识HTML：简单的Hello World网页制作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello world</title> </head>  <body bgcolor="F6F3D6">  <h1 align="center">Hello World</h1> <p align ="center">动手改变世界</p> </body> </html>第2关 HTML结构：自我简介网页<!DOCTYPE html><html>  <head> <meta charset="utf-8"> <title>自我简介</title> <meta name="description" content="XXX的自我简介网站"> <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三"> </head> <body> <h1 align="center">自我简介</h1> <h2>简介</h2> <p>在这里简单的描述一下你自己吧。</p> <h2>三个与你最有关的词</h2> <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p> <ul> <li>坚强</li> <p>在心理和身体极度糟糕的情况下坚持了下来</p> <li>乐观</li> <p>以前比较乐观，不管发生了什么，都能够快速找回状态</p> <li>阳光</li> <p>我希望我自己能快乐并且别人带来快乐</p> </ul></body> </html>HTML入门——文本第1关 HTML链接：带超链接的网页<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML链接</title> <meta name="description" content="HTML链接知识讲解"> <meta name="keywords" content="HTML, Link"></head> <body> <h1>HTML 入门</h1> <h2>本页目录</h2> <ul> <li><a href="#toc1">简介</a></li> <li><a href="#toc2">第1关</a></li> <li><a href="#toc3">第2关</a></li> </ul> <h2 id="toc1">简介</h2> <p> <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在 <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和 <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p> <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p> <h2 id="toc2">第1关</h2> <p>初识HTML：简单的Hello World网页</p> <h2 id="toc3">第2关</h2> <p>HTML链接：带超链接的网页</p> <hr> <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p> <p><a href="#">回到顶部</a></p></body> </html>第2关 HTML标题与段落：网络文章网页<!DOCTYPE html><head> <meta charset="UTF-8" /> <title>HTML – 维基百科</title></head> <body> <h1>HTML</h1> <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的 <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。 </p> <h2>历史</h2> <h3>开发过程</h3> <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>， <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。 </p> <h3>HTML里程碑</h3> <dl> <dt>1995年11月24日</dt> <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd> <dt>1997年1月14日</dt> <dd>HTML 3.2以 <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank"> <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。随后的HTML标准都由W3C组织发布。</dd> <dt>1997年12月18日</dt> <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd> <dt>2014年10月28日</dt> <dd>HTML5 发布。</dd> <dt>2016年11月1日</dt> <dd>HTML 5.1发布。</dd> </dl> <h2>参考文献</h2> <ol> <small> <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li> <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li> <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li> </small> </ol></body> </html>第3关 HTML表格：日常消费账单表格展示网页<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML表格</title> <meta name="description" content="HTML表格知识讲解"> <meta name="keywords" content="HTML,表格, Table"> <style type="text/css"> table { border-collapse: collapse; } caption { font-weight: bold; margin-bottom: .5em; } th, td { padding: .5em .75em; border: 1px solid #000; } tfoot { font-weight: bold; } </style></head><body> <table border="1" style="margin:auto" width="400"> <caption>日常消费账单</caption> <thead>  <tr> <th align="left" scope="col">消费项目</th> <th align="right" scope="col">一月</th> <th align="right" scope="col">二月</th> </tr> </thead> <tbody>  <tr> <th align="left" scope="row">食品烟酒</th> <td align="right">￥1241.00</td> <td align="right">￥1250.00</td> </tr> <tr> <th align="left" scope="row">衣物</th> <td align="right">￥330.00</td> <td align="right">￥594.00</td> </tr> <tr> <th align="left" scope="row">居住</th> <td align="right">￥2100</td> <td align="right">￥2100</td> </tr> <tr> <th align="left" scope="row">生活用品及服务</th> <td align="right">￥700.00</td> <td align="right">￥650.00</td> </tr> <tr> <th align="left" scope="row">医疗保健</th> <td align="right">￥150.00</td> <td align="right">￥50.00</td> </tr> <tr> <th align="left" scope="row">教育、文化和娱乐</th> <td align="right">￥1030.00</td> <td align="right">￥1250.00</td> </tr> <tr> <th align="left" scope="row">交通和通信</th> <td align="right">￥230.00</td> <td align="right">￥650.00</td> </tr> <tr> <th align="left" scope="row">其他用品和服务</th> <td align="right">￥130.40</td> <td align="right">￥150.00</td> </tr> </tbody> <tfoot>  <tr> <th align="left" scope="row">总计</th> <th align="right">￥5911</th> <th align="right">￥6694</th> </tr> </tfoot> </table></body> </html>HTML——基本标签第1关创建第一个 HTML 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <h1>Hello</h1>  <h1>welcome to Educoder</h1> </body></html>第2关创建 h2-h6 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <h1>创建不同字体大小的标题</h1>  <h1>创建不同字体大小的标题</h1> <h2>创建不同字体大小的标题</h2> <h3>创建不同字体大小的标题</h3> <h4>创建不同字体大小的标题</h4> <h5>创建不同字体大小的标题</h5> <h6>创建不同字体大小的标题</h6> </body></html>第3关创建 p 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  <p>我是一个段落</p> </body></html>第4关创建 a 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  <a href="https://www.educoder.net">Educoder平台</a> </body></html>第5关创建 img 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body>  <img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/> </body></html>第6关创建 div 标签<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <h2>我是h2标签</h2> <p>我是p标签</p>  <div>我是div标签</div> </body></html>实验二 css入门使用 HTML/CSS 实现 Educoder 顶部导航栏第1关使用flex布局实现Educoder顶部导航栏容器布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Educoder</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="step1/verify.js"></script></head><style type="text/css"> body { padding: 0; margin: 0; } .color-white { color: white; } /*********** Begin ************/ .container{ display:flex; justify-content: space-between; height:60px; } /*********** End ************/</style><body><div class="container"> <header style="background-color:#24292D;min-width:1200px;"> <div class="left-wrap color-white">左边容器</div> <div class="right-wrap color-white">右边容器</div> </header></div></body></html>第2关使用flex布局实现Educoder顶部导航栏容器布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Educoder</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="step2/verify.js"></script></head><style type="text/css"> body { padding: 0; margin: 0; } .container { min-width: 1200px; } .flex { display: flex; } header { background: #24292D; height: 60px; justify-content: space-between; padding: 0 25px; } header > div { height: 100%; display: flex; align-items: center; } /*********** Begin ************/ .logo-block{ display: flex; align-items: center; justify-content: center; } .logo { width: 40px; height: 38px; margin-right: 30px; } .menu-item { color: #ffffff; font-size: 16px; width: 64px; height: 100%; display: flex; align-items: center; margin-right: 30px; position: relative; } .hot{ position: absolute; top: 10px; right: -22px; } /*********** End ************/</style><body><div class="container"> <header class="flex"> <div class="left-wrap">  <div class="logo-block"> <img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo"> </div> <div class="menu-block full-height flex"> <div class="menu-item"><span>实践课程</span></div> <div class="menu-item"><span>翻转课堂</span></div> <div class="menu-item"><span>实训项目</span></div> <div class="menu-item"><span>在线竞赛<img class="hot" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682315694-990685f216439cd.png"></span></div> <div class="menu-item"><span>教学案例</span></div> <div class="menu-item"><span>交流问答</span></div> </div>  </div> <div class="right-wrap"> </div> </header></div></body></html> 第3关实现右侧功能图标排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Educoder</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="step3/verify.js"></script></head><style type="text/css"> body { padding: 0; margin: 0; } .container { min-width: 1200px; } .flex { display: flex; } .full-height{ height: 100%; } header { background: #24292D; height: 60px; justify-content: space-between; padding: 0 25px; } header > div { height: 100%; display: flex; align-items: center; } .logo-block{ display: flex; align-items: center; justify-content: center; } .logo { width: 40px; height: 38px; margin-right: 30px; } .menu-item { color: #ffffff; font-size: 16px; width: 64px; height: 100%; display: flex; align-items: center; margin-right: 30px; position: relative; } .hot{ position: absolute; top: 10px; right: -22px; } /*********** Begin ************/ .icon-item{ height: 100%; width: 48px; display: flex; align-items: center; justify-content: center; } .user{ width: 34px; height: 34px; margin-left: 15px; } /*********** End ************/</style><body><div class="container"> <header class="flex"> <div class="left-wrap"> <div class="logo-block"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682315702-990685f216439cd.png?1526520218" class="logo"> </div> <div class="menu-block full-height flex"> <div class="menu-item"><span>实践课程</span></div> <div class="menu-item"><span>翻转课堂</span></div> <div class="menu-item"><span>实训项目</span></div> <div class="menu-item"><span>在线竞赛<img class="hot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC"></span></div> <div class="menu-item"><span>教学案例</span></div> <div class="menu-item"><span>交流问答</span></div> </div> </div> <div class="right-wrap">  <div class="icon-list full-height flex"> <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411643" alt=""></div> <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411644" alt=""></div> <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411645" alt=""></div> </div> <img class="user" src="https://data.educoder.net/images/avatars/User/b?t=1569204859650" alt="">  </div> </header></div></body></html>第4关实现左侧鼠标悬停效果与选中状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Educoder</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="step4/verify.js"></script></head><style type="text/css"> body { padding: 0; margin: 0; } .container { min-width: 1200px; } .flex { display: flex; } .full-height { height: 100%; } header { background: #24292D; height: 60px; justify-content: space-between; padding: 0 25px; } header > div { height: 100%; display: flex; align-items: center; } .logo-block { display: flex; align-items: center; justify-content: center; } .logo { width: 40px; height: 38px; margin-right: 30px; } .menu-item { color: #ffffff; font-size: 16px; width: 64px; height: 100%; display: flex; align-items: center; margin-right: 30px; position: relative; cursor: pointer; } .hot { position: absolute; top: 10px; right: -22px; } .icon-item { height: 100%; width: 48px; display: flex; align-items: center; cursor: pointer; justify-content: center; } .user { width: 34px; height: 34px; margin-left: 15px; cursor: pointer; } /*********** Begin ************/ .menu-item:hover { opacity: .7; } .active { position: relative; color: #459be5; } .active:after { position: absolute; content: ' '; width: 14px; height: 2px; background: #459be5; bottom: -10px; left: 0; } /*********** End ************/</style><body><div class="container"> <header class="flex"> <div class="left-wrap"> <div class="logo-block"> <img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682315702-990685f216439cd.png?1526520218" class="logo"> </div> <div class="menu-block full-height flex"> <div class="menu-item"><span class="active">实践课程</span></div> <div class="menu-item"><span>翻转课堂</span></div> <div class="menu-item"><span>实训项目</span></div> <div class="menu-item"><span>在线竞赛<img class="hot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC"></span> </div> <div class="menu-item"><span>教学案例</span></div> <div class="menu-item"><span>交流问答</span></div> </div> </div> <div class="right-wrap"> <div class="icon-list full-height flex"> <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div> <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div> <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div> </div> <img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt=""> </div> </header></div></body></html>CSS从入门到精通——文本与字体样式第1关字体颜色、类型与大小body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto;}h1,h2 { /* ********** BEGIN ***********/ font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** END ***********/}h1 { /* ********** BEGIN ***********/ font-size:2.1875em; /* ********** END ************/}h2 { background-color: #eaebef; /* ********** BEGIN ***********/ font-size:1.75em; color:#7d717c; /* ********** END ************/}h3 { background-color: white; /* ********** BEGIN ***********/ font-size:1.25em; color:green; /* ********** END ************/ padding-left: 10px;}hr { height: 1px; border: none; border-top: 2px dashed #88b2d2;}footer { margin: 10px auto;}/* CONTENT----------------------------------- */.architect { background-color: #fff; padding: 1.5em 1.75em;}/* :::: Intro ::::: */.intro { background-color: #888888; /* ********** BEGIN ***********/ color:#fefefe; /* ********** END ************/ padding: 1px 1.875em .7em;}.intro .subhead { /* ********** BEGIN ***********/ font-size:1.125em; /* ********** END ************/}.intro p { font-size: 1.0625em;}/* :::: chapter Descriptions ::::: */.chapter p { font-size: .9375em;}img { border-radius: 8px;}/* :::: Links :::: */a:link { color: #e10000;}a:visited { color: #b44f4f;}a:hover { color: #f00;}.intro a { color: #fdb09d;}.intro a:hover { color: #fec4b6;}第2关字体粗细与风格body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto;}h1,h2 { /* 设置h1, h2 的font-family*/ font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** BEGIN ***********/font-weight:normal; /* ********** END ***********/}h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */}h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */}h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px;}hr { height: 1px; border: none; border-top: 2px dashed #88b2d2;}/* 子选择器 */em,a:link,.intro .subhead { font-weight: bold;}footer { /* ********** BEGIN ***********/font-weight:light;font-style:italic; /* ********** END ***********/ margin: 10px auto;}footer a { font-style: normal;}/* CONTENT----------------------------------- */.architect { background-color: #fff; padding: 1.5em 1.75em;}/* :::: Intro ::::: */.intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em;}.intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */ font-size: 1.125em;}.intro p { font-size: 1.0625em;}/* :::: chapter Descriptions ::::: */.chapter p { font-size: .9375em;}img { border-radius: 8px;}/* :::: Links :::: */a:link { /* 设置 a:link 元素的字体颜色为 #b44f4f */ color: #e10000;}a:visited { color: #b44f4f;}a:hover { color: #f00;}.intro a { color: #fdb09d;}.intro a:hover { color: #fec4b6;}第3关文本装饰与文本布局body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto;}h1,h2 { font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; font-weight: normal; /*********** BEGIN ***********/ text-align:center; /************ END ************/}h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */}h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */}h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px; /*********** BEGIN ***********/ text-align:left; /************ END ************/}p { text-align: justify;}hr { height: 1px; border: none; border-top: 2px dashed #88b2d2;}/* 子选择器 */em,a:link,.intro .subhead { font-weight: bold;}footer { font-weight: light; font-style: italic; /* ********** BEGIN ***********/ text-align:center; /* ********** END ***********/ margin: 10px auto;}footer a { font-style: normal;}/* CONTENT----------------------------------- */.architect { background-color: #fff; padding: 1.5em 1.75em;}/* :::: Intro ::::: */.intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em;}.intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */ font-size: 1.125em; text-align: center;}.intro p { font-size: 1.0625em;}/* :::: chapter Descriptions ::::: */.chapter p { font-size: .9375em;}.photos { /*********** BEGIN ***********/ text-align:center; /*********** END *************/}img { border-radius: 8px;}/* :::: Links :::: *//* 默认显示样式 */a:link { color: #e10000; /*********** BEGIN ***********/ text-decoration: none; /*********** END *************/}a:visited { color: #b44f4f;}/* 鼠标放在上面的显示样式 */a:hover { color: #f00; /*********** BEGIN ***********/ text-decoration:underline; /*********** END *************/}.intro a { color: #fdb09d;}.intro a:hover { color: #fec4b6;}CSS从入门到精通——背景样式第1关背景颜色/* ********** BEGIN ********** */body{ background-color:ivory;}/* ********** END ********** */h1 { font-size: 40px; text-align: center;}p { font-size: 18px; color: grey; /* ********** BEGIN ********** */ background-color:lightblue; /* ********** END ********** */}第2关背景图片body { /* ********** BEGIN ********** */ /*设置背景图片*/ background-image:url("https://www.educoder.net/attachments/download/211106"); /* ********** END ********** */}div { width: 90%; height: 100%; margin: auto;}第3关背景定位与背景关联 body { margin-right: 200px; /* ********** BEGIN ********** */ /*设置背景图片*/ background:url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top; /* ********** END ********** */ } div { width: 90%; height: 100%; margin: auto; }CSS从入门到精通——基础选择器第1关 css元素选择器<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>元素选择器</title> <style type="text/css"> /* ********** BEGIN ********** */ /* 元素选择器 */ html { background-color:#F0F0F0; } header{ padding:40px; background-color:white; } footer { margin-top: 20px; font-size:0.6 em; color:grey; } /* ********** END ********** */ </style></head><body><div> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div> <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>第2关 css类选择器<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; }/* ********** BEGIN ********** */ .newsSection{ margin-top:20px; padding:20px; background-color:white; } /* ********** END ********** */ </style></head><body><div class="main"> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header>  <div class="newsSection">  <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>第3关 css id选择器<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ID选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } .newsSection { margin-top: 20px; padding: 20px; background-color: white; } /* ********** BEIGN ********** */ #chosen{ color:red; } #news{ color:blue; } #finance{ color:olive; } #think{ color:green; } #life{ color:orange; } /*选择menu元素下的li子元素*/ #menu li { float: left; width: 70px; font-size: 1.2em; font-weight: lighter; } /*选择menu元素下的li子元素和li下得a子元素*/ #menu li, li a { list-style: none; text-decoration: none; } /* ********** END ********** */ </style></head><body><div class="main">  <header id="menu">  <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div class="newsSection"> <section> <h2 id="chosen">精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2 id="news">时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2 id="finance">财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2 id="think">思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2 id="life">生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>实验三 JavaScript基础JavaScript学习手册十一：JSON第1关 JSON对象function mainJs(a,b,c) {//请在此处编写代码/********** Begin **********/ var JSONObject = {"key1":"a","key2":'b',"key3":'c'}; delete JSONObject.key3;for(att in JSONObject) { console.log(JSONObject[att]);} return a+","+b;/********** End **********/}第2关 JSON数组var myJson = { "category":"computer", "detail":"programming", "language":[ "js","java","php","python","c" ]}function mainJs(a) { a = parseInt(a);//请在此处编写代码/********** Begin **********/ var result = ""; for(var i = 0;i < a;i++) { result = result+myJson.language[i]+","; } return result.slice(0,-1); /********** End **********/}第3关 JSON字符串var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {//请在此处编写代码/********** Begin **********/ var JSONObject = JSON.parse(JSONString); JSONObject.key1 = a; return JSON.stringify(JSONObject); /********** End **********/}JavaScript学习手册十四：HTML DOM——文档元素的操作（二）第1关创建节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p></p> <script>   var newNode = document.createElement('form'); newNode.method='post'; newNode.id='myForm'; document.body.appendChild(newNode); console.log(newNode.method); </script></body></html>第2关插入节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ul id="ul1"> <li>America</li> <li>Mexio</li> </ul> <script>   var node = document.getElementById('ul1'); var newNode = document.createElement('li'); newNode.innerText='Canada'; node.appendChild(newNode);  var out = document.getElementsByTagName("li")[2]; console.log(out.innerText); </script></body></html>第3关删除节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ol id="browser"> <li id="chrome">Chrome</li> <li id="firefox">Firefox</li> <li id="opera">Opera</li> <li id="safari">Safari</li> </ol> <script>   var parent = document.getElementById("browser"); var child = document.getElementById("opera"); parent.removeChild(child);  </script></body></html>第4关替换节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <ol id="parent"> <a id="old" href="https://www.google.com">Google</a> </ol> <script> var newChild = document.createElement("a"); newChild.innerText = "eduCoder"; newChild.href = "https://www.educoder.net";   var parent = document.getElementById("parent"); var old = document.getElementById("old"); parent.replaceChild(newChild,old);  </script></body></html>第5关综合练习<html><head><title>myTitle</title><meta charset="utf-8" /></head><body><select id="province" onChange="changeCity()"><option value="BeiJing" id="bj">北京</option> <option value="AnHui" id="ah">安徽</option></select><select id="city"> <option value="BeiJingCity">北京市</option></select><script>function changeCity() { var province = document.getElementById("province"); var city = document.getElementById("city"); var length = city.children.length; for(var i = length-1;i >= 0;i--) { city.removeChild(city.children[i]); } if(province.value == "BeiJing") { var child1 = document.createElement("option"); child1.value="BeiJingCity"; child1.innerText="北京市" city.appendChild(child1); } else { var child1 = document.createElement("option"); child1.value="HuangShanCity"; child1.innerText="黄山市"; city.appendChild(child1); //请在此处编写代码 /*********Begin*********/ var child2 = document.createElement("option"); child2.value="HeFeiCity"; child2.innerText="合肥市"; city.appendChild(child2); /*********End*********/ }}</script></body></html>JavaScript学习手册十三：HTML DOM——文档元素的操作（一）第1关通过id获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by id</title></head><body> <a id="a1" src="https://www.google.com">Google</a> <p id="p1">this is a text</p> <script>   var myElement = document.getElementById("a1");  myElement.href="https://www.educoder.net"; </script></body></html>第2关通过类名获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by name</title></head><body> <img src="" class="myName"/> <form class="myName" id="myForm"></form> <div class="myName">This is quote</div> <p class="myName">This is what you should get</p> <script>   var myElement = document.getElementsByTagName('p')[0];  myElement.innerText="I changed the text"; </script></body></html>第3关通过标签名获取文档元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>get element by id</title></head><body> <div class="diva"> <a href="https://www.educoder.net">EduCoder</a> <a href="https://www.facebook.com">FaceBook</a> </div> <div class="divb"> <a href="https://www.twitter.com">Twitter</a> <form name="myForm"></form> <a href="https://www.nudt.edu.cn">NUDT</a> </div> <p id="pp">this is a text</p><script>  var myElement = document.getElementsByTagName('div')[1].getElementsByTagName('a')[1];  myElement.innerText="nudt";</script></body></html>第4关 html5中获取元素的方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p class="myClass">你需要获得的元素是我</p> <p>是楼上</p> <p>是楼上的楼上</p> <script>   var pElement = document.querySelector(".myClass");  console.log(pElement); </script></body></html>第5关 html5中获取元素的方法二<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p class="pClass">你需要获得的元素是我</p> <p>包括我</p> <p>还有我</p> <script>   var pElement = document.querySelectorAll(".pClass");  console.log(pElement); </script></body></html>第6关节点树上的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><div id="div1"><div class="cl1"><p>文本</p><a>超链接</a></div><div class="cl2"><select><option>红</option><option>黄</option><option>蓝</option></select></div></div> <script> var cl2 = document.getElementById("div1").lastElementChild;   myElement = cl2.firstElementChild.children[1];  myElement.innerText = "绿"; </script></body></html>第7关属性值的获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p id="p"></p> <img class="imgClass"/> <a id="a"></a> <script>   var srcValue = document.getElementsByClassName("imgClass")[0].className;  console.log(srcValue); </script></body></html>第8关属性值的设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p id="p"></p> <form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form> <a id="a"></a> <script>   var myElement = document.getElementById("form1"); myElement.setAttribute("method","post");  console.log(document.getElementById("form1").method); </script></body></html>JavaScript学习手册十六：浏览器对象模型第1关第2关第3关第4关第5关JavaScript学习手册八：JS函数第1关用函数语句定义函数//请在此处编写代码/********** Begin **********/function mainJs(a,b){ return a.concat(b);}/********** End **********/第2关用函数语句定义函数function mainJs(a) { a = parseInt(a);//请在此处编写代码/********** Begin **********/ var myFunc=function sum(a){return a%10+(a-a%10)/10%10+(a-a%100)/100;}/********** End **********/ return myFunc(a);}第3关函数的调用//求最大值的函数function getMax(b,c) { return b>c?b:c;}//求最小值的函数var getMin = function(b,c) { return b>c?c:b;}//对象中的求和函数var myObject = { id:1, name:"function", myFunc:function(b,c) { return b+c; }}function mainJs(a,b,c) { a = parseInt(a); b = parseInt(b); c = parseInt(c);//请在此处编写代码/********** Begin **********/ var t; if(a==1) { t=getMax(b,c); } else if(a==2) { t= getMin(b,c); } else if(a==3) { t=myObject.myFunc(b,c); } return t;/********** End **********/}第4关未定义的实参function mainJs(a,b,c,d) {//请在此处编写代码/********** Begin **********/ if(!a) a="green";if(!b) b="green";if(!c) c="red";if(!d) d="yellow"; return a+"-"+b+"-"+c+"-"+d;/********** End **********/}第5关实参对象//请在此处编写代码/********** Begin **********//********** End **********/function mainJs(a) { a = parseInt(a); switch(a) { case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123); case 2:return getMax(23,21,56,34,89,34,32); case 3:return getMax(23,21,56,34); case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888); case 5:return getMax(); default:break; }}function getMax(){ var alength=arguments.length; if(alength==0) return 0; else{ var max=0; for(var i=0;i<alength;i++){ if(arguments[i]>max) max=arguments[i]; } return max; }}第6关对象作为参数var park = { name:"Leaf Prak", location:"Fifth Avenue", todayTourists:4000};var computer = { name:"Levenon", price:"$800", memory:"8G"};var city = { name:"HangZhou", country:"Chine", population:9400000}function objectFunction(object) {//请在此处编写代码/********** Begin **********/var a=new Array();for(var i=0;i<3;i++){ a[i]=Object.keys(object)[i]+":"+Object.values(object)[i]+",";}return (a.join(""));/********** End **********/}function mainJs(a) { a = parseInt(a); switch(a) { case 1:return objectFunction(park); case 2:return objectFunction(computer); case 3:return objectFunction(city); default:break; }}第7关对象作为参数//求数组中奇数元素的个数function getOddNumber(a) { var result = 0; for(var i = 0;i < a.length;i++) { if(a[i]%2 != 0) result++; } return result;}//求数组中偶数元素的个数function getEvenNumber(a) { var result = 0; for(var i = 0;i < a.length;i++) { if(a[i]%2 == 0) result++; } return result;}function getNumber(func,a) {//请在此处编写代码/********** Begin **********/ return func(a);/********** End **********/}//测试接口function mainJs(b,a) { a = a.split(","); var aLength = a.length; for(var i = 0;i < aLength;i++) { a[i] = parseInt(a[i]); } if(b == "getEvenNumber") { return getNumber(getEvenNumber,a); } else { return getNumber(getOddNumber,a); }}JavaScript学习手册十一：JSON第1关用函数语句定义函数