Java_HTML5-CSS3-JavaScript

KAMATAKA URABE
Java_HTML,CSS3,JavaScript
KAMATAKA URABE
チャプタ 1
Java
HTML5
CSS3
JavaScript
eclipse
セクション 1
JAVA_HTML5-CSS3-JavaScript
JAVA_HTML5-CSS3-J AVA S CRIPT
1. HTMLフォルダの作成
2. 引数（argument）
3. HTML５の作成
4. 文字コード
5. eclipseのEncoding
6. miのTextEncoding
7. CSS ( Cascading Style Sheets )
2
HTMLフォルダの作成
workspace/btjava/html
package btjava;
右クリック
import java.io.BufferedWriter;
import java.io.FileWriter;
public class Pro600 {
public static void main(String[] args) {
// TODO Auto-generated method stub
file600 obj = new file600();
obj.save();
}
}
class file600 {
public void save() {
FileWriter fw = null;
BufferedWriter bw = null;
try {
fw = new FileWriter("html/600.html");
bw = new BufferedWriter(fw);
bw.write("<html>\nhello!\n</html>\n");
} catch (Exception ex) {
ex.printStackTrace();
} finally {
try {
bw.close();
} catch (Exception ex2) {
ex2.printStackTrace();
}
}
}
}
3
引数（argument）
package btjava;
import java.io.BufferedWriter;
import java.io.FileWriter;
public class Pro601 {
public static void main(String[] args) {
// TODO Auto-generated method stub
file601 obj = new file601();
obj.save("html/601.html", "<html>\nhello!\n</html>\n");
}
}
class file601 {
public void save(String FileName, String HTMLtxt) {
FileWriter fw = null;
BufferedWriter bw = null;
try {
fw = new FileWriter(FileName);
bw = new BufferedWriter(fw);
bw.write(HTMLtxt);
} catch (Exception ex) {
ex.printStackTrace();
} finally {
try {
bw.close();
} catch (Exception ex2) {
ex2.printStackTrace();
}
}
}
}
4
HTML５の作成
中央よせ
右クリック
ダブルクリックして実行
610.html
page42
5
文字コード
UTF-8
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
普通のテキスト
<center>中央よせ</center>
<font color="red">赤色のテキスト</font>
<br />
<font size="6">大きいテキスト</font>
</body>
</html>
「610.html」の中に、
<meta charset='UTF-8' />
を記述することで、文字化けせず
に表示されます。
UTF-8
「610.html」は、ＵＴＦ−８の
文字コードになっています。
「エンコード」を変更すると
文字化けせずに表示されます。
6
eclipseのEncoding
Shift_JIS
「610.html」ファイル
Shift_JIS, CR+LF
「eclipse」では、
miのTextEncoding
Shift_JIS, CR+LF
の変更で文字化けします。
7
この構文を削除する。
<head>
<meta charset='UTF-8' />
</head>
8
HTML５
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
<h1>タイトル</h1>
<p>
これは<b>パラグラフ</b>です
</p>
</body>
</html>
page4４
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
CSS ( Cascading Style Sheets )
文章の構造（章、段落、見出しなど）と、見映え（色、文
字の大きさ、フォントなど）を切り離すことができれば、
見映えのみの修正で済むようになります。
この見映えを指定するためのルールが
「CSS」(Cascading Style Sheets)です。
<link rel='stylesheet' type='text/css'
media='screen' href='611.css' />
</head>
<body>
<h1>タイトル</h1>
<p>
これは<b>パラグラフ</b>です
</p>
</body>
</html>
9
<body>
<h1>タイトル</h1>
<p>
これは<b>パラグラフ</b>です
</p>
</body>
page19
<body>
<h1>タイトル</h1>
<p>
これは<b>パラグラフ</b>です
</p>
</body>
body{
color:blue;
}
p{
}
font-style:italic;
10
セクション 2
JavaScript
J AVA S CRIPT
1. JavaScript, css, jpeg
11
JavaScript, css, jpeg
<!DOCTYPE html>
<html lang="ja">
Pro630.html
<head>
<meta charset='UTF-8' />
<link rel="stylesheet" href="../../html/630.css">
<title>Pro630html</title>
<script type="text/javascript">
function welcome()
{
window.alert("ようこそ！ログインしてください。");
}
</script>
</head>
background-color: #000000;
<img src="../../html/630.jpg" onclick="welcome()"/>
<body>
<img src="../../html/630.jpg" onclick="welcome()"/>
</body>
</html>
body{
background-color: #000000;
color: #FFFFFF;
}
<script type="text/javascript">
function welcome()
{
window.alert("ようこそ！ログインしてください。");
}
</script>
12
13
セクション 3
Clock
C LOCK
1.
Analog Clock
2. Digital Clock
Thread
Graphics2D
3. Position of Hand ( Analog Clock )
4. Draw Hand ( Analog Clock )
5. DrawImage ( Analog Clock )
offset
6. DrawImage ( TEST )
14
Analog Clock
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no,initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>640_Analog Clock_Tips</title>
<link rel="stylesheet" href="../../html/640.css" type="text/css" media="all" />
</head>
<body>
<canvas id="clock" width="320" height="480"></canvas>
<script type="text/javascript" src="../../js/640_analogClock.js"></script>
</body>
</html>
Pro640.html
body {
width: 320px;
height:480px;
background-color : white;
}
#clock {
position : absolute;
left : 0px;
top: 0px;
width: 320px;
height:480px;
font-size : 40pt;
font-family : verdana;
font-weight: bold;
color : white;
text-align: center;
text-shadow: #50b010 2px 2px 7px;
-webkit-animation: 'scale' 4s linear 0s infinite alternate;
}
@-webkit-keyframes 'scale' {
0% { -webkit-transform: scale(0.85); }
100% { -webkit-transform: scale(1.05); }
}
640.css
setInterval(function(){
var currentTime = new Date();
var h = currentTime.getHours() % 12;
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
h = h * 30 + (m/12) * 6;
m = m * 6;
s = s * 6;
context.clearRect(0, 0, myCanvas.width, myCanvas.height);
context.drawImage(baseImage, 0, 80);
context.save();
context.translate(160, 240);
640_analogClock.js
// 短針を描く
context.save();
context.rotate(h * Math.PI / 180);
context.drawImage(shortImage,-160,-170);
context.restore();
// 長針を描く
context.save();
context.rotate(m * Math.PI / 180);
context.drawImage(longImage,-160,-170);
context.restore();
// 秒針を描く
context.save();
context.rotate(s * Math.PI / 180);
context.drawImage(secImage,-160,-170);
context.restore();
context.restore();
}, 1000);
setTimeout("window.scrollTo(0,1)", 100);
var myCanvas = document.getElementById("clock");
var context = myCanvas.getContext("2d");
var baseImage = new Image();
baseImage.src = "../../js/images/base.png";
var shortImage = new Image();
shortImage.src = "../../js/images/short.png";
var longImage = new Image();
longImage.src = "../../js/images/long.png";
var secImage = new Image();
secImage.src = "../../js/images/sec.png";
15
例１０時４５分３２秒
２π
60
(
＋
２π
アナログ時計の
パーツ画像は、
画像ファイル名を
クリックすれば
取得できます。
２π
60
４５
✖
min
２π
long.png
60
✖
✖
３２ sec
60
✖ ３２ sec
）
✖
２π
２π
(４５
min
60
３２ sec
＋ 60
）
base.png
２π
60
sec.png
✖ min
short.png
２π
12
２π
60
２π
✖ sec
12
✖ hour
(１０
✖
hour＋
1
sec
３２
✖ ４５min ＋
60
（
60
）
）
⃝
✖
16
360度 ÷ 60分割 → 6度
double th = 2*Math.PI/12.0*( h+(m+s/60.0)/60.0 );
２π ÷ 60分割
２π
60
double ts = 2*Math.PI/60.0 * s;
２π
✖ sec
12
＋
）
（
360度 ÷ 60分割 → 6度
２π
２π
２π ÷ 60分割
２π
２π
60
double tm = (2*Math.PI/60.0)*(m+s/60.0);
(
２π
60
✖ sec
✖ min
＋
）
（
✖
２π
12
✖
min
(
＋
hour
＋
60
1
60
✖
12
）
（
✖
min ＋
sec
60
）
）
２π
✖
２π
60
sec
✖ hour
60
17
package btjava;
public class Pro641 {
class clock {
void GetClkPos( int h, int m, int s, double rh, double rm, double rs )
{
double ts = 2*Math.PI/60 .0* s;
// theta_s = (2*π/60)*s
public static void main(String[] args) {
// TODO Auto-generated method stub
rh = 50.0;
double
rm = 75.0;
double
rs = 100.0;
double
clock clk_obj = new clock();
for( int h=0; h<1; h++) {
for( int m=0; m<60; m++) {
for( int s=0; s<60; s++) {
clk_obj.GetClkPos( h, m, s, rh, rm, rs );
}
}
}
// theta_m = (2π/60)*m + (2π/60) * ( ( (2π/60)*s)/2π ) )
-->(2π/60)*m + (2π/60)*(s/60)
double tm = (2*Math.PI/60.0)*(m+s/60.0);
// theta_m = (2π/60) * (m+s/60)
// theta_h = (2π/12)*h + (2π/12) * ( (2π/60) * (m+s/60) ) / 2π
--> h/12 + ( (m+s/60)/60 ) / 12
double th = 2*Math.PI/12.0*( h+(m+s/60.0)/60.0 );
// theta_h = 2π/12 * ( h + (m+s/60)/60 )
double ys = Math.cos( ts ) * rs;
double xs = Math.sin( ts ) * rs;
double ym = Math.cos( tm ) * rm;
double xm = Math.sin( tm ) * rm;
double yh = Math.cos( th ) * rh;
double xh = Math.sin( th ) * rh;
System.out.println( h + "時" + m + "分" + s + "秒" );
１０時４５分３２秒
clk_obj.GetClkPos( 10, 45, 32, rh, rm, rs );
}
}
10時45分32秒
(-30.253120742039314, 39.80890208694019)__
(-74.88305731364858, 4.186612874487211)__
(-20.791169081775905, -97.81476007338057)
時
X : -30.253120742039314
Y : 39.80890208694019
分
X : -74.88305731364858
Y : 4.186612874487211
秒
X : -20.791169081775905
Y : -97.81476007338057
System.out.println( "(" + xh + ", " + yh + ")__
(" + xm + ", " + ym + ")__(" + xs + ", " + ys + ")" );
}
}
18
Digital Clock
class clock643 extends JFrame implements ActionListener {
Timer timer = new Timer(1000, this);
Pro643.java
Graphics2D g;
Color
window_color;
int x = 10;
int y = 30;
int t_prev[] = new int[3];
package btjava;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.Date;
}
import javax.swing.JFrame;
import javax.swing.Timer;
class Pro643 {
public static void main(String[] args) {
clock643 obj = new clock643();
obj.setSize( 160, 60 );
obj.setVisible( true );
Graphics2D graphics =
(Graphics2D) obj.getGraphics();
Color backcolor = obj.getBackground();
try{
Thread.sleep(100);
}catch(InterruptedException e){}
}
}
obj.init( graphics, backcolor );
obj.start();
clock643() {
super("デジタル時計");
t_prev[0] = 0;
t_prev[1] = 0;
t_prev[2] = 0;
void init( Graphics2D graphics, Color backcolor ) {
g = graphics;
window_color = backcolor;
void start(){
}
timer.start();
}
void stop(){
timer.stop();
}
public void actionPerformed(ActionEvent e) {
tick();
}
void tick( ) {
DrawTime();
}
19
void DrawTime() {
lineStroke( 3.0f );
g.setColor( window_color );
g.drawLine( x, y, x+10, y );
String h = String.valueOf(t_prev[0]);
String m = String.valueOf(t_prev[1]);
String s = String.valueOf(t_prev[2]);
g.drawString( h, 40, 50 );
g.drawString( m, 65, 50 );
g.drawString( s, 90, 50 );
int[] getTime(){
Date date = new Date();
String Ds[] = date.toString().split(" ");
String Dd[] = Ds[3].split(":");
int t[] = new int[3];
t[0] = Integer.valueOf(Dd[0]);
t[1] = Integer.valueOf(Dd[1]);
t[2] = Integer.valueOf(Dd[2]);
if( t[0] > 11 ) { t[0] -= 12; }
return( t );
}
g.setColor(Color.black);
x += 10;
if ( x > 100 ) { x = 10; }
g.drawLine( x, y, x+10, y );
}
int[] t = getTime();
t_prev[0] = t[0];
t_prev[1] = t[1];
t_prev[2] = t[2];
h = String.valueOf(t[0]);
m = String.valueOf(t[1]);
s = String.valueOf(t[2]);
g.drawString( h, 40, 50 );
g.drawString( ":", 60, 50 );
g.drawString( m, 65, 50 );
g.drawString( ":", 85, 50 );
g.drawString( s, 90, 50 );
void lineStroke( float f ) {
BasicStroke w = new BasicStroke( f );
g.setStroke( w ) ;
}
20
Thread
Graphics2D
class Pro643 {
}
class Pro643 {
public static void main(String[] args) {
clock643 obj = new clock643();
∼∼∼∼∼∼
１
obj.start();
}
public static void main(String[] args) {
clock643 obj = new clock643();
obj.setSize( 160, 60 );
obj.setVisible( true );
Graphics2D graphics =
(Graphics2D) obj.getGraphics();
Color backcolor = obj.getBackground();
３
class clock643 extends
２ JFrame implements ActionListener {
}
try{
Thread.sleep(100);
}catch(InterruptedException e){}
Timer timer = new Timer(1000, this);
void start(){
∼∼∼∼∼∼
timer.start();
}
４
void stop(){
timer.stop();
}
public void actionPerformed(ActionEvent e) {
tick();
}
}
１
３
class clock643 extends JFrame implements ActionListener {
２= new Timer(1000, this);
Timer timer
５
void tick( ) {
DrawTime();
}
}
obj.init( graphics, backcolor );
obj.start();
Graphics2D g;
Color
window_color;
∼∼∼∼∼∼
}
void init( Graphics2D graphics, Color backcolor ) {
g = graphics;
window_color = backcolor;
}
21
Position of Hand ( Analog Clock )
Pro644.java
void DrawTime() {
∼∼∼∼∼∼
int[] t = getTime(); // 現在時刻を取得する
∼∼∼∼∼∼
int[] getTime(){
Date date = new Date();
String Ds[] = date.toString().split(" ");
String Dd[] = Ds[3].split(":");
int t[] = new int[3];
t[0] = Integer.valueOf(Dd[0]);
t[1] = Integer.valueOf(Dd[1]);
t[2] = Integer.valueOf(Dd[2]);
if( t[0] > 11 ) { t[0] -= 12; }
return( t );
}
GetClkPos( t[0], t[1], t[2], rh, rm, rs );
}
class clock644 extends JFrame implements ActionListener {
∼∼∼∼∼∼
void GetClkPos( int h, int m, int s,
double rh, double rm, double rs ) {
double ts = 2*Math.PI/60 * s;
double tm = (2*Math.PI/60.0)*(m+s/60.0);
double th = 2*Math.PI/12.0*( h+(m+s/60.0)/60.0 );
double ys = Math.cos( ts ) * rs;
double xs = Math.sin( ts ) * rs;
double ym = Math.cos( tm ) * rm;
double xm = Math.sin( tm ) * rm;
double yh = Math.cos( th ) * rh;
double xh = Math.sin( th ) * rh;
System.out.println( h + "時" + m + "分" + s + "秒" );
System.out.println( "(" + xh + ", " + yh + ")__
(" + xm + ", " + ym + ")__(" + xs + ", " + ys + ")" );
}
}
0時42分59秒
(18.31829495492312, 46.52354317917368)__
(-73.33374275689546, -15.721392217786663)__
(-10.45284632676543, 99.45218953682733)
0時43分0秒
(18.325061336214862, 46.52087839910123)__
(-73.36107005503541, -15.593376811331984)__
(0.0, 100.0)
0時43分1秒
(18.33182732985848, 46.5182126349267)__
(-73.38817388263337, -15.465313904747266)__
(10.452846326765346, 99.45218953682733)
0時43分2秒
(18.338592935710857, 46.51554588670648)__
(-73.41505415712636, -15.337203888134326)__
(20.79116908177593, 97.81476007338057)
22
Draw Hand ( Analog Clock )
Pro645.java
class clock645 extends JFrame implements ActionListener {
∼∼∼∼∼∼
void GetClkPos( int h, int m, int s,
double rh, double rm, double rs ) {
g.setColor( window_color );
g.drawLine( xc, yc, p_prev[0][0]+xc, p_prev[0][1]+yc );
g.drawLine( xc, yc, p_prev[1][0]+xc, p_prev[1][1]+yc );
g.drawLine( xc, yc, p_prev[2][0]+xc, p_prev[2][1]+yc );
double ts = 2*Math.PI/60 * s;
double tm = (2*Math.PI/60.0)*(m+s/60.0);
double th = 2*Math.PI/12.0*( h+(m+s/60.0)/60.0 );
int ys = -(int)( Math.cos( ts ) * rs );
int xs = (int)( Math.sin( ts ) * rs );
int ym = -(int)( Math.cos( tm ) * rm );
int xm = (int)( Math.sin( tm ) * rm );
int yh = -(int)( Math.cos( th ) * rh );
int xh = (int)( Math.sin( th ) * rh );
g.setColor(Color.red);
g.drawLine( xc, yc, xs+xc, ys+yc );
g.setColor(Color.green);
g.drawLine( xc, yc, xm+xc, ym+yc );
g.setColor(Color.blue);
g.drawLine( xc, yc, xh+xc, yh+yc );
p_prev[0][0] = xs; p_prev[0][1] = ys;
p_prev[1][0] = xm; p_prev[1][1] = ym;
p_prev[2][0] = xh; p_prev[2][1] = yh;
class clock645 extends JFrame implements ActionListener {
Timer timer = new Timer(1000, this);
Graphics2D g;
Color
window_color;
int x = 10;
int y = 30;
int t_prev[] = new int[3];
double rh = 50.0;
double rm = 75.0;
double rs = 100.0;
int xc = 150;
int yc = 150;
int p_prev[][] = new int[3][2];
// コンストラクタ
clock645() {
super("アナログ時計");
t_prev[0] = 0;
t_prev[1] = 0;
t_prev[2] = 0;
p_prev[0][0] = 0; p_prev[0][1] = 0;
p_prev[1][0] = 0; p_prev[1][1] = 0;
p_prev[2][0] = 0; p_prev[2][1] = 0;
}
}
}
23
DrawImage ( Analog Clock )
// Imageの読み込み FileInputStream
// Imageの読み込み ImageIO
// イメージをファイルから取り込む
// 引数 - Imgaeのファイル名
// 戻り値 - 読み込んだイメージ
BufferedImage loadImage(String name){
try{
FileInputStream in=new FileInputStream(name);
BufferedImage rv=ImageIO.read(in);
in.close();
return rv;
}catch(IOException e){
System.out.println("Err e="+e);
return null;
}
}
image=loadImage("js/images/base.png");
Graphics2D g;
Color
window_color;
int xc = 150;
int yc = 150;
int p_prev[][] = new int[3][2];
BufferedImage image; //ウィンドウに表示するイメージ
void init( Graphics2D graphics, Color backcolor ){
g = graphics;
window_color = backcolor;
}
g.drawString( "中心", xc, yc );
image=loadImage("js/images/base.png");
g.drawImage(image, 0, 0, xc*2, yc*2, this);
int xc = 150;
offset
参考ＵＲＬ
yc * 2
import java.io.*;
import javax.imageio.*;
Timer timer = new Timer(1000, this);
int yc = 150;
Pro646.java
class clock646 extends JFrame implements ActionListener {
xc * 2
24
offset
void init( ∼∼∼∼∼∼
g.drawImage(image, 0, 0+ofs, xc*2, yc*2, this);
}
int ofs = 0;
int clk_rad = 150;
// 時計の半径
void init( ∼∼∼∼∼∼
g.drawImage(image, 0, 0+ofs, clk_rad*2, clk_rad*2, this);
}
void init(
∼∼∼∼∼∼
ofs = offset;
yc += ofs;
∼∼∼∼∼∼
public static void main(String[] args) {
∼∼∼∼∼∼
}
int offset = 23;
class clock646 extends
JFrame implements
// windowサイズと表示
obj.setSize( 300, 300+offset ); ActionListener {
obj.setVisible( true );
BufferedImage image;
∼∼∼∼∼∼
obj.init( graphics, backcolor, offset ); int ofs = 0;
void init( Graphics2D graphics, Color backcolor, int offset ){
g = graphics;
window_color = backcolor;
ofs = offset;
// オフセット
g.drawString( "中心", xc, yc );
image=loadImage("js/images/base.png");
g.drawImage(image, 0, 0+ofs, xc*2, yc*2, this);
}
25
DrawImage ( TEST )
Pro647.java
参考ＵＲＬ
test.png
void init( Graphics2D graphics, Color backcolor, int offset ){
g = graphics;
window_color = backcolor;
offset
int xz = 0;
int yz = 0;
int ofs = offset;
// 座標原点(X)
// 座標原点(Y)
// オフセット
double OneDeg = Math.PI / 180.0;
final Graphics2D g2 = (Graphics2D) g;
final AffineTransform at = new AffineTransform();
BufferedImage imageR = loadImage("js/images/test.png");
void DrawRect( double OneDeg, final Graphics2D g2,
final AffineTransform at, BufferedImage image,
double ang, int x, int y, int xz, int yz ) {
int h = image.getTileHeight();
int w = image.getTileWidth();
at.rotate( ang*OneDeg, xz+w/2, yz+h/2 );
g2.setTransform(at);
g.drawImage(image, xz+x, yz+y, this );
}
double ang = 0.0;
int x = 0;
int y = 0;
y += ofs;
DrawRect( OneDeg, g2, at, imageR, ang, x, y, xz, yz );
26
double ang = 0.0;
int x = 0;
int y = 0;
y += ofs;
DrawRect( OneDeg, g2, at, imageR, ang, x, y, xz, yz );
int xz = 0; // 座標原点(X)
int yz = 0; // 座標原点(Y)
x += 120;
int xz = 15; // 座標原点(X)
int yz = 65; // 座標原点(Y)
ang = 0.0;
０
度
x += 120;
ang = 30.0;
x = 220;
an
前 g=
３
しての設定0.0;な
いる角
のに
度
。
で回、
転
DrawRect( OneDeg, g2, at, imageR, ang, x, y, xz, yz );
x = 0;
x += 120;
x += 120;
ang = 0.0;
ang = 0.0;なので、
x = 240, y = ofs の
位置で描画されるべき
x = 220;
y = 160;
ang = 30.0;
xz = 15;
yz = 65;
y = 160;
x += 120;
ang = 30.0;
DrawRect( OneDeg, g2, at, imageR, ang, x, y, xz, yz );
an
g=
30
.0;
x = 220;
y = 160;
ang = 30.0;
xz = 15;
// 座標原点(X)
yz = 65;
// 座標原点(Y)
DrawRect( OneDeg, g2, at, imageR, ang, x, y, xz, yz );
27
DrawImage ( awt, swing )
Pro648.java
by nagasawa
28

Download Report