2018-11-02

すべての要素を対象にするセレクタの書き方

css

ベース記事

すべての要素を対象にするセレクタの書き方

通常の書き方とどう違うのか？それは＊をセレクタに書くことである。その他変わったことはない。
ちなみにcssには優先順位がある。あるセレクタに対しcssが複数ある場合には優先順位のルールが適用される。それは命令したセレクタがより直接的なcssが優先される。

css

*{
     margin : 0;
     padding : 0;
     list-style : none;   
}

上記cssの意味は、すべての空白を埋めることと、リストのアイコン設定を無しにする。

2018-11-02

css使い方

css まとめ

すべての要素を対象にするセレクタの書き方
セレクタの書き方
テキストスタイル関連
ボックスのスタイル
背景のスタイル

css使い方

種類

html内のタグに属性として直接書く方法
html内headタグ内にcssを記述する方法(インラインcss)
htmlファイルとは別にcssファイルを作り読み込ます方法(外部css)

1.html内のタグに属性として直接書く方法

cssの基本的な構文とは異なる方法で記述する。今後廃止される記述方法なので参考程度に。

.html

<h1 style="background-color: green;">cssの使い方</h1>

2.html内headタグ内にcssを記述する方法(インラインcss)

.html

<head>
    <style>
        h1{
              background-color: green;
              font-size: 100px;
            }
    </style>
</head>

3.htmlファイルとは別にcssファイルを作り読み込ます方法(外部css)

.html

<head>
    <link href="path/path" media="all" rel="stylesheet" type="text/css"
</head>

mediaはスマホの場合にcssを適用するとか端末によってcssを適用するか分けることができる。allの場合はいかなる端末でも反映させるって意味。

.css

@charset:"utf-8";
h1{
              background-color: green;
              font-size: 100px;
            }

その他importタグを使った方法もあるらしい。

2018-11-02

addEventListenerの使い方

Javascript

イベントとイベントハンドラの設定

addEventListenerの使い方

意義としてはonclick等は一つのイベントに一つのイベントハンドラしか設置できない。一つのイベントに複数のイベントハンドラを設置するときにに役に立つ。

サンプル使用例

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>ボタンクリックでコンソールログ表示とアラートの表示</title>

	</head>
	<body>
		<button id="btn" type="submit">表示する</button>

		<script>
			var btn = document.getElementById("btn");
            window.onload = function(){
            	btn.addEventListener("click", function(){
                    console.log("load成功");
            	});
                 
                btn.addEventListener("click", function(){
                    alert("load成功");
            	});

                   			}
		</script>
	</body>

2018-11-02

loadについて

Javascript

ほか関連記事

DOM操作について
イベントとイベントハンドラ

本題

loadはイベントの一つ。関連付けられた要素を読み終わったときに発生するイベント。

loadの有用性

DOM操作をすると実行タイミングがずれることでエラーになることがある。この解消に2つの方法がある。
HTML内にjavascriptを書く際に場所に注意する。onloadイベントを使う。

使用サンプル

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>loadについて</title>

	</head>
	<body>
		<button id="btn" type="submit">表示する</button>
		<ol id="blank"></ol>

		<script>
				
                                window.onload = function(){
                                console.log("load成功")   
                   			}
		</script>
	</body>

他の使い方としてはwindow.onload=function(){}のほかに要素オブジェクト.onload=function(){}の使い方もある。

2018-10-31

views.py の目的[まとめ]

Django まとめ

views.pyの要点

views.pyの目的はテンプレートにデータ（データベース情報も含む）を渡す。

ここから導けることは、views.py内で行わなければならないことは、テンプレートに渡すべき情報を選択すること、どのテンプレートに渡すかを定めること。この多くても2点を規定するに過ぎない。

テンプレートに渡すべき情報を選択すること

典型的な方法には2系統ある。
renderを使ってcontext内に表示したいデータを選択、編集し格納する方法と、クラスベースドビュー内でデータを選択、編集する方法だ。

記述の仕方：情報の選択（仮説）

テンプレートにインスタンス情報を渡す場合にはviews.pyでインスタンスを選択するコードを記述する流れに持ち込む。
おそらく鉄則らしきものが見つかったのでメモしておく。

