webの勉強！！初心者！脱出マニュアル！！

webの勉強を、初心者から脱出するためのメモを残していきます

Webの勉強～JQuery1日目～

こんにちはメグルです！！

昨日までJavascriptを学びましたが、今日からjQueryを学んでいきます！！

とはいっても、jQueryもJavascriptであり、

ｊQueryとは、

Javascriptの

・ライブラリ

・フレームワーク

です。

 

代表的なのが、lightboxですね！！

 


Lightbox

 

本来、Javascriptで作るととてつもなくたくさんのプログラムを書かなければならないのですが、読み込むだけで取り入れられてしまうという便利なものです！！

こういったものを、「プラグイン」といいます！！

 

さて、jQueryを使うには、

javascriptのコードがたくさん書いてあるコードがあるので、そこから引き出して使っていく。

それを、読み込ませて使っていくのですが、方法は2パターンあり、一つ目が、jqueryのサイトに行きます。


jQuery

 

f:id:meglez1:20150206092616p:plain

f:id:meglez1:20150206092627p:plain

１だけコピーして、headの中に貼り付けます。

だだ、loaclの環境で動かすには、赤文字の部分を追加します。

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

 

2つ目がgoogleから取得する方法です。

Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers

f:id:meglez1:20150206093325p:plain

から、jqueryをクリック！！

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 

を読み込ませるという方法です。

 

では、実際に使っていきます！！

 

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>
</head>

<body>
<button>表示・非表示</button>
<div></div>

</body>

 

これがベースです。

ここからjqueryのコードを書いていきます。

 

<script>
$(function() {
$("button").click(function() {
$("div").show ("slow");
});
});
</script>

こう書くと、

f:id:meglez1:20150206094107p:plain

ボタンができて、

クリックすると下のようになる。

f:id:meglez1:20150206094114p:plain

ただ、これだけですが、javascriptで書くと、10行以上のコードが必要になります。

もうちょっと改造してみましょう！！

 

<script>
$(function() {
$("button").click(function() {
$("div").show ("slow", function() {
$(this).css("background", "yellow");
});
});
});
</script>

 

初めは、赤で出てきて、出終わったら、黄色になりました。

 

f:id:meglez1:20150206094621p:plain

 $(function() {　←ＨＴＭＬがロードされた時

});

 

上の中にjqueryを書いていきます。

これは省略した形です。

元々は、

$(document).ready(function {

 

});

 このような形です。

 

<body>

<h1>おはようございます！</h1>
<p>今日は2月6日です。</p>
<ul>
<li id="first">リスト１</li>
<li id="second">リスト２</li>
<li class="third">リスト３</li>
<li>リスト４</li>
</ul>
</body>

 

<script>
$(function() {
$("h1").css("background-color","blue");
$("p").css("background-color","pink");
$("#first").css("color","red");
$("#second").css("font-weight","bold");
$(".third").css("background-color","yellow");
$("#second, .third").css("text-decoration","underline");
$("li:first").css("font-size","30px");
$("li:last").css("font-size","50px");

});
</script>

 

f:id:meglez1:20150206110639p:plain

文字の変更です。

$("#first").text("文字を変更しました。");

 

で、

 

f:id:meglez1:20150206110918p:plain

 

リスト１が文字を変更しました。に変わりました。

 

 

$("#second").text($("#first").text());

 

f:id:meglez1:20150206111445p:plain

 

リスト２がリスト１に変わりました。

 prependはその要素の最初に入れることができます。

appendが後に入れることができます。

$(".third").prepend("<b>←を変更しました</b>");

$(".third").append("<b>←を変更しました</b>");

 

 before<li>   prepend        リスト     append      </li>after

 

に入ります。

 

次は、.prependTo

 

$("p").prependTo("h1");

pがh1タグに変わりました。

.appendTo()

insertBefor()

insertAfter()

 

次は属性の変更です。

 

<a href="http://www.yahoo.co.jp">ヤフージャパン</a>

 

$("a").attr("href","http://facebook.com");

 

.atterでヤフーから、フェイスブックに属性を変更しました。

()を空欄にすると

$("a").text($("a").attr("href"));

次に

$("a").removeAttr("target");

 

 

次に、

$("a").text($("a").attr("href"));
$("a").removeAttr("target");

を一つのコードにします。

メソッドチェーンというらしいです。

$("a").text($("a").attr("href")).removeAttr("target");

こう書くと続けて書けますし、処理も早くなるみたいなので、メソッドチェーンで繋げて書いていきましょう！！

 

 

イベント

・click()

・dblclick()

・mousedown()

・mouseup()

・mouseover()

・mousecount()

 

 

$(function() {
$("li").hover(function() {
$(this).css("color","blue");
},
function() {
$(this).css("color","black");
});
});

 

