2016年12月30日星期五

javascript函數陣列

Number(string)；將數值字串轉成純數值領域
parseInt(string)；將數值字串轉成純整數領域
parseFloat(string)；將數值字串轉成福點數領域
String(int)；將數值或整數轉成字串領域

函數內部
宣告單元：變數
輸入單元：1.靜態元件<span><div><a>......
DOM
2.表單元件-- 文字框單選鈕複選鈕下拉式選單被網框
DOM
階層導向
邏輯運算單元
輸出單元 1.html靜態元件
DOM
2. 表單元件-- 文字框單選鈕複選鈕下拉式選單被網框
DOM
階層導向

陣列
直接表示法由資料型態定值
var 陣列名稱=[值1，值2，值3，值4，值5];
var a=[12,23,56,34,69];

var 陣列名稱=new Array(值1，值2，值3，值4，值5);
間接表示法由陣列空間定值
var 陣列名稱=new Array();
var a=new Array();
a[0]=14;
a[1]=54;
a[2]=47;
a[3]=51;
a[4]=68;
var 陣列名稱=[];

var a=["程式","美工","系統","資料庫","繪圖"];
a.length=>陣列長度
a[0]="程式" a[1]="美工" a[2] ="系統" a[3]="資料庫" a[4]= "資料庫"

一維陣列極大值，極小值
1.先令max=0 當參考值 min=陣列第一個元素
2.採用for和if敘述找出最大值，極小值
var a=new Array();
a[0]=14;
a[1]=54;
a[2]=47;
a[3]=51;
a[4]=68;
var max=0;

for (var i=0;i<a.length;i++)
{
if (max<a[i])
{
max=a[i];
}
}
==================================
var a=new Array();
a[0]=14;
a[1]=54;
a[2]=47;
a[3]=51;
a[4]=68;
var min=a[0];

for (var i=0;i<a.length;i++)
{
if (min>a[i])
{
min=a[i];
}
}
==============================================
正排序
逆排序
反轉
對映函數
var a=new Array();
a[0]=6;
a[1]=2;
a[2]=8;
a[3]=7;
a[4]=5;

var result=a.map(function(v,index,array)
{
return v*v
});

document.getElementById("sp").innerHTML=result;
===============================
<table>
<tr><td colspan="4"></td>
</tr>
<tr>
<td colspan="4">
<img src="image/h01.jpg" width="400" height="180" />
</td>
</tr>
<tr align="center">
<td><input type="button" id="bt1" name="bt1" value="第一張" /></td>
<td><input type="button" id="bt2" name="bt2" value="上一張" /></td>
<td><input type="button" id="bt3" name="bt3" value="下一張" /></td>
<td><input type="button" id="bt4" name="bt4" value="最後張" /></td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2016/12/30(2)</title>
<script language="javascript">
var pic=["x10.jpg","x11.jpg","x12.jpg","x13.jpg","x14.jpg","x15.jpg","x16.jpg","x17.jpg","x18.jpg","x19.jpg"];
var picno=pic.length;
var curpno=0;
function fun1() {
curpno=0;
document.getElementById("pic1").src="image/"+pic[curpno];
}
function fun2() {
curpno=curpno+1;
if (curpno > picno-1)
{ curpno = picno-1; alert("已經是末張"); }
else document.getElementById("pic1").src="image/"+pic[curpno]; }
function fun3() {
curpno=curpno-1;
if (curpno < 0)
{ curpno = 0; alert("已經是首張"); }
else document.getElementById("pic1").src="image/"+pic[curpno]; }
function fun4() {
curpno=picno-1;
document.getElementById("pic1").src="image/"+pic[curpno]; }
</script>
</head>

<body>
<center>
<table id="tb2" name="tb2" border="1" width="750">
<tr><td colspan="4" align="center" style="font-size:18px">美麗的圖片</td></tr>
<tr><td colspan="4">
<div>
<img id="pic1" src="image/x10.jpg" width="750" height="450" />
</div>
</td></tr>
<tr>
<td width="25%" align="center">
<input type="button" id="b1" name "b1" value="首  張" style="font-size:18px" onclick="fun1();" />
</td>
<td width="25%" align="center">
<input type="button" id="b2" name "b2" value="下一張" style="font-size:18px" onclick="fun2();" />
</td>
<td width="25%" align="center">
<input type="button" id="b3" name "b3" value="上一張" style="font-size:18px" onclick="fun3();" />
</td>
<td width="25%" align="center">
<input type="button" id="b4" name "b4" value="末  張" style="font-size:18px" onclick="fun4();" /></a>
</td>
</tr>
</table>
</center>
</body>
</html>

