HTML5,CSS3,js
95424 ワード
HTML5,CSS3,js
html5
html基本構造
1.html 5ドキュメントの基本構造
html5
2.headでよく使われるラベル<title></title>
<meta/>
<link/>
3.Webアイコンのコードを追加<link rel="icon" href="img/icon.jpg"/>
4.一般的な文字セット符号化フォーマットGB 2312、GBK、UTF-8 5.metaラベルの共通属性コードcharset、http-equiv+content、name
ブロックレベルラベルと行レベルラベル
1.一般的なリスト1.
<ul>
<li></li>
</ul>
2.
<ol>
<li></li>
</ol>
3.
<dl>
<dt></dt>
<dd></dd>
</dl>
2.一般的なブロックレベルラベル <div></div>
<br/>
<p></p>
<h1></h1>...<h6></h6>
<ul><li></li></ul>
<dl></dl>
3.一般的な行レベルラベル ![ ]()
<a></a>
<span></span>
<strong></strong>
<em></em>
<i></i>
<b></b>
4.imgタグの常用属性及び作用src属性:参照ピクチャの経路height属性:ピクチャの高さwidth属性:ピクチャの幅title属性:ピクチャのタイトル、マウスでピクチャに表示する文字alt属性:ピクチャが表示できないときの文字5.aラベルの共通属性および役割href属性:リンクされたアドレスtarget属性:selfは現在のページで新しいページを開きます.blankは新しいウィンドウで新しいページを開く6.アンカーリンクの設定
1， ：
<a name="top"></a>
2，
<a href="#top"></a>
1， ：
<a name="top"></a>
2，
<a href="index.html#top"></a>
7.html 5新規構造ラベル <section></section>
<article></article>
<header></header>
<footer></footer>
<nav></nav>
<aside></aside>
<canvas></canvas>
<video></video>
<audio></audio>
8.ブロックレベルラベルと行レベルラベルの違い
区別する
ブロックレベルラベル
行レベルラベル
改行するかどうか
はい
いいえ
幅
100%
コンテンツによって決定
属性の設定
できる
いけません
html 5表
1.表の基本構造 <table>
<tr>
<th> </th>
</tr>
<tr>
<td> 1</td>
</tr>
</table>
2.表の属性
ツールバーの
意味
属性値
border
表の枠線
数値
width
表の幅
数値
height
表の高さ
数値
bgcolor
表の背景色
カラー値
bordercolor
表の枠線の色
カラー値
cellspacing
表のセル間隔
数値
cellpadding
表のセル内余白
数値
align
表の配置プロパティ
オプションcenter,left,right
2.行列(セル)の属性(横行数列)
ツールバーの
意味
属性値
width
セルの幅
数値
height
セルの高さ
数値
bgcolor
セルの背景色
カラー値
align
セルの内容の水平方向の配置プロパティ
オプションcenter,left,right
valign
セルの内容の垂直配置プロパティ
オプションcenter,top,bottom
colspan
セルの行間属性
数値
rowspan
セルの列間属性
数値
表のプロパティが行列のプロパティと競合する場合は、行列のプロパティ(近接者優先)
区別する
表
セル＃セル＃
align属性制御位置
ブラウザの表示位置
セル内のテキストの配置
alignプロパティが文字の配置に影響するかどうか
いいえ
はい
html 5フォーム
1.フォームの共通属性action:フォームから送信サーバアドレスmethod:getとpost enctypeを含むフォームからデータを送信する方法:アプリケーション/x-www-form-urlencodeのデフォルト値multipart/form-dataが文字符号化されず、ファイルアップロードtext/plainがスペースを「+」に変換し、電子メールを送信する2.postとgetメソッドの違い
区別する
post
get
セキュリティ
安全
安全でない
データ転送形式
アドレスバーに表示しない
アドレスバーに表示
データサイズの制限
制限なし
制限
3.フォームの共通ラベル
<input type="" name="">
<select>
<option></option>
</select>
<textarea></textarea>
<button></button>
<fieldset></fieldset>
4.input共通属性type属性、name属性、value属性、placeholder属性、tabindex属性、checked属性、disabled属性(この属性のデータはフォームに転送されない)、hidden属性5.inputのtype属性分類text:テキスト入力ボックスpassword:パスワード入力ボックスradio:ラジオボタンcheckbox:チェックボタンfile:ファイルアップロードボタンsubmit:フォームコミットボタンreset:リセットボタンimage:グラフィックコミットボタン6.selectラベルのプロパティmultipe="mulpite"selectコントロールは、ドロップダウンリストのスクロールバー7を表す複数選択size="1"である.html 5新規要素 1.
<input type="text" name="" list="list">
<datalist id="list">
<option></option>
</datalist>
2. input
<input type="color" name="">
<input type="date" name="">
<input type="email" name="">
<input type="number" name="">
<input type="range" name="">
<input type="search" name="">
css3
cssの使い方
1.cssを適用する3つの方法 1.
<a style="color:red;"></a>
2.
<style>
div{
color:red;
}
</style>
3.
<link ref="stylesheet" type="text/css" href="css/style.css"/>
2.cssセレクタ ：*{}
：div{}
：.class{}
id ：#id{}
：div .class{}
：div > ul{}
：.list#id{}
：.list,#id{}
：a:hover{}
3.一般的な擬似クラス状態link:非アクセス状態visited:アクセス状態hover:要素にマウスを浮かべるときactive:focusをマウスポイントで離さない:フォーカスを取得するとき!importantは変更できないスタイルプロパティを表します
css共通プロパティ
1.テキスト属性 div{
font-family:'Microsoft Yahei'; /* */
font-style:normal/italic;/* */
font-weight:bold/lighter/100~900;/* */
font-size:10px/10%; /* */
color: red/ #FFFFFF /* */
opacity:0~1;/* 0 ，1 */
line-height:10px;/* */
text-align:left/center/right; /* */
letter-spacing:10px;/* */
text-decoration:underline/line-through/overline/none;/* */
overflow:auto/scroll/hidden;/* ， / / */
text-overflow:clip/ellipsis;/* ， / ... */
white-space:normal/nowrap/pre;/* ， / / */
text-shadow:5px 6px 6px blue;/* / / / */
text-indent:10px;/* */
-webkit-text-stroke:2px yellow;/* */
font:italic bold 75%/1.8 'Microsoft Yahei';(font:font-style font-weight font-size/line-height font-family)
}
2.背景属性 div{
background-color:red;/* */
background-image:url(../image/share.jpg);/* */
background-repeat:no-repeat/repeat/repeat-x/repeat-y;/* ， / / / */
background-size:200px/contain/cover;/* ， / （ ）/ （ ）*/
background-position:left/right/top/bottom/center/50px -50px;/* */
background-origin:border-box/padding-box/content-box;/* / / */
background-clip:border-box/padding-box/content-box;/* */
background-attachment:scroll/fixed;/* */
background:red url(../image/share.jpg) no-repeat fixed 50px -50px;/* ，color image repeat attachment position */
}
3.ハイパーリンク4つの状態a:link未アクセスa:visitedアクセスa:hoverマウス滞留a:activeクリックハイパーリンク下線a{text-decoration:none;
css 3の遷移と変換
1.遷移transition div{
transition:property duration timing-function delay; /* */
}
transition-timing-function ：ease( ， )/linear( )/ease-in( )/ease-out( )/ease-in-out( )
2.一般的な変換属性値はtransform:定義要素から2 Dまたは3 Dへの変換transform-origin:変換要素の位置を変更する
css 3のアニメーションプロパティとマルチカラムプロパティ
1.アニメーション属性animation 2.複数列属性columns
cssボックスモデルとフローティング位置決め
1.ボックスモデルボックスモデル構造内から外へ順にcontent、padding、border、margin margin:外からborder:枠線padding:内マージン margin:0 auto；/* */
border-style: ；/* ：none ，hidden ，dotted ，dashed ，solid ，double */
border-width: ；/* ：thin ，medium ，thick ，10px */
border-color: ; /* */
padding: ; /* px*/
ボックスモデル関連属性は次のとおりです. overflow:visible/auto/scroll/hidden; /* */
outline:10px;/* */
box-shadow:x y ; /* */
border-radius: 8 ;/* */
border-image: / (stretch ,round ,repeat );/* 4 */
2.フローティング float:left/right/none;/* / / */
3.位置決め position:relative/absolute/fixed/static;/* / / / */
4.要素の積層順 z-index:10px;/* ，>0 */
モバイル開発cssスタイル要件
1.viewportビューポート <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
width=device-width /* */
initial-scale=1.0 /* */
maximum-scale=1 /* */
minimum-scale=1 /* */
user-scalable=no /* */
js
JAvascriptベース
1.ページにjavascriptを使う3つの方法 1.html
<button onclick="javascript:alert(1);"> </button>
2.html
<script>
function showMsg(){
alert('1')
}
</script>
3. javascript
<script src="js/act.js"></script>
2.javascript変数の命名規範は数字で始まることができなくて、大文字と小文字を区別して、小さいラクダの峰の命名法は例えば:helloJavaScript、ハンガリーの命名法hello_java_script 3.JAvascript変数のデータ型 1.undefined
2.null
3.boolean
4.number
5.string
6.object
4.javascriptの変数関数1.Number() /* */
Number("111") /* 111*/
Number("") /* 0*/
Number("111a") /* NaN*/
Number(true) /* 1*/
Number(false) /* 0*/
Number(null) /* 0*/
Number(undefined) /* NaN*/
2.isNaN() /* */
isNaN("111") /* fasle*/
isNaN("") /* fasle*/
isNaN("111q") /* true*/
isNaN(false) /* fasle*/
3.parseInt() /* , string ， NaN*/
parseInt("") /* NaN*/
parseInt("111.11") /* 111*/
parseInt("111.1a") /* 111*/
parseInt("a111.11") /* NaN*/
4.parseFloat() /* , string ， NaN*/
parseFloat('123.11a') /* 123.11*/
parseFloat('a123.11a') /* NaN*/
5.typeof() /* */
typeof('1111')
typeof '1111'
6.document.write() /* */
7.alert() /* */
8.prompt(' ',' ') /* */
9.confirm() /* */
10.console.log() /* */
5.javascriptのコメント //
/* */
/**
*
*/
6.javascriptの演算子1.
+、-、*、/、%、++、--
2.
=、+=、-=、*=、/=、%=
3.
==、===、!=、>、<、>=、<=
4.
&&、||、!
5.
1? 2: 3 /* 1 true 2， false 3*/
7.javascriptのプロセス制御文1.if
if(){
}
if-else
if(){
}else{
}
2. if
if(){
}else if(){
}else{
}
3. if
if(){
if(){
}
}else{
}
4.switch-case
switch( ){
case 1:
1;
break;
default:
n;
break;
}
5.while
while(true){
}
6.do-while
do{
}while(true)
7.for
for(var i=0;i<5;i++){
}
8.for-in
var arr=[1,2,3,4]
for(item in arr){
}
9.
break:
continue: ，
return:
JAvascript関数
1.匿名関数の宣言 1.
window.onload-function(){
}
2.
var func=function(){}
func() /* */
3.
!function(num){
}(1)
(function(num){
})(1) /* */
(function(num){
})(1)
4. arguments.callee()
BOM
1.windowオブジェクトのプロパティ screen
history
location url
navigator
document
frames
2.windowの常用方法 alert()
window.open()
window.close()
window.confirm()
window.prompt()
setTimeout() n ，
clearTimeout()
setInterval() n
clearInterval()
location.href
location.protocol http:// https:/
location.host +
location.hostname
location.port
location.pathname
location.search ?
location.hash #
location.reload()
location.replace() ,
location.assign() ,
history.length
history.back()
history.forward()
history.go() :history.go(1), :history.go(-1)
navigator.userAgent
window.onload
window.focus()
window.blur()
screen.availHeight() （ windows ）
screen.availWidth() （ windows ）
DOM
1.操作要素ノード getElementById() id
getElementByName() name
getElementByTagName()
getElementByClassName() css
querySelector() css
querySelectorAll() css
2.要素スタイルの変更 className
style
style.cssText
3.階層ノードの取得 childNodes/children
firstChild/firstElementChild
lastChild/lastElementChild
parentNode
previousSibling/previousElementSibling
nextSibling/nextElementSibling
attributes
4.新規ノードの作成 createElement()
insterBefore()
cloneNode()
appendChild()
removeChild()
replaceChild()
5.表オブジェクト rows
insterRow()
deleteRow()
cells
rowIndex
insterCell()
deleteCell()
6.documentオブジェクトセット document.all
document.forms
document.links
document.images
document.anchors
document.body
document.cookie
document.domain
document.referrer URL
document.URL URL
7.element(要素)オブジェクトelement=document.getElementById(‘id’) element.attributes
element.childNodes
element.className
element.clientWidth
element.offsetWidth
element.scrollWidth
element.contentEditable
element.dir
element.firstChild
element.lastChild
element.innerHTML
element.textContent
element.style
element.nextSibling
element.previousSibling
element.appendChild()
element.insertBefore()
element.cloneNode()
element.getAttribute()
element.setAttribute()
element.removeAttribute()
element.getAttributeNode()
element.setAttributeNode()
element.removeAttributeNode()
element.removeChild()
element.replaceChild()
JAvascriptイベント
1.
onclick
ondbclick
onmouseover
onmouseout
onmousemove
onmousedown , clientX,clientY,screenX,screenY X Y
onmouseup
2.
onkeydown
onkeypress
onkeyup
3.html
onload
onfocus
onblur
onselect
onchange
onsubmit
onscroll
onresize
4.
btn.addEventListener('click',function(){},false/true)
btn.removeEventListener('click',function(){},false/true)
配列とオブジェクト
1.配列オブジェクトのメソッド delete arr[n] /* n */
arr.push() /* */
arr.unshift() /* 0 */
arr.pop() /* */
arr.shift() /* 0 */
arr.join(',') /* , */
arr.concat(arr1) /* */
arr.reverse() /* */
arr.slice(1,2) /* ， ( )*/
arr.sort(function(a,b){
return a-b; /* */
return b-a; /* */
})
arr.splice(2,1) /* ， ( )*/
arr.indexOf('name') /* name ， -1， -1*/
arr.forEach(function(item,index){
}) /* ， */
arr.map(function(item,index){
}) /* ， */
2.Numberの方法 num1.toString() /* */
num1.toFixed(n) /* ， n */
num1.valueOf() /* */
3.Stringの方法 str.length /* */
str.charAt(n) /* n */
str.indexOf() /* */
str.substring(1,n) /* 1 n ， ， */
str.replace('a','') /* a */
str.split(',') /* */
4.Dateの方法 var date=new Date()
date.getFullYear() /* 4 */
date.getMonth() /* 0~11*/
date.getDate() /* 1~31*/
date.getDay() /* 0~6*/
date.getHours() /* 0~23*/
date.getMinutes() /* 0~59*/
date.getSeconds() /* 0~59*/
date.getTime() /* 1000 */
date.getTimezoneOffset()/* */
5.Mathの方法 Math.ceil(x) /* */
Math.floor(x) /* */
Math.min(x,y) /* */
Math.max(x,y) /* */
Math.pow(x,y) /*x y */
Math.random() /* 0~1 */
Math.round(x) /* */
Math.sqrt(x) /*x */
6.オブジェクトの宣言と呼び出し
var obj={
key:val,
func:function(){
}
}
obj.key/obj['key']
obj.func()/obj['func']()
delete obj.key
7.閉パッケージの概念は、他の関数の内部変数を読み取ることができる関数を指す.function func(){
num=10;
}
func();
console.log(num) //10
8.継承 call(this, 1,..., n)
apply(this, 1,..., n)
9.プロトタイプとプロトタイプチェーン prototype
__proto__
10.正規表現
test() // /^[a-zA-Z0-9]{4,10}$/.test(str) 4~10
exec()
//g
//i
//m
.
\w ：[A-Za-z0-9]
\W ：[^A-Za-z0-9]
\d ：[0-9]
\D ：[^0-9]
\s
\S
^
$
| ：x|y x y
()
[]
[^]
{x} x
{x,} x n
{x,y} x y y
* 0 ：{0,}
+ 1 ：{1,}
? 0 1 ：{0,1}
Cookie
1.特徴の大きさの制限:数量は最大300個、各は4 kbを超えない、各ウェブサイトの数量は20個を超えないドメインを超えない:ドメイン間使用の時効性を許さない:期限切れの安全性がある:改ざんすることができる2.用途記録ユーザ情報は、登録情報3を保存する.使用 1. cookie
document.cookie='name=1';
document.write(document.cookie)
2. cookie
function setCookie(key,value,time){
var endTime=new Date();
endTime.setTime(endTime.getTime()+time*60*1000);
var gmTime=endTime.toGMTString();
var value=escape(value);
document.cookie=key+"="+value+";expires="+gmTime;
}
setCookie('name','Tom',1);
document.write(document.cookie);
3. cookie
function getCookie(key) {
var reg=new RegExp(key+"=([^;]*)");
var arr=document.cookie.match(reg);
if (!arr) return null;
return unescape(arr[1]);
}
var value=getCookie('name');
alert(value);
4. cookie
function delCookie(key) {
var endTime=new Date();
endTime.setTime(endTime.getTime()-1);
var gmTime=endTime.toGMTString();
document.cookie=key+"=null;expires="+gmTime;
}
delCookie('name');
document.write(document.cookie);
jsデータ型変換の注意事項
1.null == undefined true
2."3"==3 true
3.false==0 true true==1 true
4.NaN==NaN false
jsのモジュール Truck
(function(window){
'use strict';
var App=window.App || {};
function Truck(){
this.data={};
}
Truck.prototype.add=function(key,val){
this.data[key]=val;
}
App.Truck=Truck;
window.App=App;
})(window)
var truck=new App.Truck();
truck.add('222','000');
console.log(truck.data);
html5
<title></title>
<meta/>
<link/>
<link rel="icon" href="img/icon.jpg"/>
1.
<ul>
<li></li>
</ul>
2.
<ol>
<li></li>
</ol>
3.
<dl>
<dt></dt>
<dd></dd>
</dl>
<div></div>
<br/>
<p></p>
<h1></h1>...<h6></h6>
<ul><li></li></ul>
<dl></dl>
![ ]()
<a></a>
<span></span>
<strong></strong>
<em></em>
<i></i>
<b></b>
1， ：
<a name="top"></a>
2，
<a href="#top"></a>
1， ：
<a name="top"></a>
2，
<a href="index.html#top"></a>
<section></section>
<article></article>
<header></header>
<footer></footer>
<nav></nav>
<aside></aside>
<canvas></canvas>
<video></video>
<audio></audio>
<table>
<tr>
<th> </th>
</tr>
<tr>
<td> 1</td>
</tr>
</table>
<input type="" name="">
<select>
<option></option>
</select>
<textarea></textarea>
<button></button>
<fieldset></fieldset>
1.
<input type="text" name="" list="list">
<datalist id="list">
<option></option>
</datalist>
2. input
<input type="color" name="">
<input type="date" name="">
<input type="email" name="">
<input type="number" name="">
<input type="range" name="">
<input type="search" name="">
cssの使い方
1.cssを適用する3つの方法
1.
<a style="color:red;"></a>
2.
<style>
div{
color:red;
}
</style>
3.
<link ref="stylesheet" type="text/css" href="css/style.css"/>
2.cssセレクタ
：*{}
：div{}
：.class{}
id ：#id{}
：div .class{}
：div > ul{}
：.list#id{}
：.list,#id{}
：a:hover{}
3.一般的な擬似クラス状態link:非アクセス状態visited:アクセス状態hover:要素にマウスを浮かべるときactive:focusをマウスポイントで離さない:フォーカスを取得するとき!importantは変更できないスタイルプロパティを表します
css共通プロパティ
1.テキスト属性
div{
font-family:'Microsoft Yahei'; /* */
font-style:normal/italic;/* */
font-weight:bold/lighter/100~900;/* */
font-size:10px/10%; /* */
color: red/ #FFFFFF /* */
opacity:0~1;/* 0 ，1 */
line-height:10px;/* */
text-align:left/center/right; /* */
letter-spacing:10px;/* */
text-decoration:underline/line-through/overline/none;/* */
overflow:auto/scroll/hidden;/* ， / / */
text-overflow:clip/ellipsis;/* ， / ... */
white-space:normal/nowrap/pre;/* ， / / */
text-shadow:5px 6px 6px blue;/* / / / */
text-indent:10px;/* */
-webkit-text-stroke:2px yellow;/* */
font:italic bold 75%/1.8 'Microsoft Yahei';(font:font-style font-weight font-size/line-height font-family)
}
2.背景属性
div{
background-color:red;/* */
background-image:url(../image/share.jpg);/* */
background-repeat:no-repeat/repeat/repeat-x/repeat-y;/* ， / / / */
background-size:200px/contain/cover;/* ， / （ ）/ （ ）*/
background-position:left/right/top/bottom/center/50px -50px;/* */
background-origin:border-box/padding-box/content-box;/* / / */
background-clip:border-box/padding-box/content-box;/* */
background-attachment:scroll/fixed;/* */
background:red url(../image/share.jpg) no-repeat fixed 50px -50px;/* ，color image repeat attachment position */
}
3.ハイパーリンク4つの状態a:link未アクセスa:visitedアクセスa:hoverマウス滞留a:activeクリックハイパーリンク下線a{text-decoration:none;
css 3の遷移と変換
1.遷移transition
div{
transition:property duration timing-function delay; /* */
}
transition-timing-function ：ease( ， )/linear( )/ease-in( )/ease-out( )/ease-in-out( )
2.一般的な変換属性値はtransform:定義要素から2 Dまたは3 Dへの変換transform-origin:変換要素の位置を変更する
css 3のアニメーションプロパティとマルチカラムプロパティ
1.アニメーション属性animation 2.複数列属性columns
cssボックスモデルとフローティング位置決め
1.ボックスモデルボックスモデル構造内から外へ順にcontent、padding、border、margin margin:外からborder:枠線padding:内マージン
margin:0 auto；/* */
border-style: ；/* ：none ，hidden ，dotted ，dashed ，solid ，double */
border-width: ；/* ：thin ，medium ，thick ，10px */
border-color: ; /* */
padding: ; /* px*/
ボックスモデル関連属性は次のとおりです.
overflow:visible/auto/scroll/hidden; /* */
outline:10px;/* */
box-shadow:x y ; /* */
border-radius: 8 ;/* */
border-image: / (stretch ,round ,repeat );/* 4 */
2.フローティング
float:left/right/none;/* / / */
3.位置決め
position:relative/absolute/fixed/static;/* / / / */
4.要素の積層順
z-index:10px;/* ，>0 */
モバイル開発cssスタイル要件
1.viewportビューポート
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
width=device-width /* */
initial-scale=1.0 /* */
maximum-scale=1 /* */
minimum-scale=1 /* */
user-scalable=no /* */
js
JAvascriptベース
1.ページにjavascriptを使う3つの方法 1.html
<button onclick="javascript:alert(1);"> </button>
2.html
<script>
function showMsg(){
alert('1')
}
</script>
3. javascript
<script src="js/act.js"></script>
2.javascript変数の命名規範は数字で始まることができなくて、大文字と小文字を区別して、小さいラクダの峰の命名法は例えば:helloJavaScript、ハンガリーの命名法hello_java_script 3.JAvascript変数のデータ型 1.undefined
2.null
3.boolean
4.number
5.string
6.object
4.javascriptの変数関数1.Number() /* */
Number("111") /* 111*/
Number("") /* 0*/
Number("111a") /* NaN*/
Number(true) /* 1*/
Number(false) /* 0*/
Number(null) /* 0*/
Number(undefined) /* NaN*/
2.isNaN() /* */
isNaN("111") /* fasle*/
isNaN("") /* fasle*/
isNaN("111q") /* true*/
isNaN(false) /* fasle*/
3.parseInt() /* , string ， NaN*/
parseInt("") /* NaN*/
parseInt("111.11") /* 111*/
parseInt("111.1a") /* 111*/
parseInt("a111.11") /* NaN*/
4.parseFloat() /* , string ， NaN*/
parseFloat('123.11a') /* 123.11*/
parseFloat('a123.11a') /* NaN*/
5.typeof() /* */
typeof('1111')
typeof '1111'
6.document.write() /* */
7.alert() /* */
8.prompt(' ',' ') /* */
9.confirm() /* */
10.console.log() /* */
5.javascriptのコメント //
/* */
/**
*
*/
6.javascriptの演算子1.
+、-、*、/、%、++、--
2.
=、+=、-=、*=、/=、%=
3.
==、===、!=、>、<、>=、<=
4.
&&、||、!
5.
1? 2: 3 /* 1 true 2， false 3*/
7.javascriptのプロセス制御文1.if
if(){
}
if-else
if(){
}else{
}
2. if
if(){
}else if(){
}else{
}
3. if
if(){
if(){
}
}else{
}
4.switch-case
switch( ){
case 1:
1;
break;
default:
n;
break;
}
5.while
while(true){
}
6.do-while
do{
}while(true)
7.for
for(var i=0;i<5;i++){
}
8.for-in
var arr=[1,2,3,4]
for(item in arr){
}
9.
break:
continue: ，
return:
JAvascript関数
1.匿名関数の宣言 1.
window.onload-function(){
}
2.
var func=function(){}
func() /* */
3.
!function(num){
}(1)
(function(num){
})(1) /* */
(function(num){
})(1)
4. arguments.callee()
BOM
1.windowオブジェクトのプロパティ screen
history
location url
navigator
document
frames
2.windowの常用方法 alert()
window.open()
window.close()
window.confirm()
window.prompt()
setTimeout() n ，
clearTimeout()
setInterval() n
clearInterval()
location.href
location.protocol http:// https:/
location.host +
location.hostname
location.port
location.pathname
location.search ?
location.hash #
location.reload()
location.replace() ,
location.assign() ,
history.length
history.back()
history.forward()
history.go() :history.go(1), :history.go(-1)
navigator.userAgent
window.onload
window.focus()
window.blur()
screen.availHeight() （ windows ）
screen.availWidth() （ windows ）
DOM
1.操作要素ノード getElementById() id
getElementByName() name
getElementByTagName()
getElementByClassName() css
querySelector() css
querySelectorAll() css
2.要素スタイルの変更 className
style
style.cssText
3.階層ノードの取得 childNodes/children
firstChild/firstElementChild
lastChild/lastElementChild
parentNode
previousSibling/previousElementSibling
nextSibling/nextElementSibling
attributes
4.新規ノードの作成 createElement()
insterBefore()
cloneNode()
appendChild()
removeChild()
replaceChild()
5.表オブジェクト rows
insterRow()
deleteRow()
cells
rowIndex
insterCell()
deleteCell()
6.documentオブジェクトセット document.all
document.forms
document.links
document.images
document.anchors
document.body
document.cookie
document.domain
document.referrer URL
document.URL URL
7.element(要素)オブジェクトelement=document.getElementById(‘id’) element.attributes
element.childNodes
element.className
element.clientWidth
element.offsetWidth
element.scrollWidth
element.contentEditable
element.dir
element.firstChild
element.lastChild
element.innerHTML
element.textContent
element.style
element.nextSibling
element.previousSibling
element.appendChild()
element.insertBefore()
element.cloneNode()
element.getAttribute()
element.setAttribute()
element.removeAttribute()
element.getAttributeNode()
element.setAttributeNode()
element.removeAttributeNode()
element.removeChild()
element.replaceChild()
JAvascriptイベント
1.
onclick
ondbclick
onmouseover
onmouseout
onmousemove
onmousedown , clientX,clientY,screenX,screenY X Y
onmouseup
2.
onkeydown
onkeypress
onkeyup
3.html
onload
onfocus
onblur
onselect
onchange
onsubmit
onscroll
onresize
4.
btn.addEventListener('click',function(){},false/true)
btn.removeEventListener('click',function(){},false/true)
配列とオブジェクト
1.配列オブジェクトのメソッド delete arr[n] /* n */
arr.push() /* */
arr.unshift() /* 0 */
arr.pop() /* */
arr.shift() /* 0 */
arr.join(',') /* , */
arr.concat(arr1) /* */
arr.reverse() /* */
arr.slice(1,2) /* ， ( )*/
arr.sort(function(a,b){
return a-b; /* */
return b-a; /* */
})
arr.splice(2,1) /* ， ( )*/
arr.indexOf('name') /* name ， -1， -1*/
arr.forEach(function(item,index){
}) /* ， */
arr.map(function(item,index){
}) /* ， */
2.Numberの方法 num1.toString() /* */
num1.toFixed(n) /* ， n */
num1.valueOf() /* */
3.Stringの方法 str.length /* */
str.charAt(n) /* n */
str.indexOf() /* */
str.substring(1,n) /* 1 n ， ， */
str.replace('a','') /* a */
str.split(',') /* */
4.Dateの方法 var date=new Date()
date.getFullYear() /* 4 */
date.getMonth() /* 0~11*/
date.getDate() /* 1~31*/
date.getDay() /* 0~6*/
date.getHours() /* 0~23*/
date.getMinutes() /* 0~59*/
date.getSeconds() /* 0~59*/
date.getTime() /* 1000 */
date.getTimezoneOffset()/* */
5.Mathの方法 Math.ceil(x) /* */
Math.floor(x) /* */
Math.min(x,y) /* */
Math.max(x,y) /* */
Math.pow(x,y) /*x y */
Math.random() /* 0~1 */
Math.round(x) /* */
Math.sqrt(x) /*x */
6.オブジェクトの宣言と呼び出し
var obj={
key:val,
func:function(){
}
}
obj.key/obj['key']
obj.func()/obj['func']()
delete obj.key
7.閉パッケージの概念は、他の関数の内部変数を読み取ることができる関数を指す.function func(){
num=10;
}
func();
console.log(num) //10
8.継承 call(this, 1,..., n)
apply(this, 1,..., n)
9.プロトタイプとプロトタイプチェーン prototype
__proto__
10.正規表現
test() // /^[a-zA-Z0-9]{4,10}$/.test(str) 4~10
exec()
//g
//i
//m
.
\w ：[A-Za-z0-9]
\W ：[^A-Za-z0-9]
\d ：[0-9]
\D ：[^0-9]
\s
\S
^
$
| ：x|y x y
()
[]
[^]
{x} x
{x,} x n
{x,y} x y y
* 0 ：{0,}
+ 1 ：{1,}
? 0 1 ：{0,1}
Cookie
1.特徴の大きさの制限:数量は最大300個、各は4 kbを超えない、各ウェブサイトの数量は20個を超えないドメインを超えない:ドメイン間使用の時効性を許さない:期限切れの安全性がある:改ざんすることができる2.用途記録ユーザ情報は、登録情報3を保存する.使用 1. cookie
document.cookie='name=1';
document.write(document.cookie)
2. cookie
function setCookie(key,value,time){
var endTime=new Date();
endTime.setTime(endTime.getTime()+time*60*1000);
var gmTime=endTime.toGMTString();
var value=escape(value);
document.cookie=key+"="+value+";expires="+gmTime;
}
setCookie('name','Tom',1);
document.write(document.cookie);
3. cookie
function getCookie(key) {
var reg=new RegExp(key+"=([^;]*)");
var arr=document.cookie.match(reg);
if (!arr) return null;
return unescape(arr[1]);
}
var value=getCookie('name');
alert(value);
4. cookie
function delCookie(key) {
var endTime=new Date();
endTime.setTime(endTime.getTime()-1);
var gmTime=endTime.toGMTString();
document.cookie=key+"=null;expires="+gmTime;
}
delCookie('name');
document.write(document.cookie);
jsデータ型変換の注意事項
1.null == undefined true
2."3"==3 true
3.false==0 true true==1 true
4.NaN==NaN false
jsのモジュール Truck
(function(window){
'use strict';
var App=window.App || {};
function Truck(){
this.data={};
}
Truck.prototype.add=function(key,val){
this.data[key]=val;
}
App.Truck=Truck;
window.App=App;
})(window)
var truck=new App.Truck();
truck.add('222','000');
console.log(truck.data);
1.html
<button onclick="javascript:alert(1);"> </button>
2.html
<script>
function showMsg(){
alert('1')
}
</script>
3. javascript
<script src="js/act.js"></script>
1.undefined
2.null
3.boolean
4.number
5.string
6.object
1.Number() /* */
Number("111") /* 111*/
Number("") /* 0*/
Number("111a") /* NaN*/
Number(true) /* 1*/
Number(false) /* 0*/
Number(null) /* 0*/
Number(undefined) /* NaN*/
2.isNaN() /* */
isNaN("111") /* fasle*/
isNaN("") /* fasle*/
isNaN("111q") /* true*/
isNaN(false) /* fasle*/
3.parseInt() /* , string ， NaN*/
parseInt("") /* NaN*/
parseInt("111.11") /* 111*/
parseInt("111.1a") /* 111*/
parseInt("a111.11") /* NaN*/
4.parseFloat() /* , string ， NaN*/
parseFloat('123.11a') /* 123.11*/
parseFloat('a123.11a') /* NaN*/
5.typeof() /* */
typeof('1111')
typeof '1111'
6.document.write() /* */
7.alert() /* */
8.prompt(' ',' ') /* */
9.confirm() /* */
10.console.log() /* */
//
/* */
/**
*
*/
1.
+、-、*、/、%、++、--
2.
=、+=、-=、*=、/=、%=
3.
==、===、!=、>、<、>=、<=
4.
&&、||、!
5.
1? 2: 3 /* 1 true 2， false 3*/
1.if
if(){
}
if-else
if(){
}else{
}
2. if
if(){
}else if(){
}else{
}
3. if
if(){
if(){
}
}else{
}
4.switch-case
switch( ){
case 1:
1;
break;
default:
n;
break;
}
5.while
while(true){
}
6.do-while
do{
}while(true)
7.for
for(var i=0;i<5;i++){
}
8.for-in
var arr=[1,2,3,4]
for(item in arr){
}
9.
break:
continue: ，
return:
1.
window.onload-function(){
}
2.
var func=function(){}
func() /* */
3.
!function(num){
}(1)
(function(num){
})(1) /* */
(function(num){
})(1)
4. arguments.callee()
screen
history
location url
navigator
document
frames
alert()
window.open()
window.close()
window.confirm()
window.prompt()
setTimeout() n ，
clearTimeout()
setInterval() n
clearInterval()
location.href
location.protocol http:// https:/
location.host +
location.hostname
location.port
location.pathname
location.search ?
location.hash #
location.reload()
location.replace() ,
location.assign() ,
history.length
history.back()
history.forward()
history.go() :history.go(1), :history.go(-1)
navigator.userAgent
window.onload
window.focus()
window.blur()
screen.availHeight() （ windows ）
screen.availWidth() （ windows ）
getElementById() id
getElementByName() name
getElementByTagName()
getElementByClassName() css
querySelector() css
querySelectorAll() css
className
style
style.cssText
childNodes/children
firstChild/firstElementChild
lastChild/lastElementChild
parentNode
previousSibling/previousElementSibling
nextSibling/nextElementSibling
attributes
createElement()
insterBefore()
cloneNode()
appendChild()
removeChild()
replaceChild()
rows
insterRow()
deleteRow()
cells
rowIndex
insterCell()
deleteCell()
document.all
document.forms
document.links
document.images
document.anchors
document.body
document.cookie
document.domain
document.referrer URL
document.URL URL
element.attributes
element.childNodes
element.className
element.clientWidth
element.offsetWidth
element.scrollWidth
element.contentEditable
element.dir
element.firstChild
element.lastChild
element.innerHTML
element.textContent
element.style
element.nextSibling
element.previousSibling
element.appendChild()
element.insertBefore()
element.cloneNode()
element.getAttribute()
element.setAttribute()
element.removeAttribute()
element.getAttributeNode()
element.setAttributeNode()
element.removeAttributeNode()
element.removeChild()
element.replaceChild()
1.
onclick
ondbclick
onmouseover
onmouseout
onmousemove
onmousedown , clientX,clientY,screenX,screenY X Y
onmouseup
2.
onkeydown
onkeypress
onkeyup
3.html
onload
onfocus
onblur
onselect
onchange
onsubmit
onscroll
onresize
4.
btn.addEventListener('click',function(){},false/true)
btn.removeEventListener('click',function(){},false/true)
delete arr[n] /* n */
arr.push() /* */
arr.unshift() /* 0 */
arr.pop() /* */
arr.shift() /* 0 */
arr.join(',') /* , */
arr.concat(arr1) /* */
arr.reverse() /* */
arr.slice(1,2) /* ， ( )*/
arr.sort(function(a,b){
return a-b; /* */
return b-a; /* */
})
arr.splice(2,1) /* ， ( )*/
arr.indexOf('name') /* name ， -1， -1*/
arr.forEach(function(item,index){
}) /* ， */
arr.map(function(item,index){
}) /* ， */
num1.toString() /* */
num1.toFixed(n) /* ， n */
num1.valueOf() /* */
str.length /* */
str.charAt(n) /* n */
str.indexOf() /* */
str.substring(1,n) /* 1 n ， ， */
str.replace('a','') /* a */
str.split(',') /* */
var date=new Date()
date.getFullYear() /* 4 */
date.getMonth() /* 0~11*/
date.getDate() /* 1~31*/
date.getDay() /* 0~6*/
date.getHours() /* 0~23*/
date.getMinutes() /* 0~59*/
date.getSeconds() /* 0~59*/
date.getTime() /* 1000 */
date.getTimezoneOffset()/* */
Math.ceil(x) /* */
Math.floor(x) /* */
Math.min(x,y) /* */
Math.max(x,y) /* */
Math.pow(x,y) /*x y */
Math.random() /* 0~1 */
Math.round(x) /* */
Math.sqrt(x) /*x */
var obj={
key:val,
func:function(){
}
}
obj.key/obj['key']
obj.func()/obj['func']()
delete obj.key
function func(){
num=10;
}
func();
console.log(num) //10
call(this, 1,..., n)
apply(this, 1,..., n)
prototype
__proto__
test() // /^[a-zA-Z0-9]{4,10}$/.test(str) 4~10
exec()
//g
//i
//m
.
\w ：[A-Za-z0-9]
\W ：[^A-Za-z0-9]
\d ：[0-9]
\D ：[^0-9]
\s
\S
^
$
| ：x|y x y
()
[]
[^]
{x} x
{x,} x n
{x,y} x y y
* 0 ：{0,}
+ 1 ：{1,}
? 0 1 ：{0,1}
1. cookie
document.cookie='name=1';
document.write(document.cookie)
2. cookie
function setCookie(key,value,time){
var endTime=new Date();
endTime.setTime(endTime.getTime()+time*60*1000);
var gmTime=endTime.toGMTString();
var value=escape(value);
document.cookie=key+"="+value+";expires="+gmTime;
}
setCookie('name','Tom',1);
document.write(document.cookie);
3. cookie
function getCookie(key) {
var reg=new RegExp(key+"=([^;]*)");
var arr=document.cookie.match(reg);
if (!arr) return null;
return unescape(arr[1]);
}
var value=getCookie('name');
alert(value);
4. cookie
function delCookie(key) {
var endTime=new Date();
endTime.setTime(endTime.getTime()-1);
var gmTime=endTime.toGMTString();
document.cookie=key+"=null;expires="+gmTime;
}
delCookie('name');
document.write(document.cookie);
1.null == undefined true
2."3"==3 true
3.false==0 true true==1 true
4.NaN==NaN false
Truck
(function(window){
'use strict';
var App=window.App || {};
function Truck(){
this.data={};
}
Truck.prototype.add=function(key,val){
this.data[key]=val;
}
App.Truck=Truck;
window.App=App;
})(window)
var truck=new App.Truck();
truck.add('222','000');
console.log(truck.data);