WEBの勉強～JavaScript4日目～

こんにちはメグルです。

 

今日のwebの勉強もjavascriptです。

 

まずは、javascriptをリンクさせる。
<script src="js/0205.js"></script>
なんか、googlechromeがくそで、全然つながらなくて全部記事が飛びました。
 
なので途中からになります。
 
それにしても、chromeは使えない。
 
 

WEBの勉強～JavaScript３日目～

こんにちは！　　メグルです！！

 

今日のwebの勉強もjavascriptです。

 

今日のJavaScriptの勉強は、ボタンをクリックする回数をアラートで表示させていくscriptと、イベントハンドラと、ニュー演算子で

明日のJavaScriptの勉強は今日の続きです。

 

<script>
var i =0;

while (i<15) {
if (i%2==0) {
document.write('<p><span class="blue">おはようございます</span></p>');
} else {
document.write('<p><span class="pink">おはようございます</span></p>');
}
i++;
}

----------------------------------------------------------------------------

for (var i = 0; i < 15; i++) {
if (i%2==0) {
document.write('<p><span class="blue">おはようございます</span></p>');
} else {
document.write('<p><span class="pink">おはようございます</span></p>');
}
}
</script>

 

次にボタンをクリックする回数をアラートで表示させていくscriptです。

 

var count = 0;
function clickCheck() {
alert("クリック回数" + count);
count++;
}
</script>

<body>
<input type="button" value="クリック" onClick="clickCheck()">
</body>

f:id:meglez1:20150204094131p:plain、

クリックを押すと、

 

f:id:meglez1:20150204094137p:plain

 

OKを押すと消えて、再度、ボタンを押すと、

 

f:id:meglez1:20150204094147p:plain

 

なります。

イベントハンドラといいます。

 

イベントハンドラの参考サイト

その１


JavaScript/DOM｜PHP & JavaScript Room

 

その２

イベントハンドラ | JavaScript プログラミング解説

 

 

 

<script>
function kinri() {
var uketori;
uketori = gankin;
for (var i = 1; i <= kikan; i++) {
uketori = uketori * (1 + rishi / 100);
}
return Math.round(uketori);
}

function calcUketori() {
var kikan, rishi, gankin;
gankin = parseInt(document.calcForm.gankin.value);//ノード
rishi = parseFloat(document.calcForm.rishi. value);
kikan = parseInt(document.calcForm.kikan.value);
document.calcForm.uketori,value = kinri(gankin, kikan, rishi);
}
</script>

 

でHTMLが

 

<body>
<form name="calcForm">
金利：<input type="text" name="rishi" size="8">％<br>
金額：<input type="text" name="gankin" size="8">円<br>
預入期間：<input type="text" name="kikan" size="3">年<br>
<input name="calc" type="button" value="計算" onclick="calcUketori()">
<input type="reset" value="クリア" ><br>
受取金額：<input type="text" name="uketori" size="15">円
</form>
</body>

 

になります。

 

次は、ニュー演算子です。

 

<script>
var str;
str = new String("あいうえお");//ニュー演算子
str = str.fontcolor("green");
str = str.link("http://www.yahoo.co.jp");
str = str.small();
str = str.italics();
document.write("<h1>");
document.write(str);
document.write("</h1>");

 

str1 = "あいいうえおかきくけこ";
document.write(str1);

</script>

 

f:id:meglez1:20150204114611p:plain

 

str1 = "あいうえおかきくけこさしすせそ";
document.write(str1);

var char;
for (var i = 0; i < str1.length; i++) {
char = str1.charAt(1);
document.write(char);
}

 

f:id:meglez1:20150204115034p:plain

 

charAt(1);は2番目を繰り返すというメソッド。

 

 

str1 = "あいうえおかきくけこさしすせそ";
/*document.write(str1);*/

var char;
for (var i = 0; i < str1.length; i++) {
char = str1.charAt(i).fontsize((i % 7) + 1);
document.write(char);
}

 

f:id:meglez1:20150204115339p:plain

 

となります。

０÷７→　　０

１÷７→　　１

２÷７→　　２

３÷７→　　３

４÷７→　　４

５÷７→　　５

６÷７→　　６

７÷７→　　０

８÷７→　　１

９÷７→　　２

１０÷７→　３

 

 

WEBの勉強～JavaScript２日目～

こんにちは！！　　メグルです！！

 今日のwebの勉強もjavascriptです。

3月にPHP/MySQLを勉強する為にECサイトを制作する。

 

ECサイトにおいて、最低限必要なものは

・カート

・商品一覧

 

繰り返し文

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>繰り返し文</title>
<script>
document.write("こんにちは！　今日は節分です。");
</script>
</head>