最初にインスタンスがあるかどうかクエリセットから探す。ある場合はクエリセットから抽出する。
インスタンスがない場合にあたったときに初めてインスタンスを作成(create)する流れに持ち込む。この順番が重要だと思う。

2018-10-31

is_safe_urlのソースコード

Django

is_safe_urlについての情報がないので探してみた。
ソースコード

def is_safe_url(url, allowed_hosts, require_https=False):
    """
    Return ``True`` if the url is a safe redirection (i.e. it doesn't point to
    a different host and uses a safe scheme).

    Always return ``False`` on an empty url.

    If ``require_https`` is ``True``, only 'https' will be considered a valid
    scheme, as opposed to 'http' and 'https' with the default, ``False``.
    """
    if url is not None:
        url = url.strip()
    if not url:
        return False
    if allowed_hosts is None:
        allowed_hosts = set()
    # Chrome treats \ completely as / in paths but it could be part of some
    # basic auth credentials so we need to check both URLs.
    return (_is_safe_url(url, allowed_hosts, require_https=require_https) and
            _is_safe_url(url.replace('\\', '/'), allowed_hosts, require_https=require_https))

2018-10-31

urls.pyの使い方

Django

Django リンクについて

本題

urls.pyの役割はページ遷移させることだ。ただurls.pyの使い方は一つではないことに気が付かなかった。
少し広くなった視点をメモに残す。

1.developer側の使い方

アプリケーション作成者にとってはブラウザ上にアドレスを記述することでページ遷移させる。これはユーザー側のための設計ではない

2.ユーザ側の使い方

ユーザー側がページを遷移させる場合には、ページ上のボタンをクリックすることでページを遷移させるのが普通。ボタンをクリックさせページ遷移をするのがもう一つのurls.pyの使い方。
この使い方はhtml上にボタンを設置する。そのボタンにはurls.pyのpathの名前を記述する。そうすることでページ遷移を可能にさせている。

参考Django リンクについて

2018-10-30

post_save,pre_saveの使い分けについて[仮説]

Django

シグナルについて

どのような場面でシグナルのpost_save,pre_saveを使いわけるのか理解していない。
今のイメージを書きとどめておく。

pre_save:
class A のインスタンスaのプロパティxを変更する。プロパティxを変更すると、xに関連して他のプロパティyも変更する必要がある。
つまりa.xを変更すると、一緒にa.yも変更したいという要望がある。a.xの変更をa.save()で確定する前に、a.yの変更を差し込むってのがpre_save()の役割。
同一クラスの同一インスタンスの2要素を同時に変更したいときにpre_save()を使う？

post_save():
class Aのインスタンスaのプロパティxを変更する。この変更を確定として、別のclass Bのインスタンスの要素を変更したいときに使う？

2018-10-30

Django シグナル POST_SAVEのcreated について

Django 公開記事

created は引数

createdはpost_saveにのみ存在する引数である。これはBoolean値をとる。

レコードが作成された場合に True を返す。

どんな場面でcreatedを使うのか

post_saveが発動するのは、データオブジェクトがsave()メソッドされた後である。

このsave()はレコード(データオブジェクト)が作成されたとき、もしくはレコードが変更されたときである。createdはレコードが作成されたときにTrueを返すので、レコードの変更または作成の場合分けを行いたい時に都合が良い。

また補足としてpost_initシグナルも同じ使い方ができると考えられる。

これはModelインスタンスのinitメソッドが実行されたあとにシグナルが発行される。initメソッドはModelインスタンスが生成されたときに一回だけ実行されるのでpost_initはインスタンス生成時のみに限定することができる。

しかしながらdjango.contrib.auth.models.Userのようにユーザー登録を済ませたあとにシグナルを発行したい場合には使うことができない。なぜならUserクラスにはinitメソッドが無いからである。こういうケースにはpost_saveとcreate==Trueを使って対応していく。

if created == True :

# レコードが作成されたときに行ってほしい処理

if created == False :

# レコードが変更されたときに行ってほしい処理