===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2016/12/30(2)</title>
<script language="javascript">
var pic=["x10.jpg","x11.jpg","x12.jpg","x13.jpg","x14.jpg","x15.jpg","x16.jpg","x17.jpg","x18.jpg","x19.jpg"];
var picno=pic.length;
var curpno=0; var msg="";
function funA(f) {
switch (f)
{
case 1: {
curpno=0;
break; }
case 2: {
curpno=curpno+1;
if (curpno > picno-1)
{ curpno = picno-1; msg="已經是末張"; }
break; }
case 3: {
curpno=curpno-1;
if (curpno < 0)
{ curpno = 0; msg="已經是首張"; }
break; }
case 4: {
curpno = picno-1;
break; }
default: {
break; }
}
if (msg=="")
document.getElementById("pic1").src="image/"+pic[curpno];
else { alert(msg); msg="";}
}
</script>
</head>

<body>
<center>
<table id="tb2" name="tb2" border="1" width="750">
<tr><td colspan="4" align="center" style="font-size:18px">美麗的圖片</td></tr>
<tr><td colspan="4">
<div>
<img id="pic1" src="image/x10.jpg" width="750" height="450" />
</div>
</td></tr>
<tr>
<td width="25%" align="center">
<input type="button" id="b1" name "b1" value="首  張" style="font-size:18px" onclick="funA(1);" />
</td>
<td width="25%" align="center">
<input type="button" id="b2" name "b2" value="下一張" style="font-size:18px" onclick="funA(2);" />
</td>
<td width="25%" align="center">
<input type="button" id="b3" name "b3" value="上一張" style="font-size:18px" onclick="funA(3);" />
</td>
<td width="25%" align="center">
<input type="button" id="b4" name "b4" value="末  張" style="font-size:18px" onclick="funA(4);" /></a>
</td>
</tr>
</table>
</center>
</body>
</html>

2016年12月28日星期三

javascript介紹

https://www.tutorialspoint.com/index.htm
運算子&& || !
&& 積法功能
|| 加法功能
!反相

document.getElementById("sp1").innerHTML="";
if

switch

2016年12月26日星期一

Jquery 運用

Jquery 功能
1.網頁元件製作
2.動畫
3.表單處理
4.Json,txt,csv,xml資料結構處理
5.Ajax非同步技術與網頁系統權限
6client和server語言互傳訊息
7.路油表線規劃.

選擇器；
$("選擇器")事件方法();
$("#tb1 a img").click(function()
{
var t=$(this).attr("src");
alert(t);
});

給屬性值；
$("選擇器").attr("屬性","屬性值");
$("#resultimg").attr("src",t);
---------------------------------------
<script language="javascript" src="jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#tb1 a img").click(function()
{
var t=$(this).attr("src");
//alert(t);
$("#resultimg").attr("src",t);
});
});
</script>

<body>
<div id="dv1" style="width:800px; height:130px; background-color:#0FF; overflow:scroll" >
<table id="tb1" border="1" width="800">
<tr>
<td ><a href="javascript:void;" >
<img src="image/h01.jpg" width="120" height="100" />
</a>
</td>
<td><a href="javascript:void;" >
<img src="image/h02.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h03.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h04.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h05.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h06.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h07.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h08.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h09.jpg" width="120" height="100" />
</a></td>
<td><a href="javascript:void;" >
<img src="image/h10.jpg" width="120" height="100" />
</a></td>
</tr>
</table>

</div>
<div id="dv2" style=" width:720px; height:550px; background-color:#99F;padding:40px; background-color:#99C; border:solid 5px rgb(0,0,255" >

<img id="resultimg" src="image/h01.jpg" width="720" height="550" " />

