JavaScript基础01
- 000-JavaScript概述
- 001-HTML中嵌入JavaScript代码的第一种方式
- 002-HTML中嵌入JavaScript代码的第二种方式
- 003-HTML中嵌入JavaScript代码的第三种方式
- 004-关于js中的变量
- 005-JS函数初步
- 006-JS函数初步2
- 007-JS的局部变量和全局变量
- 008-JS的数据类型
- 009-undefined类型
- 010-Number类型
- 011-Boolean类型
- 012-String类型
- 013-Object类型
- 014-null NaN undefined
000-JavaScript概述
- JavaScript是运行在浏览器上的脚本语言。简称JS。
- JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。
- LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
- 在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。
- JavaScript这个名字中虽然带有"Java"但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。
- JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
- JavaScript的”目标程序“以普通文本形式保存，这种语言叫做”脚本语言“。
- Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。
- 以后大家会学习一个叫做JSP的技术，JSP和JS有啥区别？
- JSP ： JavaServer Pages（隶属于Java语言的，运行在JVM当中。）
- JS ： JavaScript（运行在浏览器上。）
001-HTML中嵌入JavaScript代码的第一种方式
<!doctype html>
<html><head><title>HTML中嵌入JavaScript代码的第一种方式</title></head><body><input type="button" value="开始" onclick="window.alert('hello js!')"/><br><input type="button" value="开始" onclick='window.alert("hello js!")'/><br><input type="button" value="开始" onclick="window.alert('hello js1!')window.alert('hello js2!')window.alert('hello js3!')"/><br><input type="button" value="开始" onclick="alert('hello zhangsan!');alert('hello lisi!');alert('hello wangwu!')"/></body>
</html>
002-HTML中嵌入JavaScript代码的第二种方式
<script type="text/javascript">window.alert("first......!");
</script><!doctype html>
<html><head><title>HTML中嵌入JavaScript代码的第二种方式</title><style type="text/css"></style><script type="text/javascript">window.alert("head......!");</script></head><body><script type="text/javascript">window.alert("Hello World!"); window.alert("Hello JavaScript!");</script><input type="button" value="我是一个按钮"/></body>
</html><script type="text/javascript">window.alert("last......!");
</script>
003-HTML中嵌入JavaScript代码的第三种方式
<!doctype html>
<html><head><title>HTML中嵌入JavaScript代码的第三种方式：引入外部独立的js文件</title></head><body><script type="text/javascript" src="file/1.js"></script><script type="text/javascript" src="file/1.js"></script><script type="text/javascript">alert("hello jack!");</script></body>
</html>
004-关于js中的变量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>关于js中的变量</title></head><body><script type="text/javascript">var i;alert("i=" + i);alert(undefined);var k = undefined;alert("k=" +k);var a,b,c = 200;alert("a=" + a);alert("b=" + b);alert("c=" + c);a = false;alert(a);a = "abc";alert(a);a = 1.2;alert(a);</script></body>
</html>
005-JS函数初步
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS函数初步</title></head><body><script type="text/javascript">function sum(a,b){alert(a + b);}sum(10,20)sayHello = function(username){alert("hello" + username);}sayHello("World!");</script><input type="button" value="hello" onclick="sayHello('World!')"/><input type="button" value="计算10和20的和" onclick="sum(10,20)"/></body>
</html>
006-JS函数初步2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS函数初步2</title></head><body><script type="text/javascript">function sum(a,b) {return a + b;}var retValue = sum(1,2);alert(retValue);var retValue2 = sum("jack");alert(retValue2); var retValue3 = sum();alert(retValue3); var retValue4 = sum(1,2,3);alert("结果=" + retValue4);function test1(username) {alert("test1");}function test1() {alert("test1 test1");}test1("lisi");</script></body>
</html>
007-JS的局部变量和全局变量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS的局部变量和全局变量</title></head><body><script type="text/javascript">var i = 100;function access() {alert("i=" + i);}access();var username = "jack";function accessUsername() {var username = "lisi";alert("username=" + username);}accessUsername();alert("username=" + username);function accessAge() {var age = 20;alert("age=" + age);}accessAge();function myfun(){myname = "fbi";}myfun();alert("myname=" + myname);</script></body>
</html>
008-JS的数据类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS的数据类型</title></head><body><script type="text/javascript">function sum(a, b){if(typeof a == "number" && typeof b == "number"){return a + b;}alert(a + "," + b + "必须都为数字");}var retValue = sum(false,"abc");alert(retValue); var retValue2 = sum(1,2);alert(retValue2);alert("-------------");var i;alert(typeof i); var k = 10;alert(typeof k); var f = "abc";alert(typeof f); var d = null;alert(typeof d); var flag = false;alert(typeof flag); var obj = new Object();alert(typeof obj); function sayHello(){}alert(typeof sayHello); </script></body>
</html>
009-undefined类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>undefined类型</title></head><body><script type="text/javascript">var i; var k = undefined; alert(i == k); var y = "undefined"; alert(k == y); </script></body>
</html>
010-Number类型
<!DOCTYPE html>
<html lang="en"><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;alert(typeof v1);alert(typeof v2);alert(typeof v3);alert(typeof v4);alert(typeof v5);var a = 100;var b = "中国人";alert(a / b);var e = "abc";var f = 10;alert(e + f); alert(10 / 0);alert(10 / 3); function sum(a,b){if(isNaN(a) || isNaN(b)){alert("参与运算的必须是数字！");return;}return a + b;}sum(100,"abc");sum(100,200);alert(parseInt("3.999999")); alert(parseInt(3.999999)); alert(parseInt("3.14") + 1); alert(parseFloat("3.2") + 1); alert(Math.ceil("2.1")); </script></body>
</html>
011-Boolean类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Boolean类型</title></head><body><script type="text/javascript">var username = "jack";if(username){alert("欢迎你" + username);}else{alert("用户名不能为空!");}if(Boolean(username)){alert("欢迎你" + username);}else{alert("用户名不能为空!");}alert(Boolean(1)); alert(Boolean(0)); alert(Boolean("")); alert(Boolean("abc")); alert(Boolean(null)); alert(Boolean(NaN)); alert(Boolean(undefined)); alert(Boolean(Infinity)); alert(typeof null); </script></body>
</html>
012-String类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>String类型</title></head><body><script type="text/javascript">var x = "abc";alert(typeof x); var y = new String("abc");alert(typeof y); alert(x.length); alert(y.length); alert("http://www.baidu.com".indexOf("http")); alert("http://www.baidu.com".indexOf("https")); alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); alert("name=value&name=value&name=value".replace("&","%"));alert("abcdefxyz".substr(2,4)); alert("abcdefxyz".substring(2,4)); </script></body>
</html>
013-Object类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Object类型</title></head><body><script type="text/javascript">function sayHello(){}sayHello();var obj = new sayHello(); function Student(){alert("Student....");}Student();var stu = new Student();alert(stu); function User(a,b,c) { 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,"jack",30);alert(u2.sno);alert(u2.sname);alert(u2.sage);alert(u2["sno"]);alert(u2["sname"]);alert(u2["sage"]);Emp = function (ename,sal) {this.ename = ename;this.sal = sal;}var e = new Emp("lisi",2000);alert(e["ename"] + ", " + e.sal);Product = function(pno,pname,price){this.pno = pno;this.pname = pname;this.price = price;this.getPrice = function(){return this.price;}}var pro = new Product(111,"西瓜",4.0);var pri = pro.getPrice();alert(pri); Product.prototype.getPname = function () {return this.pname;}var pname = pro.getPname();alert(pname); String.prototype.suiyi = function(){alert("这是给String类型扩展的一个函数，叫做suiyi");}"abc".suiyi();</script></body>
</html>
014-null NaN undefined
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>null NaN undefined</title></head><body><script type="text/javascript">alert(typeof null); alert(typeof NaN); alert(typeof undefined); alert(null == NaN); alert(null == undefined); alert(NaN == undefined); alert(null === NaN); alert(null === undefined); alert(NaN === undefined); alert(1 == true); alert(1 === true); </script></body>
</html>
