javascript前期基礎內容
阿新 • • 發佈：2018-10-11
lean 命名規範 樣式 區分大小寫 相等 spl 定義類 保留字 rom 
一、什麽是javascript？
簡述：javascript是一門解釋性並且為弱型的編程語言。
BOM：是瀏覽器腳本語言。
DOM：是文本文檔類型。
補充:在javascript中要註意大小寫並且推薦使用駝峰體(如果是單獨的樣式使用全小寫)
二、javascript在HTML中存在的方式
1、行間式:需要寫在帶有事件的標簽內
<body id="body" onload="body.style.backgroundColor=‘blue‘">
2、內聯式:需要寫在script標簽中
<body id="body">
<script>
body.style.backgroundColor
3.外聯式:需要寫在一js為後綴的js文件中並通過script標簽中的src=‘文件路徑‘來使用.
js文件:00.js body.stylebackgroundColor=‘blue‘ HTML正文; <body id=‘body‘> <script src=‘./00.js‘></script> <body>
三,解釋型語言決定js的位置
1,將script標簽中的內容放在head中代表這種js為依賴型的js庫是專門為下面提供需求的.
2,將script放在body中或放在body與HTML之間都是功能型js
<html>
<head>
<script>
var color=‘blue‘;
</script>
</head>
<body>
<div id=‘div‘>123</div>
<script>
div.style.color=color;
</script>
</body>
<script>
div.style.color=‘blue‘;
</script>
</html>四,變量的四種定義方式
在Es5中有兩種方式分別為:
var nn=100;代表的是局部變量
nn=100;代表的是全局變量
註意:在Es5中變量是沒有塊級作用域的可以通過自定義一個自調用的函數來產生塊級作用域演示如下:
(function(){ var x=10; y=20; })() alert(x):報錯 alert(y)正確
在Es6中的兩種方式分別為:
let n=10;代表的是有塊級的局部變量
const n=20;代表的有塊級的常用變量
補充:在Es6中是存在塊級作用域的如果再以以上為例的話都無法找到結果.
變量的命名規範:
1.1能以數字,字母,下劃線以及$組成並且不能以數字開頭推薦使用駝峰體命名.
1.2變量不能夠使用js中的關鍵字以及保留字來命名.
1.3區分大小寫.
五,三種彈出框
彈出框:alert彈出的消息中有確定鍵.
確認框:confirm彈出的下次中含有確定與取消鍵.
輸入框:prompt彈出一個框可以用來填寫內容.
六:查看變量的四種方式
alert:
console.log():能夠拿到返回值
document.write():
斷點調試
七:數據類型
// 一. 值類型 // 1.number:數字類型 var a = 10; // typeof()查看類型,可以省略() console.log(a, typeof a); // 判斷 console.log(typeof a == ‘number‘); a = 3.14; console.log(a, typeof a); a = 314e2 console.log(a, typeof a); // 2.string:字符串類型 var a = ‘字符串‘; console.log(a, typeof a); a = "字符串"; console.log(a, typeof a); // ES6會檢測變量的重復定義,報錯 // let x = 10; // let x = ‘10‘; // 3.boolean:布爾類型 true|false a = true; console.log(a, typeof a); // 4.undefined:未定義類型 var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c); // 二.引用類型 // 5.function:函數類型 var m = function () {}; console.log(m, typeof m); // 6.object:對象類型 var obj = {}; console.log(obj, typeof obj); obj = new Object(); console.log(obj, typeof obj); // 判斷 // instanceof:對象類型判斷 console.log(obj instanceof Object); // 三.特殊的Object // Number() String() Boolean() Math // 7.null:空對象 var o = null; console.log(o, typeof o); // 判斷 console.log(o == null); // 8.Array:數組對象 o = new Array(1, 2, 3, 4, 5); console.log(o, typeof o); console.log(o instanceof Object); // 判斷 console.log(o instanceof Array); // 9.Date:時間對象 o = new Date(); console.log(o, typeof o); // 10.RegExp:正則對象 o = new RegExp(); console.log(o, typeof o);數據類型演示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>類型轉換</title>
</head>
<body>
類型轉換
</body>
<script>
// 類型轉換針對 值類型
// number string boolean
// 一.顯性轉化
// 1. num,bool => str
var a = 10;
var b = true;
// var c = new String(a);
// console.log(c, typeof c); // ‘10‘, object
var c = String(a);
console.log(c, typeof c); // ‘10‘, string
c = String(b);
console.log(c, typeof c); // ‘true‘, string
c = a.toString();
console.log(c, typeof c); // ‘10‘, string
c = b.toString();
console.log(c, typeof c); // ‘true‘, string
// 2.bool,str => num
var aa = true;
var bb = ‘10‘;
var cc = Number(aa);
console.log(cc, typeof cc); // 1 number
cc = Number(bb);
console.log(cc, typeof cc); // 10 number
cc = + aa;
console.log(cc, typeof cc); // 1 number
cc = + bb;
console.log(cc, typeof cc); // 10 number
// 針對字符串
cc = parseFloat(‘3.14.15.16abc‘);
console.log(cc, typeof cc); // 3.14
cc = parseInt(‘10.35abc‘); // 10
console.log(cc, typeof cc);
// 字符串以非數字開頭,結果為NaN
// 1.非數字類型
// 2.不與任何數相等,包含自己
// 3.通過isNaN()進行判斷
var res = parseInt("abc10def");
console.log(res, isNaN(res))
// 二.隱性轉換(自動轉換)
// 5 + null // 5
// "5" + null // "5null"
// "5" + 1 // "51"
// "5" - 1 // 4
console.log("5" - 1);
// "" + ? // "?"
</script>
</html>
數據類型轉換
八:運算符
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>運算符</title>
</head>
<body>
運算符
</body>
<script type="text/javascript">
// 一.算數運算符
var a = 5;
var res = a / 2;
// 只存在number類型運算
console.log(res); // 2.5
var res = a % 2;
console.log(res); // 商為2余1 1
// 自增自減
// 總結:
// 1.++/--在前在後,自身值一定改變, a++/++a => a = a + 1
// 2.++/--在前先自運算,再他運算
// 1.++/--在後先他運算,再自運算
// a=5
var res = a++;
console.log("res:" + res + ", a:" + a); // 5, 6
// a=6
var res = ++a;
console.log("res:" + res + ", a:" + a); // 7, 7
// 二.賦值運算符
// 三.比較運算符
console.log(‘5‘ == 5); // true, 值相等即可
console.log(‘5‘ === 5); // false, 值與類型均要相等
console.log(‘5‘ != 5); // fasle
console.log(‘5‘ !== 5); // true
// 四.邏輯運算符
// 運算結果為true|false
var a = 10;
var b = 20;
var c = 30;
var res = a < b && c == 30;
console.log(res);
// 真,真 => 真
// 真,假 => 假
// 假,真 => 假 短路
// 假,假 => 假 短路
// &&運算,有假即假,所有前面為假,後面沒必要被執行,所以被短路
// 短路
var res = a > b && ++c;
console.log(res, c); // c=30
// ||運算,有真即真,所有前面為真,後面沒必要被執行,所以被短路
// 真,真 => 真 短路
// 真,假 => 真 短路
// 假,真 => 真
// 假,假 => 假
// !運算,真則假,假則真,負負得正
console.log(!1, !!1);
// 三目運算符(三元運算符)
// 結果 = 條件表達式 ? 結果1 : 結果2;
// 結果不一樣要與表達式有關系,但表達式為真則結果為結果1,反之為結果2,
var tq = prompt("天氣(晴|雨)")
var res = tq == ‘晴‘ ? "今天天氣挺好" : "請假回家收衣服";
console.log(res);
</script>
</html>
javascript前期基礎內容