</div>
</body>
------------------------------------------------------
javascript
階層取值用 name
<script language="javascript">
function fun1()
{
var name=document.f1.t1.value;
alert("姓名；"+name);
}
</script>

<body>
<form id="f1" name="f1">
<table id="tb1" width="250" rules="none">
<tr>
<td>姓名；
</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
</tr>
<td>
<input type="button" id="bt1" name="bt1" value="確定" onclick="fun1()">
</td>
<td align="right">
<input type="reset" value="清除">
</td>
<tr>
</tr>
</table>
</form>

</body>
--------
javascri[pt 運算子
1.算術運算子
2.關係運算子
3.邏輯運算子
4.指定運算子
5.增量
減量
6.基本條件式
()?="":"";
資料型態
1.number整數0-65535，浮點數12.56
2.string 用""包起
3.boolean false,truth
4.array var k[]=array(12,34);
5.function 函數四架構
6.object 類別class
----------------------------------
<script language="javascript">
function fun1()
{
var t=prompt("請輸入數字；");//var t
var y=((t%2)==0)?"偶數":"奇數";
alert(y);
}
</script>

<body>
<a href="javascript:void();" onclick="fun1()">執行</a>
</body>
======================================

2016年12月23日星期五

DOM；文件物件模型

內部間距 padding

id指令
階層導向向下拉式選單取值用name document.f1.sel.value;
DOM 用 id document.getElementById("img1").src=timg;

<script language="javascript">
function fun1()
{
var timg=document.f1.sel.value;

document.getElementById("img1").src=timg;

}
</script>
<body>
<form id="f1" name="f1">
<table id="tb1" border="2" >
<tr>
<td >地點；
</td>
<td>
<select id="sel" name="sel" style="width:200; background-color:#0FF">
<option value="image/h01.jpg" >阿里山
<option value="image/h02.jpg" >合歡山
<option value="image/h03.jpg" >日月潭
<option value="image/h04.jpg" >野柳
</select>
</td>
<td align="center">
<input type="button" value="確定" onclick="fun1()" />
</td>
</tr>
<tr>
<td colspan="3" width="300">
<img id="img1" src="image/h01.jpg" />
</td>
</tr>
</table>
</form>
=====================================
<style type="text/css">
#dv1 ol {
list-style:none;
margin-left:-20px;
padding-top:30px;
}
#dv1 ol li {
display:inline;
float:left;
padding:10px;
}
#dv2 ol {
list-style:none;
margin-top:-15px;
margin-left:-20px;
padding-top:30px;
}
#dv2 ol li {
display:inline;
float:left;
padding:10px;
}
#dv3 ol {
list-style:none;
margin-top:-15px;
margin-left:-20px;
padding-top:30px;
}
#dv3 ol li {
display:inline;
float:left;
padding:10px;
}
</style>
<script language="javascript">
function fun(x)
{
//alert(x);
window.open(x,"win1","width=600px,height=450px,top=120px,left=100px");
}
</script>
<body>
<div id="dv1" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
<div id="dv2" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
<div id="dv3" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
</body>
===========================================

2016年12月21日星期三

css

1.內嵌式元件
2.區塊式
<style type="text/css">
選擇器{屬性1:屬性值1; 屬性2:屬性值2;...... }
</style>
選擇器 1.tag名稱
2.id #
3.class .

3.外部檔案式
css漸層色
background:linear-gradient(參數1參數2參數N)

=======================
<!doctype html>
<head>
<meta charset="utf-8">
<title>appform2</title>
</head>
<style type="text/css">
#dv1 { display:none;}
#s1 { cursor:pointer;}
label {color:#36F}
#s1,#r1{
color:#66F;
font-size:16px;
background:linear-gradient(to top right,blue,white,yellow);
border-radius:10px;

}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script language="javascript">
function fun1() {
if ($("#dv1").is(":visible"))
{$("#dv1").css('display','none'); $("#s1").html("開啟");}
else {$("#dv1").css('display','block');$("#s1").html("關閉");}
}
</script>
<body>
<center>
<h3 ><span id="s1" name="s1" style="border:2px solid darkred;" onclick="fun1();" >開啟</span></h3>
<div id="dv1" name="dv1" style="width:800px;height:450px;border:2px solid darkred;background:url(image/bg4.jpg) " >
<form id="f1" name="f1" method="post">