<body>
</body>
</html>

 

から、

 

<script>
var i;
for (i = 0;　 i < 10; 　i++) {

        ↑　　　　↑　　　↑

　初期化　　条件　　増減

document.write("こんにちは！　今日は節分です。");
}
</script>

 

i++は1ずつ増える「インクリメント」という

 

i--は１ずつ減る「デクリメント」という。

 

次は、

1 2 3 4 5 6 7と１０までfor文を使って表示させる。

 

 

<script>

for (var i = 1; i < 15; i++) {
document.write(i, "<br>");
}
</script>

 

i=i+2

右辺のiに２を足したものがiでそこからまた２が足されていく計算になります。

 

 

次に３だけ赤にするには、

もし（３の倍数なら）{

字を赤くする

}　そうじゃなかったら{

字は黒

}

 

WEBの勉強～JavaScript１日目～

 こんにちは！！　メグルです！！

 

今日から、新しい人が入ってきました。

今日のwebの勉強もはjavascriptです。

 

2月は　Javasqript

3月は　PHP MySQL

4月は　photoshop  Illustrator  Fireworks HTML/CSS

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>
document.write("<p>今日も一日よろしく！</p>");
document.write("<p>", 5 + 3, "</p>");
document.write("<p>", (3+7) * 50, "</p>");
document.bgColor = "yellow";
</script>
</head>

<body>
<h1>おはようございます</h1>
</body>
</html>

 

f:id:meglez1:20150202112729p:plain

 

f:id:meglez1:20150202114644p:plain

f:id:meglez1:20150202114651p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>

var heisei;
var seireki;
var message;

heisiei = 27;
seireki = 1988 + heisiei;
message = "平成" + heisiei + "年は西暦" + seireki + "年です。";
document.write("<p>" + message + "</p>");
alert(message);


</script>
</head>

<body>
<h1>おはようございます</h1>
</body>
</html>

 

 

<script>

var heisei;
var seireki;
var message;

heisiei = prompt("平成の年号を入力してください", 27);
seireki = 1988 + heisiei;
message = "平成" + heisiei + "年は西暦" + seireki + "年です。";
/*document.write("<p>" + message + "</p>");*/
alert(message);


</script>

f:id:meglez1:20150202115039p:plain

 

 

<script>

var heisei;
var seireki;
var message;

heisei = prompt("平成の年号を入力してください", 27);
seireki = 1988 + parseInt(heisei);
message = "平成" + heisei + "年は西暦" + seireki + "年です。";
/*document.write("<p>" + message + "</p>");*/
alert(message);


</script>

 

f:id:meglez1:20150202115829p:plain

 

 

次にウエストのサイズでメタボかどうかを測定するプログラムです。

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく！！

</script>

 

f:id:meglez1:20150202131700p:plain

 

となります。

 

次に、条件分岐のif文を使っていきます。

waistの数字が８５以上なら、メタボリック症候群の可能性が大です。と表示させてみます。

 

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく！！

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
}

</script>

 

f:id:meglez1:20150202132602p:plain

 

８５以上を入力すると、

 

f:id:meglez1:20150202132607p:plain

 

になります。

 

次に条件分岐のelse文です。８５以下ならどうなるか？

f:id:meglez1:20150202133548p:plain

 

85以下に入力すると、

f:id:meglez1:20150202133608p:plain

になります。

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく！！

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
}　else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

 

演算子の参考サイトです。

演算子/JavaScriptリファレンス

 

次に男の場合と女性の場合を分けてみる。

まずは、男性か女性かを分ける。

<script>
var valueMan = 85;//男性の基準値
var valueWoman = 90;//女性の基準値
var value;//基準値
var isMan;//男性かどうか判断する

isMan = confirm("あなたは男性ですか？");//confirmはyseかnoか（真偽地true/false）


var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく！！

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
}　else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

f:id:meglez1:20150202135332p:plain

 

<script>
var valueMan = 85;//男性の基準値
var valueWoman = 90;//女性の基準値
var value;//基準値
var isMan;//男性かどうか判断する

isMan = confirm("あなたは男性ですか？");//confirmはyseかnoか(true/false真偽値)

if (isMan) {
value = valueMan;
} else {
value = valueWoman;
}

var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく！！

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
}　else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

次は、BMI判定装置を作ってみる。

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>
var bmi;
var weight;
var height;

height = prompt("身長を入力してください。(cm)", "");
weight = prompt("体重を入力してください。(kg)", "");
height = height / 100;

bmi = weight / (height * height);

if (bmi < 18.5)
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。低体重です。");
else if (bmi >= 18.5 && bmi < 25)
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。普通です。");
else
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。肥満です。");


</script>
</head>

<body>
</body>
</html>

 

f:id:meglez1:20150202154608p:plain

 

