Head First JavaScript笔记一
下学期选了Web，故想先看看js，之后结合php写一些小demo，无意中在图书馆借到了这本head first，天气很热心很浮躁，虽然对于太基础的东西已经失去耐心，但是一直很喜欢head first，简单易懂，不会“火上浇油”。
驯服大脑的方法（写给这个夏天的我）：
- 慢慢来，理解越多，越不需要强记；
- 勤做练习，写下心得；
- 认真阅读，“没有”蠢的单元；
- 将阅读作为睡前最后一件事，至少是睡前最后一件具有挑战性的活动；
- 喝水，多喝水；
- 念出声音，大声念出来；
- 倾听大脑的声音；
- 用心感受；
- 动手吧！
第一章：交互式网络
1、结构（HTML）、样式（CSS）、行动（Javascript）共同构成网页三大元素；
2、<script>元素可以放在网页的任何地方，但最好放在<head>标签下；
3、例子虽然很简单，但还是贴一下代码吧
<html> <head> <title> iRock - the virtual pet rock </title> <script type="text/javascript"> function touchRock(){ var userName = prompt("What is your name?","Enter your name here."); if(userName){ alert("It is good to meet you, "+ userName+"."); document.getElementById("rockImg").src = "rock_happy.png"; } } </script> </head> <body onload="alert('Hello,I am your per rock.');"> <div style="margin-top:100px; text-align:center"> <img id="rockImg" src="rock.png" alt="iRock" onclick="touchRock();" /> </div> </body> </html>
第二章：存储数据
1、JavaScript使用三种基本数据类型：text、number、boolean
2、javascript关键字var命名新变量如（var pageHits）；，关键字const创建常量如（const TAXRATE = 0.925；）
3、创建常量时务必初始化，未初始化的数据称为未定义的；NaN非数字，isNaN（）确认值是否为数字
4、parseInt（）与parseFloat（）文本转换为数字
5、getElementById（）捕捉表单数据
6、检查“dozen”是否在数据里出现
function parseDonuts(donutString) { numDonuts = parseInt(donutString); if (donutString.indexOf("dozen") != -1) numDonuts *= 12; return numDonuts; }
本章代码：
<html> <head> <title>Duncan's Just-In-Time Donuts</title> <link rel="stylesheet" type="text/css" href="donuts.css" /> <script type="text/javascript"> function updateOrder() { const TAXRATE = 0.0925; const DONUTPRICE = 0.50; var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value); var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value); if (isNaN(numCakeDonuts)) numCakeDonuts = 0; if (isNaN(numGlazedDonuts)) numGlazedDonuts = 0; var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; var tax = subTotal * TAXRATE; var total = subTotal + tax; document.getElementById("subtotal").value = "$" + subTotal.toFixed(2); document.getElementById("tax").value = "$" + tax.toFixed(2); document.getElementById("total").value = "$" + total.toFixed(2); } function parseDonuts(donutString) { numDonuts = parseInt(donutString); if (donutString.indexOf("dozen") != -1) numDonuts *= 12; return numDonuts; } function placeOrder(form) { if (document.getElementById("name").value == "") alert("I'm sorry but you must provide your name before submitting an order."); else if (document.getElementById("pickupminutes").value == "" || isNaN(document.getElementById("pickupminutes").value)) alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order."); else // Submit the order to the server form.submit(); } </script> </head> <body> <div id="frame"> <div class="heading">Duncan's Just-In-Time Donuts</div> <div class="subheading">All donuts 50 cents each, cake or glazed!</div> <div id="left"> <img src="donuttime.png" alt="Just-In-Time Donuts" /> </div> <form name="orderform" action="donuts.php" method="POST"> <div class="field"> Name: <input type="text" id="name" name="name" value="" /> </div> <div class="field"> # of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value="" onchange="updateOrder();" /> </div> <div class="field"> # of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value="" onchange="updateOrder();" /> </div> <div class="field"> Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" /> </div> <div class="field"> Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" /> </div> <div class="field"> Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" /> </div> <div class="field"> Total: <input type="text" id="total" name="total" value="" readonly="readonly" /> </div> <div class="field"> <input type="button" value="Place Order" onclick="placeOrder(this.form);" /> </div> </form> </div> </body> </html>
第三章：探索客户端
1、定时器
setTimeout("document.getElementById('rockImg').src = 'rock.png';", 5 * 60 * 1000);
//设定定时器，欲执行代码+定时的时间/毫秒
var timerID = setInterval("alert('Wake up!');", 6000);
//间隔定时器，欲执行代码+间隔时间
clearInterval(timerID);
//清除定时器
2、location.reload();重新载入网页的函数；
3、得到并设置窗口大小，设定样式style对象
//body.clientHeight取得窗口宽度 function resizeRock() { document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9; }
4、浏览器大小变化时触发onresize事件
<body onload="resizeRock(); greetUser();" onresize="resizeRock();"> //调用多个函数用“；”隔开，onresize();
5、cookie，是浏览器存储在用户计算机里的一块数据；cookie记录名称与数据值，但也有可能过期；
readCookie（）、writeCookie（），eraseCookie（）
function writeCookie(name, value, days) { // By default, there is no expiration so the cookie is temporary var expires = ""; // Specifying a number of days makes the cookie persistent，计算有效日期 if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTString(); } // Set the cookie to the name, value, and expiration date document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { // Find the specified cookie and return its value var searchName = name + "="; var cookies = document.cookie.split(';'); for(var i=0; i < cookies.length; i++) { var c = cookies[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(searchName) == 0) return c.substring(searchName.length, c.length); } return null; } function eraseCookie(name) { // Erase the specified cookie writeCookie(name, "", -1); }
6、if (navigator.cookieEnabled) ；查看客户端是否支持cookie
浙公网安备 33010602011771号