<table border="0" id="tbl1" name="tbl1" width="700" >
<tr><td colspan="6">個人基本資料</td></tr>

<tr><td ><label id="lab1">編號</label></td>
<td width="25%"><input type="text" id="t1" name="t1" size="20" style="background-color:#6CF" /></td>
<td><label id="lab2">姓名</label></td>
<td width="25%"><input type="text" id="t2" name="t2" size="20"></td>
<td><label id="lab3">生日</label></td>
<td width="25%"><input type="text" id="t3" name="t3" size="20"></td>
</tr>
<tr><td><label id="lab4">血型</label></td>
<td>
<select id="sel1" name="sel1" style="width:20">
<option value="O" >O
<option value="A" >A
<option value="B" >B
<option value="AB" >AB
</select>
</td>
<td><label id="lab5">學歷</label></td>
<td>
<select id="sel2" name="sel2" style="width:20">
<option value="中學" >中學
<option value="專科" >專科
<option value="大學" >大學
<option value="" >研究所
</select>
</td>
<td><label id="lab6">性別</label></td>
<td>
<select id="sel3" name="sel3" style="width:20">
<option value="男" >男
<option value="女" >女
</select>
</td>
</tr>
<tr>
<td><label id="lab7>"婚姻</label></td>
<td><input type="radio" name="marrige" value="已婚" />已婚
<input type="radio" name="marrige" value="未婚" />未婚
</td>
<td><label id="lab8">興趣</label></td>
<td colspan="3">
<input type="checkbox" name="habby" value="爬山" />爬山
<input type="checkbox" name="habby" value="讀書" />讀書
<input type="checkbox" name="habby" value="打球" />打球
<input type="checkbox" name="habby" value="大自然" />大自然
</td>
</tr>
<tr><td colspan="6"><label id="lab9">專長</label></td></tr>
<tr>
<td colspan="6">
<textarea id="te1" name="te1" cols="90" rows="7"></textarea>
</td>
</tr>
<tr>
<td colspan="6">
<table width="100%">
<tr>
<td>
<input type="submit" id="s1" name="s1" value="傳送" />
</td>
<td align="right">
<input type="reset" id="r1" name="r1" value="清除" />
</td>
</tr>
</table>
</td>
</tr>

</table>
</form>
</div>
</center>
</body>
</html>

2016年12月20日星期二

元件介紹

form 表單
<form id="識別碼" name="元件名稱" method="post/get" action="">
</form>
id jquery DOM
name javascript, 伺服語言(php, jsp asp.net)

ex:
<form id="f1" name="f1" method="get">
姓名：
<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="確定" >
<P>
婚姻：
<input type="radio" id="rd1" name="rd" value="已婚" />已婚
<input type="radio" id="rd2" name="rd" value="未婚" />未婚
<p>
興趣：
<input type="checkbox" id="ck1" name="ck1" value="旅行" />旅行
<input type="checkbox" id="ck2" name="ck2" value="爬山" />爬山
<input type="checkbox" id="ck3" name="ck3" value="音樂" />音樂
<input type="checkbox" id="ck4" name="ck4" value="讀書" />讀書
<input type="checkbox" id="ck5" name="ck5" value="大自然" />大自然
<p>
學歷：
<select id="sel" name="sel" style="width:120px">
<option value="中學">中學 </option>
<option value="專科">專科 </option>
<option value="大學">大學 </option>
<option value="研究所">研究所 </option>
<option value="其他">其他</option>
</select>
<p>
備忘框：<br/>
<textarea id="text" name="text" cols="40" rows="8" ></textarea>
<p>
密碼攔：<br/>
<input type="password" id="p1" name="p1" size="" />
<p>
<input type="submit" id="s1" name="s1" value="確定" />
<input type="reset" id="r1" name="r1" value="清除"
</form>
============================
<!doctype html>
<head>
<meta charset="utf-8">
<title>appform2</title>
</head>
<style type="text/css">
#dv1 { display:none;}
#s1 { cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script language="javascript">
function fun1() {
if ($("#dv1").is(":visible"))
{$("#dv1").css('display','none'); $("#s1").html("開啟");}
else {$("#dv1").css('display','block');$("#s1").html("關閉");}
}
</script>
<body>
<h3><span id="s1" name="s1" style="border:2px solid darkred;" onclick="fun1();" >開啟</span></h3>
<form id="f1" name="f1" method="post">
<div id="dv1" name="dv1" style="width:700px;height:500px;background-color:yellow;border:2px solid darkred; " >
<table border="2" id="tbl1" name="tbl1" width="700">
<tr><td colspan="6">個人基本資料</td></tr>

