Webフロントエンド学習ノート:day 03(JavaScript day 01)
69217 ワード
JavaScript
1.JavaScriptの概要
第一種類:インライン埋め込み
JSにはtypeofという がありますが、この はプログラムの で のデータタイプを に できます.
1.JavaScriptの概要
1、JavaScript ， HTML ， HTML
2、JS ， ， 。 JS ， ： ， ：click。 ：onclick。【 ： ： on。】， HTML 。
第一種類:インライン埋め込み
1、 ： JS
onclick="window.alert('hello js')"
2、 JS ？
JS window， ， ，window 。
window :alert， ：window.alert(" "); 。
3、JS
JS ， 。
JS “;”， 。
<!-- window. 。-->
<input type="button" value="hello" onclick="alert('hello zhangsan') alert('hello lis') alert('hello wangwu')"/>
1、 JS
2、 ，
<!-- ： -->
<script type="text/javascript">
/*
， ，
。（ ）
*/
window.alert("Hello World!"); // alert HTML 。
// JS ， 。
/*
JS 。 java 。
*/
window.alert("Hello JavaScript!");
</script>
1、
src js
2、 js ，js 。
3、 js 。
<!-- js -->
<script type="text/javascript" src="js/1.js">
</script>
1、javascript ？
？
var ;
？
= ;
javascript ， ， ， 。
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
， undefined
：javascript 。
2、java ， ？
java ， ， 。
。 。
： ， ；
1、JS ， ？
：
：
function ( ){
;
}
：
= function( ){
;
}
JS ， 。
2、java ，JS ？
JS ， ， ，JS 。（ ）
：
， （ 、 、 ）
<script type="text/javascript">
function sum(a, b){
// a b , (a b ， 。)
alert(a + b);
}
// .
//sum(10, 20);
// sayHello
sayHello = function(username){
alert("hello " + username);
}
//
//sayHello("zhangsan");
</script>
<input type="button" value="hello" onclick="sayHello('jack');" />
<input type="button" value=" 10 20 " onclick="sum(10, 20);" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS </title>
</head>
<body>
<script type="text/javascript">
function sum(a, b){
return a + b;
}
// sum
var retValue = sum(1, 2);
alert(retValue);
var retValue2 = sum("jack"); // jack a ,b undefined
alert(retValue2); // jackundefined
var retValue3 = sum();
alert(retValue3); // NaN (NaN ， 。Not a Number)
var retValue4 = sum(1, 2, 3);
alert(" =" + retValue4); // =3
function test1(username){
alert("test1");
}
/*
JS ， ， ， 。
*/
function test1(){
alert("test1 test1");
}
test1("lisi"); // test1() .
</script>
</body>
</html>
：
： ， ， 。 ， 。
。
：
， ，
： ， ， 。
。
： var , , .
JS ： 、 。
：Undefined、Number、String、Boolean、Null
：Object Object
JSにはtypeofという がありますが、この はプログラムの で のデータタイプを に できます.
typeof ：
typeof
typeof 6 ： 。
"undefined"
"number"
"string"
"boolean"
"object"
"function"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS </title>
</head>
<body>
<script type="text/javascript">
var i;
alert(typeof i); // "undefined"
var k = 10;
alert(typeof k); // "number"
var f = "abc";
alert(typeof f); // "string"
var d = null;
alert(typeof d); // "object" null Null , typeof "object"
var flag = false;
alert(typeof flag); // "boolean"
var obj = new Object();
alert(typeof obj); // "object"
// sayHello .
function sayHello(){
}
alert(typeof sayHello); // "function"
</script>
</body>
</html>
Undefined ， undefined
， undefined
undefined。
var i; // undefined
var k = undefined; // undefined
alert(i == k); // true
var y = "undefined"; // "undefined"
alert(y == k); // false
1、Number ？
-1 0 1 2 2.3 3.14 100 .... NaN Infinity
、 、 、 、 、 Number 。
2、isNaN() :
true ， false 。
3、parseInt()
, .
4、parseFloat()
.
5、Math.ceil()
Math ， ceil()， 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number </title>
</head>
<body>
<script type="text/javascript">
var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;
// "number"
alert(typeof v1);
alert(typeof v2);
alert(typeof v3);
alert(typeof v4);
alert(typeof v5);
// NaN ( Not a Number， ， Number )
// NaN ？
// , , NaN.
var a = 100;
var b = " ";
alert(a / b); // , , NaN
var e = "abc";
var f = 10;
alert(e + f); // "abc10"
// Infinity ( 0 ， )
alert(10 / 0);
// : JS 10 / 3 = ?
alert(10 / 3); // 3.3333333333333335
// isNaN ？
// ：isNaN( ) , true , false .
// isNaN : is Not a Number
function sum(a, b){
if(isNaN(a) || isNaN(b)){
alert(" ！");
return;
}
return a + b;
}
sum(100, "abc");
alert(sum(100, 200));
// parseInt(): , .
alert(parseInt("3.9999")); // 3
alert(parseInt(3.9999)); // 3
// parseFloat(): .
alert(parseFloat("3.14") + 1); // 4.14
alert(parseFloat("3.2") + 1); // 4.2
// Math.ceil()
alert(Math.ceil("2.1")); // 3
</script>
</body>
</html>
1、 JS ：true false （ java 。）
2、 Boolean ：Boolean()。
：
Boolean( )
Boolean() 。
3、Null ,null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boolean </title>
</head>
<body>
<script type="text/javascript">
// var username = "lucy";
var username = "";
/*
if(Boolean(username)){
alert(" " + username);
}else{
alert(" ！");
}
*/
/*
if(username){
alert(" " + username);
}else{
alert(" ！");
}
*/
// :“ " true," " false.
alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("abc")); // true
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean(undefined)); // false
alert(Boolean(Infinity)); // true
/*
while(10 / 3){
alert("hehe");
}
*/
for(var i = 0; i < 10; i++){
alert("i = " + i);
}
// Null ,null
alert(typeof null); // "object"
</script>
</body>
</html>
1、 JS ， 。
var s1 = 'abcdef';
var s2 = "test";
2、 JS ， ？
：
：var s = "abc";
（ JS String）： var s2 = new String("abc");
：String ， ，String Object。
3、 string String， 。
4、 String ？
：
length
：
indexOf
lastIndexOf
replace
substr
substring
toLowerCase
toUpperCase
split
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String </title>
</head>
<body>
<script type="text/javascript">
// string( String)
var x = "king";
alert(typeof x); // "string"
// String( Object )
var y = new String("abc");
alert(typeof y); // "object"
//
alert(x.length); // 4
alert(y.length); // 3
alert("http://www.baidu.com".indexOf("http")); // 0
alert("http://www.baidu.com".indexOf("https")); // -1
// ？
alert("http://www.baidu.com".indexOf("https") >= 0 ? " " : " "); //
// replace ( ： )
alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
// replace , “ ” .
// .
alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
// : substr substring ？
// substr(startIndex, length)
alert("abcdefxyz".substr(2,4)); //cdef
// substring(startIndex, endIndex) : endIndex
alert("abcdefxyz".substring(2,4)); //cd
</script>
</body>
</html>
Object ：
1、Object ， ， Object。
2、Object ？
prototype （ ， ）： 。
constructor
3、Object ？
toString()
valueOf()
toLocaleString()
4、 JS Object， Object 。
， prototype 。
5、 JS ？ new ？
：
：
function ( ){
}
：
= function( ){
}
：
new ( ); // 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object </title>
</head>
<body>
<script type="text/javascript">
function sayHello(){
}
// sayHello .
sayHello();
// sayHello .
var obj = new sayHello(); // obj , .
//
function Student(){
alert("Student.....");
}
//
Student();
//
var stu = new Student();
alert(stu); // [object Object]
// JS ,
// JS .
function User(a, b, c){ // a b c , .
// (this )
// User :sno/sname/sage
this.sno = a;
this.sname = b;
this.sage = c;
}
//
var u1 = new User(111, "zhangsan", 30);
//
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
var u2 = new User(222, "jackson", 55);
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);
// ,
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
//
/*
Emp = function(a, b){
this.ename = a;
this.sal = b;
}
*/
Emp = function(ename,sal){
//
this.ename = ename;
this.sal = sal;
}
var e1 = new Emp("SMITH", 800);
alert(e1["ename"] + "," + e1.sal);
Product = function(pno,pname,price){
//
this.pno = pno;
this.pname = pname;
this.price = price;
//
this.getPrice = function(){
return this.price;
}
}
var xigua = new Product(111, " ", 4.0);
var pri = xigua.getPrice();
alert(pri); // 4.0
// prototype
Product.prototype.getPname = function(){
return this.pname;
}
// getPname()
var pname = xigua.getPname();
alert(pname)
// String
String.prototype.suiyi = function(){
alert(" String ， suiyi");
}
"abc".suiyi();
</script>
</body>
</html>
<!--
java ， ？（ ）
public class User{
private String username;
private String password;
public User(){
}
public User(String username,String password){
this.username = username;
this.password = password;
}
}
User user = new User();
User user = new User("lisi","123");
JS ， ？（ ）
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User();
var u = new User("zhangsan");
var u = new User("zhangsan","123");
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null NaN undefined </title>
</head>
<body>
<script type="text/javascript">
// ==
alert(1 == true); // true
alert(1 === true); // false
// null NaN undefined .
alert(typeof null); // "object"
alert(typeof NaN); // "number"
alert(typeof undefined); // "undefined"
// null undefined .
alert(null == NaN); // false
alert(null == undefined); // true
alert(undefined == NaN); // false
// JS
// ==( ： )
// ===( ： ， )
alert(null === NaN); // false
alert(null === undefined); // false
alert(undefined === NaN); // false
</script>
</body>
</html>