Head First HTML5 Programming—每天一小步-(一)

第一章 认识html

html取消了单行注释,并且选取较为复杂的<!--  -->作为唯一的注释符号。

使用Var声明一个javascript变量

<ul> 标签定义无序列表 <q> 用来表示短的引用 <blockquote> 标签定义块引用

数字、布尔值和串是基本类型,布尔值为true和false,数字可以是整数或浮点数

未赋值的变量值为underfined

数值表达式、布尔表达式和串表达式会分别得到一个数、布尔值或串值

要重复执行代码块,可以使用for或while 循环,要结束一个for或while循环,某一个时刻条件测试必须为false

使用javascript检查和修改DOM,可以使你的web页面有交互性

可以使用document.getElementById访问页面中的一个元素,document.getElementById使用一个元素的id在DOM中查找元素,可以使用一个元素的innerHTML属性修改这个元素的内容

如果你想在页面完全加载之前访问或修改元素,会得到一个javascript错误,你的代码将不能正常工作,将一个函数赋值window.onload属性,可以在浏览器完成页面加载之后
运行这个函数的代码

可以使用一个数字开存储多个值,要访问一个数组的一个值,需要使用索引。索引是一个整数,索引是一个整数,指定数组中元素的位置,length属性会告诉你数组中有多个元素

Math是一个javascript库,包含大量与数学相关的函数,Math.random会返回一个介于0和1的浮点数(不能为1),math.floor把一个浮点数小数后面的所以位去除,将它转换为一个整数。

第二章 一点点交互

window.onload = init;
button.οnclick=handleButtonClick;
创建一个新元素
var li= document.createElement("li")
将一个新元素赋至变量li,把希望创建的元素类型作为一个串传入createElement
li.innerHTML=songName;


表单
 <form>
    <input type="text" id="songTestInput" size="40" placeholder="Song name">
<!--一个简单的表单,文本域用来输入你的歌曲,使用placeholder属性,显示一个例子,只是这个输入域要输入的内容-->
    <input type="button" id="addButton" value="Add song">
<!--button用来向播放列表提交你增加的新歌-->
  </form>


此刻点击Add song 没有任何反应,需要两方面的准备:
需要一些Javascript代码,可以在用户点击Add Song 按钮时执行。这个代码将向播放列表增加一首歌
需要一种方法关联这些代码,从而当点击按钮时Javascript知道要运行你的“增加歌曲”代码
按钮就是点击事件


1.建立一个处理程序,用来处理用户点击AddSong按钮
2.编写处理程序,得页面的到用户输入的歌曲名
3.创建一个新元素包含这个新歌
4.把这个元素增加到DOM


1.
 <form>
    <input type="text" id="songTestInput" size="40" placeholder="Song name">
<!--一个简单的表单,文本域用来输入你的歌曲,使用placeholder属性,显示一个例子,只是这个输入域要输入的内容-->
    <input type="button" id="addButton" value="Add song">
<!--button用来向播放列表提交你增加的新歌-->
  </form>


2.
window.οnlοad=init;
function init(){
  var button = document.getElementById("addButton")
  button.οnclick=handleButtonClick;


}
function handleButtonClick(){
 // alert("Button was clicked");
  var textInput=document.getElementById("songTestInput")
  var songName=textInput.value
  if (songName==""){
     alert("Please enter a song")
  }else{
     alert("Adding "+songName);
  } 
}


3.
  var li=document.createElement("li");
  li.innerHTML=songName;
4.
  var ul = document.getElementById("playlist");
  ul.appendChild(li);


1.首先建立一个时间处理程序,用来处理用户点击"AddSong"按钮的时间,你创建了一个函数handleButtonClick
并把"AddSong"按钮的onclick属性设置为这个函数
2.接下来,为按钮点击事件处理程序编写代码,从输入文本域得到歌名,使用input.value属性来得到文本。
甚至还增加了一个检查,确保用户确定数一一首歌,如果没有输入,你需要提醒他们
3.把这首歌添加到播放列表,使用document.createElement创建了一个<li>元素,
并使用innerHTML把这个元素的内容设置为歌名
4.把这个新<li>元素作为<ul>父元素的子元素增加到DOM,这里使用了appendChild,告诉<ul>元素
“追加<li>元素作为一个子元素”,从而把它增加到DOM 


<!doctype html>
<html lang="en">    <!--标准的HTML5首部和体-->
<head>
  <title>Webville Tunes</title>
  <meta charset="utf-8">
  <!--<script src="2.1_playlist_store.js"></script>-->
  <script src="2.1_playlist.js"></script>    <!--把所有的javascript1放在playlist.js文件中-->
  <!--<link rel="stylesheet" href="playlist.css">-->   <!--包含了一个样式表,让这个播放列表应用有一个漂亮的外观-->
</head>
<body>
  <form>
    <input type="text" id="songTestInput" size="40" placeholder="Song name">
    <input type="button" id="addButton" value="Add song">
  </form>
  <ul id="playlist"> <!--使用一个列表存放这个歌曲-->
      
  </ul>
</body>
</html>



2.1_playlist_store.js代码

window.οnlοad=init;
function init(){
  var button = document.getElementById("addButton")
  button.οnclick=handleButtonClick;
  localPlaylist();


}
function handleButtonClick(){
 // alert("Button was clicked");
  var textInput=document.getElementById("songTestInput")
  var songName=textInput.value
  
  var li=document.createElement("li");
  li.innerHTML=songName;
  var ul = document.getElementById("playlist");
  ul.appendChild(li);
  save(songName);
  <!--if (songName==""){alert("Please enter a song")} else{alert("Adding "+songName);}-->


}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值