<tr><td >編號</td>
<td width="25%"><input type="text" id="t1" name="t1" size="20" /></td>
<td>姓名</td>
<td width="25%"><input type="text" id="t2" name="t2" size="20"></td>
<td>生日</td>
<td width="25%"><input type="text" id="t3" name="t3" size="20"></td>
</tr>
<tr><td>血型</td>
<td>
<select id="sel1" name="sel1" style="width:20">
<option value="O" >O
<option value="A" >A
<option value="B" >B
<option value="AB" >AB
</select>
</td>
<td>學歷</td>
<td>
<select id="sel2" name="sel2" style="width:20">
<option value="中學" >中學
<option value="專科" >專科
<option value="大學" >大學
<option value="" >研究所
</select>
</td>
<td>性別</td>
<td>
<select id="sel3" name="sel3" style="width:20">
<option value="男" >男
<option value="女" >女
</select>
</td>
</tr>
<tr>
<td>婚姻</td>
<td><input type="radio" name="marrige" value="已婚" />已婚
<input type="radio" name="marrige" value="未婚" />未婚
</td>
<td>興趣</td>
<td colspan="3">
<input type="checkbox" name="habby" value="爬山" />爬山
<input type="checkbox" name="habby" value="讀書" />讀書
<input type="checkbox" name="habby" value="打球" />打球
<input type="checkbox" name="habby" value="大自然" />大自然
</td>
</tr>
<tr><td colspan="6">專長</td></tr>
<tr>
<td colspan="6">
<textarea id="te1" name="te1" cols="90" rows="7"></textarea>
</td>
</tr>
<tr>
<td colspan="6">
<table width="100%">
<tr>
<td>
<input type="submit" id="s1" name="s1" value="傳送" />
</td>
<td align="right">
<input type="reset" id="r1" name="r1" value="清除" />
</td>
</tr>
</table>
</td>
</tr>

</table>
</div>
</form>
</body>
</html>
======================================

2016年12月16日星期五

字型元件

標題元件
<h1>大字
<h2>
<h3>
<h4>
<h5>
<h6>小字

網頁程式設計班

字型元件
<font size="+6" color="#FF0000">字型元件</font>
字型元件
<br/>
<p>
清單元件
<ol type="A">
<li>網頁設計</li>
<li>程式設計</li>
<li>資料庫設計</li>
</ol>

網頁設計
程式設計
資料庫設計

===================
圖片元件
<img src="image/h04.jpg" width="300" height="250" />
跑馬燈
<marquee behavior="alternate" >App網頁設計</marquee>
超連結
<a href="http://www.google.com">google</a>
<p>
<a href="http://www.google.com">
<img src="image/h02.jpg" width="100" height="60" />
</a>
=======================
表格

<table border="2" width="200">
<tr>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>30</td>
<td>40</td>
</tr>
</table>
=================
ex1
<table border="2">
<tr>
<td>編號</td>
<td>姓名</td>
<td>生日</td>
<td>血型</td>
<td>相片</td>
</tr>
<tr>
<td>p1001</td>
<td>劉淵</td>
<td>74/12/11</td>
<td>A</td><td rowspan="3">
<img src="image/h04.jpg" width="230" height="180" />
</td>
</tr>
<tr>
<td>p1002</td><td>胡戈</td><td>58/4/21</td><td>B</td>
</tr>
<tr>
<td>p1003</td><td>陳武</td><td>69/5/9</td><td>O</td>
</tr>
</table>
==================================
網頁元件
id: #
class: ‧
標籤名稱；
<style type="text/css">
#tbmenu1 td:hover{
background:#F69
}
a {
text-decoration:none
}
</style>
<body>
<center>
<table id="tbmenu1" border="0" width="550">
<tr>
<td><a href="sub1.html">
程式設計</a>
</td>
<td><a href="sub2.html">
網頁設計</a></td>
<td><a href="sub3.html">
美工設計</a>
</td>
<td><a href="sub4.html">
資料庫設計</a>
</td>
<td><a href="sub5.html">
系統設計</a>
</td>
</tr>

