第一章 认识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);}-->
}