Zenn
🔖

プログラミング自主学習 DAY71 HTML/Lambda

2023/08/06に公開
Java
初心者
HTML 5
tech

HTML

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

以前、Visual Studio codeを通して、簡単なHTMLファイルを作成してみた。
HTMLはTAGという機能があり、TAGを通してWEB pageのストラクチャーを作ることができる。

以前は、<h1></h1>,
, <p>, <strong>,<u>など中身の構造を作ったり、内容（文字）をアレンジする練習をしてみたが、今日は全体的な構造を作り、最初のWEBサイトを作成してみた。

<!DOCTYPE html>　</html> : htmlファイルということを表示する。
<title> </title> : tabに見えるページの名前。作成をしない場合、リンクが見える。<meta charset = ""> : WEB上に（自分が作ったhtmlにアクセスする際に）、どのようなげコードにみせるかを決める。普段incodingした言語を設定すれば、良い。
<head> </head> <body> </body> : 本文のストラクチャーを割る。
<li> ：並べたいリスト。主に**<ol>,<ul>**とセットに使われる。
<ol>　：<li>に順番を付けて並ぶ
<ul>　：<li>に順番を付けずに並ぶ
<a> : anchorという意味で、リンクを挿入したり、ページをリンクするために活用する。簡単に言えば、ページに合うurlを入れるタグ。主に hrefと活用される。

index
<!DOCTYPE html>
<head>
<title>Welcome</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></h2>
<p>Web is a computer programming system created by Donald E. Knuth as the first implementation of what he called "literate programming": the idea that one could create software as works of literature, by embedding source code inside descriptive text, rather than the reverse (as is common practice in most programming languages), in an order that is convenient for exposition to human readers, rather than in the order demanded by the compiler.[1]
    Web consists of two secondary programs: TANGLE, which produces compilable Pascal code from the source texts, and WEAVE, which produces nicely-formatted, printable documentation using TeX.
    CWEB is a version of Web for the C programming language, while noweb is a separate literate programming tool, which is inspired by Web (as reflected in the name) and which is language agnostic.
    The most significant programs written in Web are TeX and Metafont. Modern TeX distributions use another program Web2C to convert Web source to C. </p>
</body>
</html>
html
<!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><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>
css
<!DOCTYPE html>
<head>
<title>WEB1 - CSS</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>CSS</h2>
<p>

    <strong>Cascading Style Sheets (CSS)</strong>is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).
    CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.
    This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
    Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
</p>
<p style="margin-top:45px;">
    The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.    
    The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
    In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL. CSS is also used in GTK widget toolkit.   
</p>
</body>
</html>
javascript
<!DOCTYPE html>
<head>
<title>WEB1 - JavaScript</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>JavaScript</h2>
<p><strong>JavaScript (/ˈdʒɑːvəskrɪpt/)</strong>, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior,[10] often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
    JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[11] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
    The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
    JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
    Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. </p>
</body>ふぃｆ
</html>

このhtmlファイルを自分のパソコンで送信すれば、サーバーになり、他のサイトに任せれば、Web hostingになる。