</table>
<p>
<table border="2" width="550">
<tr bgcolor="#0066FF">
<td colspan="5"><marquee behavior="alternate" >人事基本資料</marquee></td>
</tr>
<tr>
<td>編號</td>
<td>姓名</td>
<td>生日</td>
<td>血型</td>
<td>相片</td>
</tr>
<tr>
<td>p1001</td>
<td>劉淵</td>
<td>74/12/11</td>
<td>A</td><td rowspan="3">
<img src="image/h04.jpg" width="230" height="180" />
</td>
</tr>
<tr>
<td>p1002</td><td>胡戈</td><td>58/4/21</td><td>B</td>
</tr>
<tr>
<td>p1003</td><td>陳武</td><td>69/5/9</td><td>O</td>
</tr>
<tr>
<td colspan="5" align="right" bgcolor="#3399FF">設計師；hope</td>
</tr>
</table>
<p>
<table border="2" width="550" bgcolor="#CCFF66" rules="rows">
<tr>
<td rowspan="5">
<img src="image/h05.jpg" width="230" height="180" />
</td>
<td>產品編號 </td>
<td>產品名稱 </td>
<td>出廠公司 </td>
<td>價格 </td>
</tr>
<tr>
<td>p1001</td><td>光碟機</td><td>鴻海</td><td>500</td>
</tr>
<tr>
<td>p1002</td>螢幕<td></td>yy<td></td><td>900</td>
</tr>
<tr>
<td>p1003</td>記憶體<td></td><td>XX</td><td>1200</td>
</tr>
<tr>
<td>p1004</td><td>主機板</td><td>ZZ</td><td>3000</td>
</tr>
</table>
</center>
</body>
=====================
<body>
程式設計內容
<p>
<a href="apphope05.html">回首頁</a>
</body>
=====================
div面板
<div id="dv1" style="width:550px; height:300px; background-color:#6CF">
1.文字 2.圖片 3.表格 ˋ.視訊 5.DIV面板
</div>
===
<div id="dv1" style="width:300px; height:250px; background-color:#6CF;
overflow:scroll">
<img src="image/h02.jpg" width="300" height="300" />
</div>
=====================
<body>
<div id="dv1" style="width:300px; height:250px; background-color:#6CF;
overflow:scroll">
<img src="image/h02.jpg" width="300" height="300" />
</div>
<p>
<div id="dv1" style="width:300px; height:250px; background-color:#6CF;
overflow:scroll">
<iframe src="sub6.html" width="300" height="300"></iframe>
</div>
</body>

2016年12月14日星期三

環境佈置html基本架構

arduino1129@gmail.com 062230542

===================================
<!DOCTYPE html>
<head>
<title>無標題文件</title>
</head>
<style type="text/css"> //用標籤a與靜態body相呼應
a{
color:#96C;
}
</style>
<script language="javascript">
function fun1()
{
alert("函數被驅動");
}
</script>
<body>
<a href="javascript:void;" onclick="fun1()">互動性程式驅動</a> //用onclick與動態script呼應
</body>
</html>
靜態 =>事件 =>動態

=================================
http://sweeteason.pixnet.net/blog/post/42130394-responsive-web-design-%28rwd%29-%e9%9f%bf%e6%87%89%e5%bc%8f%e7%b6%b2%e7%ab%99%e9%96%8b%e7%99%bc%e6%95%99%e5%ad%b8%e8%88%87

firebase 主控台

訂閱：意見 (Atom)

2016年12月30日 星期五

2016年12月28日 星期三

2016年12月26日 星期一

2016年12月23日 星期五

2016年12月21日 星期三

2016年12月20日 星期二

2016年12月16日 星期五

網頁程式設計班