カスタムデータ属性、data-foo: "some information"ってやつは、動的に書き換え可能。 data-foo: "other information"って感じで！ 書き換えで、タグの色が変わる。red -> blue
<div id='foo' data-foo='some information'>bar</div>var el = getElementById('foo')
el.dataset.foo = "other information"<style>
div[data-foo='some information']{
background: red;
}
div[data-foo='other information']{
background: blue;
}
</style>レスポンス・ヘッダーの
Content-Type: text/html; charset=utf-8"
と同じ指令をbrowserへ送るためのhtmlタグ
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> httpレスポンスと同等(equiv)との意味。 equivalent to "Content-Type: text/html; charset=utf-8" in http response header meta http-equiv="Content-Type" content="text/html" charset=utf-8
var process = function(){
document.fm.name.value = "foo" // <= name属性はプロパティーとなる
}こいつで、下記のテキストボックスにfooを書き込める。
<form name='fm' onsubmit='return process()'>
<input type='text' name='name' value='にゅうりょくしてね'>
<input type='submit' value='送信'>
</form>ssl_moduleが動いていない事を確認
:672> ssh uk sudo apachectl -M
Loaded Modules:
core_module (static)opensslコマンドでserver.key, server.crt(証明書)を作る。出来たファイルは、/etc/ssl/private/フォルダにでも放り込んでおく。(debianの場合) 注意：CentOSの場合はapache2がhttpdであったり、色々異なる。 /etc/apache2/sites-available/default-ssl.confを編集。 gg://debian apache2 https、で検索
$ sudo a2enmod
Your choices are:
access_compat
actions
...
speling
ssl <-*
status
substitute
suexec
unique_id
userdir
usertrack
vhost_alias
xml2enc
Which module(s) do you want to enable (wildcards ok)?sslモジュールが利用可能か？確認し、
>sudo a2ensite default-ssl
>sudo a2enmod ssl
>sudo systemctl restart apache2ただし、opensslで作ったcrtファイルだと、browserが警告を出す。 注：Fully Qualified Domain Name = FQDN
HTTPS (Let's Encypt) をRaspberry Pi (Stretch)で設定
コンストラクタ関数と共に使って、メソッドを定義する時に使う。
var User = function(name, age){
this.name = name
this.age = age
}
User.prototype.getName = function(){
return this.name
}
User.prototype.getAge = function(){
return 'Age is ' + this.age
// return 'Age is "${this.age}"' // テンプレート・リテラル
}
obj = new User("foo", 1)
obj.getName() // => foo
obj.getAge() // => Age is 1固定単位ではなく、変動単位。ephemeral = はかない 以下の例では、文字サイズが徐々にデカくなる。inheriteの箇所は、body要素の値を引き継ぐ。inherite = 計算値を親要素から引き継ぐ。
<html>
<body>
はろーem, 何の略？ ephemeral unit
<p class="part1">はろー</p>
<p class="part2">はろー</p>
</body>
</html>:root {
font-size: 1.5em;
}
body {
font-size: 1.5em;
}
.part1 {
font-size: 1.5em;
}
.part2 {
font-size: inherit;
}4個(上下だけ10px, 左右は0px)
p {
margin: 10px 0 10px 0; // 上 右 下 左
}2個(上下だけ10%, 左右は0)
p {
margin: 10% 0; // 上下 右左, 親要素に対して10%
}3個の場合は、上、左右、下、1この場合は上下左右
margin-top, margin-buttomが並ぶと、大きい方が優先。
画面一杯に表示するには、ネガティブmarginを左右に設定、値には意味なし
.top-menu {
margin: 0 -100%
}lang=ja-JP, en-US, en-GB, 言語-国
親要素に対する子要素の位置をしていするtop, leftの値の原点を示す。
<p>position:static<span>staticの場合</span></p>p {position: relative;}
span {position: static;}これ何？top, right, buttom, leftの属性は無視される。
- relative: 親の内容の右下が原点
-
- absolute: 左上が原点(親がposition:static以外)
- Windowの左上(position:static, default)
⚠️
- fixed: 親関係なし、Windowの左上が原点。
◀️ 固定メニューが実現できる。
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})function Todo-item(props) {
const todo = props.todo;
return (
<li>{ todo.text }</li>
);
}class Todo-item extends Component {
constructor(props) {
super(props)
this.state = { things: null, done: null }
}
render() {
return(
<li>{ this.state.things } + { this.state.done }</li>
)}
}Vue.jsの公式サイトを見たけど、v-directiveが多くて、学習コスト多そう。 2018-08-11St追記 Reactのclassコンポーネントでは、state, life cycle methodが使える。function componentでは使えない。