2018-10-30

ランダムの文字列を作成する関数の作り方

python

条件

英数字01234567890と英字大文字からランダムに取り出して10文字の文字列を作り出す。

参考url

参考url概説

from string import ascii_uppercase, digits
import random
chars = ascii_uppercase + digits
volume = 12
random_list = []
for x in range(volume):
    random_list += random.choice(chars)

random_text = "".join(random_list)
print(random_text)

2018-10-28

イベントとイベントハンドラの設定

Javascript

ベース記事

Javascriptメモ
loadについて

イベントとイベントハンドラの設定方法の種類

２種類ある。

開始タグ内に両者を設置する方法
スクリプト内に両者を設置する方法（プロパティとして扱う）

1.開始タグ内に両者を設置する方法

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>イベントとイベントハンドラ</title>

	</head>
	<body>
		<button type="submit" onclick="show();">表示する</button>
		<ol id="blank"></ol>

		<script>
			function show(){
				var blank = document.getElementById("blank");
				var make_li = document.createElement("li");
				var text =document.createTextNode("押すと増える");
				make_li.appendChild(text);
				blank.appendChild(make_li);
			}
			
		</script>
	</body>

注意点

イベントはonclickのonを除いたもの。今回はclick。

イベントハンドラはイベントが起きた際に処理を指図するもの。今回はshow();がイベントハンドラ。
イベントとイベントハンドラが開始タグに存在しているパターンである。

2.スクリプト内に両者を設置する方法（プロパティとして扱う）

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>イベントとイベントハンドラ</title>

	</head>
	<body>
		<button id="btn" type="submit">表示する</button>
		<ol id="blank"></ol>

		<script>
				var btn = document.getElementById("btn");
			    btn.onclick = function(){
			    	var blank = document.getElementById("blank");
					var make_li = document.createElement("li");
					var text =document.createTextNode("押すと増える");
					make_li.appendChild(text);
					blank.appendChild(make_li);
								}
		</script>
	</body>

注意点

この方法はhtmlとjavascriptを区分けして書く方法。

2018-10-28

ユーザの入力値をブラウザ表示する[DOM操作]

Javascript

ベース記事

Javascriptメモ
DOM操作について

ユーザの入力値をブラウザ表示する[DOM操作]

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>フォーム内容をリストに反映</title>

	</head>
	<body>
		<label for="lists">リスト</label><br>
		<ul id="lists">
			<li>リストがここに追加される</li>
		</ul>

			<input id="content" type="text" >
			<button  type="submit" onclick="adding();" >送信</button>
		<script>
			function adding(){
				var content = document.getElementById("content") ;
				var li = document.createElement("li");
				var text = document.createTextNode(content.value);
				li.appendChild(text);
				lists.appendChild(li);
			}
		</script>
	</body>

ポイント

ユーザのフォーム入力値はdocument.getElementById()を使い、その戻り値をテキストノードとして作成する。

このときにvalueを使うとフォーム内容だけを抽出できる。valueはinnerTextみたいな扱い。

2018-10-28

Nodeを置換する

Javascript

ベース記事

Javascriptメモ
DOM操作について

Nodeを置換する方法

replaceChild()を使うと置換することができる。

大まかに言えばappendChild()を使ってノードを追加する方法とほぼ同じ。

違うところは、replaceChild()をの引数は２つあり、newNode, oldNodeの順に引数を渡さなければならない。

参考例

<!DOCTYPE html>
<html lang="utf-8">
<head>
	<meta charset="utf-8">
	<title>ノード置換</title>
</head>
<body>
	<!--ボタンを押すとリストの内容を取り替えるプログラムを書く-->
	<ul id="lists">
	<li id="curry">おいしいカレー</li>
	<li id="tako">おいしいたこやき</li>
	</ul>

	<input type="button" value="追加" onclick="replacing();">

	<script>
		function replacing(){
			var content_list = document.createElement("li");
                        var text = document.createTextNode("やさいおいしい");
			content_list.appendChild(text);
			var tako = document.getElementById("tako");
			lists.replaceChild(content_list, tako);				
	}

 	</script>
</body>
</html>