身長を入力して、

 

f:id:meglez1:20150202154616p:plain

 

体重を入力すると、

 

f:id:meglez1:20150202154622p:plain

 

BMIがわかるようになります。

 

WEBの勉強～Sass/Ruby～

こんにちは！！　メグルです。

 

今日は、昨日の続きで、

sassの設定です。

昨日のうちに大体は終わりました。

ちなみに、rubyにsassを入れるときに、エラーになったので、下のサイトを参考にインストールしました。

インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 - 公式サポートサイト

 

 


これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG

 

実際には上のligの

tep6.実際にSassを使ってみよう！

 

からです。

 

雑学

 

 


CODEPREP -オンラインでプログラミングを学ぼう-

 

sassを使うためには、まずは、rubyをインストールする。

 

インストールする方法はいくつかあるらしいのですが、一番メジャーなのは、

ルビーインストーラーからがいいらしいです。

RubyInstaller for Windows

 

 

しっかりとrubyにsassを入れられると、下記の画面になります。

 

f:id:meglez1:20150130093348p:plain

 

そうしたら、sass -v　を入力する。

 

f:id:meglez1:20150130093532p:plain

 

これで、sassを使う準備ができました。

次にkoalaです。

 

f:id:meglez1:20150130093818p:plain

 

ちなみに、英語は最低限の知識は必要らしいです。

やはり英語のサイトが多いので、全て読める必要はないですが、大体は意味を理解できる程度のスキルは必須らしいです。

 

LESS - The Dynamic Stylesheet language

 

sassと似ていて、便利。

 ブートストラップなどで使われているらしいです。

 

まずは新しいフォルダを作成する。

 

#main {
width:600px;

p {
margin: 0 0 1em;

b {
color:#f00;
}
}
}


$red: #f00;

.notes {
color: $red;
}

#nav {
.notesArea {
border: 1px solid $red;
}
}

 

sassというデータからcssファイルに直すことをコンパイルという。

 

上のscssをcssにコンパイルすると下のようになる。

 

#main {
width: 600px;
}
#main p {
margin: 0 0 1em;
}
#main p b {
color: #f00;
}

.notes {
color: #f00;
}

#nav .notesArea {
border: 1px solid #f00;
}

/*# sourceMappingURL=style.css.map */

 

 

.sample {
border: {
top: 5px solid #ccc;
bottom: {
width: 3px;
style: doded;
color: black;
}
}
}

 

コンパイル後

 

.sample {
border: {
top: 5px solid #ccc;
bottom: {
width: 3px;
style: doded;
color: black;
}
}
}

 

$value: 50px;

.div1 {
width: $value / 2;
}
.div2 {
width: $value * 3 - 30;
}

.div3 {
width: ($value + 50) / 3;
}

 

は、

 

.div1 {
width: 25px;
}

.div2 {
width: 120px;
}

.div3 {
width: 33.33333px;
}

 

次は、継承

 

.box {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

.item {
@extend .box;
}

 

が、

 

.box, .item {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

なります。

 

さらに

.item2 {
@extend .box;
border-color: #red;
}

 

が

.box, .item, .item2 {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

.item2 {
border-color: #red;
}

 

こうなります。

とても便利ですね！！

次は、ミックスインという機能です。

 

@mixin boxstyle {
padding: 15px;
background: #999;
color: #fff;
}

.botton1 {
@include boxstyle;
}

 

が、

.botton1 {
padding: 15px;
background: #999;
color: #fff;
}

 

こうなります。

 

最初にこういうスタイルのセットがありますよと@mixinで定義する。

 

それを@includeで使っていく。

 

 

//ブレイクポイントを設定 

$bp-tablet: 1024px;

$bp-sp: 64px;
$bp-iphone: 320px;

@mixin media($media-width) {
@if $media-width == sp {
@media screen and (max-width: $bp-sp) {
@content;
}
}
@else if $media-width == iphone {
@media screen and (max-width: $bp-iphone) {
@content;
}
}
@else if $media-width == teblet {
@media screen and (max-width: $sp-tablet) {
@content;
}
}
}

#main {
float: inherit;
width: 610px;
@inclide media(tablet) {
float: none;
margin: 0 auto;
}
@include media(sp) {
width: auto;
margin: 0 10px;
}
@include media(iphone) {
width: 100px;
margin: 0;
}
}

 

が

 

#main {
float: inherit;
width: 610px;
}
@inclide media(tablet) {
#main {
float: none;
margin: 0 auto;
}
}
@media screen and (max-width: 64px) {
#main {
width: auto;
margin: 0 10px;
}
}
@media screen and (max-width: 320px) {
#main {
width: 100px;
margin: 0;
}
}

 

こうなりますね。