Lambda(ラムダ）

メソッドは、オブジェクトの内部に存在するコードのかたまりで、オブジェクトの機能・動作を意味する。
その反面、関数はオブジェクトの有無にかかわらず独立的に使用できるコードのかたまりだ。

命令型プログラミングからデーターと関数（機能）として分け、クラス化したことがOOPだ。
javaには、メソッドのみ存在し、関数は存在しない。
全てをオブジェクトに想定し、データーの処理をオブジェクトとオブジェクト間の相互作用に認識しているため、同じメソッド名（関数名）だとしてもオブジェクトにより、結果も変わる。
つまり、関数によりデーター処理の結果が異なるではなく、オブジェクトのメソッド（内部の関数）により結果が異なるため、すべてを同じロジックで処理する関数とは定義しにくい。

javaもラムダという関数型プログラミングを支援しているが、実際は匿名具象オブジェクトで処理する。

>インタフェースを具象した匿名オブジェクトをラムダで活用するためには、Interfaceの抽象メソッドは一つのみ持つ必要がある。このようなインタフェースを関数型インタフェースと呼ぶ。

public interface Runnable{
	void run();
}	

(  ) -> {...};
	
@FunctionalInterface	
public interface Calculable{
   void calculate(int x, int y)	
}
	
(x,y) -> {....}
Calculable
@FunctionalInterface
public interface Calculable {

	 void calculate(int x, int y);
}
LambdaExample
public class LambdaExample {

public static void main(String[] args) {
	action((x, y) ->{
		int result = x + y;
		System.out.println("result: " + result);
	});
		
	action((x, y) ->{
		int result = x - y;
		System.out.println("result: " + result);
	});


	}
	
public static void action(Calculable calculable) {
	int x = 10;
	int y = 4;
	calculable.calculate(x, y);
    }
}	
	

result: 14
result: 6
パラメターがないラムダ
Workable
@FunctionalInterface
public interface Workable {
	void work();
}
Person
public class Person {
	public void action(Workable workable) {
		workable.work();
	}
}
```java:LamdaExample
public class LambdaExample {

  public static void main(String[] args) {
	Person person = new Person();
		
	person.action(() -> {
		System.out.println("Go to work");
		System.out.println("Programming");
	});
		
	person.action(()->System.out.println("get back home"));
	}

}	
	

Go to work
Programming
get back home

【ネストインタフェース＋（匿名オブジェクト➡ラムダ）】
https://zenn.dev/eldorado215/articles/44b1777c0eb644

Button
public class Button {
	
	@FunctionalInterface
	public static interface ClickListener{
		void onClick();
	}
	
	private ClickListener clickListener;
	
	public void setClickListener(ClickListener clickListener) {
		this.clickListener = clickListener;
	}
	
	public void click() {
		this.clickListener.onClick();
	}
}
ButtonExample
public class ButtonExample {

	public static void main(String[] args) {
		
		Button btnOk = new Button();
		
		btnOk.setClickListener(() -> {
			System.out.println("OK");
		});
		
		btnOk.click();
		
		Button btnCancel = new Button();
		
		btnCancel.setClickListener(() -> {
			System.out.println("Cancel");
		});
		
		btnCancel.click();
	}

}	


OK
Cancel
パラメータがあるラムダ
Speakable
@FunctionalInterface
public interface Speakable {
	void speak(String content);
}
Workable 
@FunctionalInterface
public interface Workable {
   void work(String name, String job);
}
Person
public class Person {
	public void action1(Workable workable) {
		workable.work("jack", "program");
	}
	
	public void action2(Speakable speakable) {
		speakable.speak("Hi");
	}
}
LamdaExample
public class LambdaExample {
public static void main(String[] args) {
	Person person = new Person();
		
	person.action1((name, job) -> {
		System.out.print(name + " is ");
		System.out.println(job + "mer");
	});
		
	person.action1((name, job) -> System.out.println(name +" isn't " +
	job + "mer"));
		
		
	person.action2(content -> System.out.println("say " + content + " to me"));
	}
}
戻り値があるラムダ
Calculable
@FunctionalInterface
public interface Calculable {
	double calc(double x, double y);
}
Person 
public class Person {
   public void action(Calculable calculable) {
	   double result = calculable.calc(10, 4);
	   System.out.println("result: " + result );
   }
}
LambdaExample
public class LambdaExample {
public static void main(String[] args) {
		
    Person person = new Person();
		
    person.action((x,y)->{
          double result = x + y;
	  return result;
    });
		
    person.action((x,y)->x+y);
		
		
    person.action((x,y)-> sum(x, y));
     	}
	
    public static double sum(double x , double y) {
     	return (x+y);
    }

}

result: 14.0
result: 14.0
result: 14.0

Discussion