javascript的实践

1、前言

学习编程，语法本身并不难，真正困难的是如何应用它来解决现实世界的问题。 你要开始像程序员那样思考。一般来讲，这种思考包括了解你程序运行的目的，为达到该目的应选定的代码类型，以及如何使这些代码协同运行。
为达成这一点，我们需要努力编程，获取语法经验，注重实践，再加一点创造力，几项缺一不可。代码写的越多，就会完成的越优秀。虽然我们不能保证你在5分钟内拥有“程序员大脑”，但是整个课程中你将得到大量机会来训练程序员思维

2、javascript概念理解

javascript本质上是通过一系列api实现动态地调整生成html达到效果的；因此，前提要对html的结构：标签、属性了解，同时对常用的api,比如DOM的api了解，api下面的接口对应的属性和方法，使用方式以及功能可通过查阅MDN网站获取，通常有些还会有具体的使用demo。
比如：

"text" id="guessField" class="guessField">  input是标签，type是属性

（1）首先，html元素有哪些标签？

可在这里查看：label元素属性：https://www.runoob.com/tags/tag-label.html

（2）其次，标签对应的属性可以在MDN对应的标签下面查看
例如： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

（3）javascript 有哪些api接口？api接口有哪些属性和方法？
例如：java script DOM的api接口，对应的属性和方法可在这里查看：
document的properties()和methods()，即属性和方法

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.


https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled

The HTMLSelectElement.disabled is a Boolean that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

3、web页面

API (web 或 XML 页面) = DOM + JS (脚本语言)
DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。尽管我们在本参考文档中会专注于使用JavaScript， 但DOM 也可以使用其他的语言来实现， 以Python为例，代码如下：

# Python DOM example
	import xml.dom.minidom as m
	doc = m.parse("C:\\Projects\\Py\\chap1.xml");
	doc.nodeName # DOM property of document object;
	p_list = doc.getElementsByTagName("para");

4、实践代码注释理解

实现业务逻辑梳理：

1. 随机生成一个 100 以内的自然数。
2. 记录玩家当前的轮数。从 1 开始。
3. 为玩家提供一种猜测数字的方法。
4. 一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
5. 然后检查它是否正确。
6. 如果正确：
   显示祝贺消息。
   阻止玩家继续猜测（这会使游戏混乱）。
   显示控件允许玩家重新开始游戏。
7. 如果出错，并且玩家有剩余轮次：
   告诉玩家他们错了。
   允许他们输入另一个猜测。
   轮数加 1。
8. 如果出错，并且玩家没有剩余轮次：
   告诉玩家游戏结束。
   阻止玩家继续猜测（这会使游戏混乱）。
   显示控件允许玩家重新开始游戏。
9. 一旦游戏重启，确保游戏的逻辑和UI完全重置，然后返回步骤1。

具体代码实现方式见代码中注释：

  
    

    

    
  

  
    
猜数字游戏

    
我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。

    
"form">
      "guessField">请猜数："text" id="guessField" class="guessField">
      "submit" value="我猜" class="guessSubmit">
    

    
"resultParas">    // 全局的包含里面所有的标签内容
      
"guesses">
     //没有实际的内容，是靠动态生成的，只有属性class;
      
"lastResult">
      
"lowOrHi">
    

    
  

效果如下：

5、参考

JavaScript 初体验：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash
HTML 标签：https://www.runoob.com/tags/tag-input.html