Zenn
🙄

プログラミング自主学習 DAY84 mySQL(Workbench)/Java (File)/Html/Css

2023/08/19に公開
CSS
HTML
Java
MySQL
tech

MySQL

IT Schoolでは、OracleとSQL developerを利用していますが、日本の場合、MySQLを使う会社が多いので、インストールしました。
MySQLはダウンロード時、クライアントプログラムも設置時提供しますので、便利です。
Workbenchというクライアントプログラムがあります。

Install

その後、PowerShellでPATHを設定します。

Sampledatabase　「employees.sql」　をインストールします。

Table

左下にSchemasをクリックし、Schemaを作成します。
Schemaは一応、DBと同じものだと理解すれば、いいと思います。
それから、DBに必要なエンティティ情報をテーブルに作成します。

Schemaの名前をネットショッピングモールにしました。

SQLを使わず、このようにGUIからテーブルを作成することもできます。

tableをマウス右ボタンにクリックし、データーをCRUDすることができます。

java

File

Fileクラスは、fileの情報が知りたい時とStream系クラスのパラメータに入るオブジェクトとして活用されています。

結局、ファイルというのは、ユーザーとかなーるカーネルの間のインターフェースになり、アプリケーションもプログラムもファイルですので、こちらのクラスも簡単に勉強してみたいと思います。

File file = new File(String diretory);

実際に、Fileがなくても、例外は発生しないのですが、ディレクトリにあるかを確認できるメソッドもあります。

インスタンスメソッドexist()は、ファイルの有無をbooleanでリターンするメソッドです。

exist()の戻り値がfalseの場合、
mkdirs() : 上位フォルダーを生成する。

exist()の戻り値がtrueの場合
delete() : ファイルのを削除する。
isDirectory(): ファイルがディレクトリがをbooleanでリターンする。
isFile()：ファイルがファイルがをbooleanでリターンする。
length()：ファイルのを大きさをする。

File
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class FIleExample {
public static void main(String[] args) throws IOException {
		
	File dir= new File("C:/yes/images");
	File file1= new File("C:/yes/file1.txt");
	File file2= new File("C:/yes/file2.txt");
	File file3= new File("C:/yes/file3.txt");
		
	if(dir.exists() == false) dir.mkdirs();
	if(file1.exists() == false) file1.createNewFile();
	if(file2.exists() == false) file2.createNewFile();
	if(file3.exists() == false) file3.createNewFile();
		
	File yes = new File("C:/yes");
	File[] contents = yes.listFiles();
		
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd a HH:mm");
	for(File file : contents) {
		System.out.printf("%-25s",sdf.format(new Date(file.lastModified())));
		if(file.isDirectory()) {
			System.out.printf("%-10s%-20s","<DIR>",file.getName());
		}else {
		System.out.printf("%-10s%-20s",file.length(),file.getName());
		}
		System.out.println();
	}
    }
}


2023-08-19 오후 20:41      0         file1.txt           
2023-08-19 오후 20:41      0         file2.txt           
2023-08-19 오후 20:41      0         file3.txt           
2023-08-19 오후 20:41      <DIR>     images

Files

Fileクラスのように、オブジェクトを生成せずに、static methodで解決できるクラスで、
copy()でInputstream,OutputStreamを使わず、簡単にファイルをコピーすることもできます。

Filesクラスも、Fileの経路が必要になりますが、直接オブジェクトを生成せず、
Pathというクラスかに経路情報を入力したPathオブジェクトを生成し、
そのPathのオブジェクトをパラメーターとして受け入れます。

Path path = new Path(String diretory);
Files
import java.io.IOException;
import java.nio.charset.Charset;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

public class FilesExample {
public static void main(String[] args) throws IOException {
	String data = "id: winter\n"+ "email: winter@mycompany.com\n" + "tel: 010-123-1234";
		
	Path path = Paths.get("C:/yes/user.txt");
		
	Files.writeString(path, data, Charset.forName("UTF-8"));
		
	System.out.println(Files.probeContentType(path));
	System.out.println(Files.size(path));
		
	System.out.println(Files.readString(path, Charset.forName("UTF-8")));
	}
}


text/plain
56
id: winter
email: winter@mycompany.com
tel: 010-123-1234

Html

https://zenn.dev/eldorado215/articles/e06c9bee92ecf1

以前、作成した初めてのWEBサイトにコードを追加してみました。

iframe

 <iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="0" allowfullscreen></iframe>

<!DOCTYPE html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8"/>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

<h2>HTML</h2>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="0" allowfullscreen></iframe>
</p>
<p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification"> Hyper Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. 
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" style="display: block; margin:0 auto; width:50%; height:500px;"/>
<p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. 
    With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. 
    It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
    HTML elements are delineated by tags, written using angle brackets. </p>
</body>
</html>

いつか、使うことがあったら、会員登録をして、追加する練習も行ってみたいと思います。

https://manbedded.tistory.com/18

今回のhtml記事のhtml tagをまとめている韓国人のブロックです。
Chromeの翻訳機能で、参考ができると思います。

Css

htmlに作ったWEB SITEは段々色々な問題に直面します。
その中で、大きなリクエストは、情報をより綺麗に飾りたいというリクエストでした。
最初は、この問題を解決するため、htmlに<font>というタグを追加し、色などを表現できる機能を提供します。

<font color="green"> </font>

しかし、タグをたびたび変更し、情報としての意味が曖昧になる問題があったので、色々な限界に直面します。
この問題を解決するために作った言語がCSSです。

WEB browserの中にHTML、CSSが入るようになり、違う言語だと表示するタグが必要になります。
その境界を表すタグが<style>です。

Styleタグ

Property
<style>
  a{
    color:black;
   }
</style>

aはセレクター（selector）といい、効果を誰に与えるかを意味します。
color:black;はDeclarationといい、表したいpropertyのproperty valueを定義します。
関数型プログラミングですね！

Style属性

個別を変更したしたい場合、直接タグからstyleを変更することもできます。
結局、波格好の中か、タグの中によって異なるイメージですね。
Style属性の場合は、セレクターは要らないです。

<a href="2.html" style=color:deeppink"> </a>

セレクター

IDセレクターはPrimary keyみたいにそのページの一つのデーター、
CLASSセレクターは、共通性を持っているが、タグよりは狭いデーター
要素セレクターは<p>,<a>のように巨大な構造にあるデーターです。

スタイルを適用する範囲が広いセレクターは適用の優先順位が低いので、
IDセレクタの方が一番優先順位が高いです。

要素型セレクタ

先ほど、<>の中にある文字 aはセレクターの名前になった。
このようなセレクターを要素型セレクタという。

Property
<style>
  a{
    color:black;
   }
</style>

classセレクタ

.saw{
    color:gray;	
}

IDセレクタ

#activate{
    color:green;
}	


    a{
        color:black;
        text-decoration:none;
    }
    a:hover{
        background-color: aliceblue;
        color:gray;
    }
    a:active{
        background-color: green;
        color:white;
    }
    h1{
        font-size:xx-large;
        text-align: center;
    }

    a{
        color:black;
        text-decoration:none;
    }
    a:hover{
        background-color: aliceblue;
        color:gray;
    }
    a:active{
        background-color: green;
        color:white;
    }
    h1{
        font-size:xx-large;
        text-align: center;
    }

疑似クラスというクラスのセレクタがありまして、テストしてみれば、インタラクションができるサイトになりました。

Discussion