HTML页面用于展示
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<!--
<script>
alert("Head")
</script>
-->
</head>
<body bgcolor="grey">
<!-- 引入外部独立的JS代码,和我们直接写在script里面是一样的 -->
<!-- 同一个js文件可以引入两次,但是没必要 -->
<!-- 结束的script标签必须有,不能是单标签的 -->
<!-- 引入了代码块后,script标签内的代码就不会被执行了 -->
<script type="text/javascript" src="js.js">
alert("js")
// 暴露在脚本块之内的程序,在页面打开的时候执行,遵循自上而下的方式执行
// 不需要事件(可以用来做特殊操作)
// 脚本块放到Head里面甚至是HTML标签之外都可以执行
// JS代码的注释方式和java是一样的
// 还有alert方法会阻塞整个HTML页面的加载,直到我们按下确认为止
</script>
<!-- JS是一门事件驱动型的语言,依靠事件去驱动,然后执行相应的程序 -->
<!-- 在JS中有许多事件用来触发,任何事件都会对应一个用来触发的事件句柄 -->
<!-- 事件和事件句柄的区别是,句柄前面会有一个on比如说onclick -->
<input type="button" onclick="Test()" value="加载了"/>
<input type="button" value="Hello" onclick="sum(10)"/>
<input type="button" value="Test" id="button" onclick="sayHello('zhangsan')"/>
<input type="button" value="测试" onclick="test1('LISI')"/>
<input type="button" value="按一下" onclick="access()"/>
<input type="button" value="叫名字" onclick="sayName()"/>
<input type="button" value="typeOf" onclick="T()"/>
<!-- Undefined类型只有一个值,这个值就是undefined -->
<!-- 当一个值没有手动赋值,系统默认赋值undefined -->
<!-- 或者也可以给一个变量手动赋undefined -->
<!-- Number类型包括那些值? -->
<!-- 整数小数正数负数,不是数字(NAN),无穷大Infinity -->
<input type="button" value="Number" onclick="cALL()"/>
<!-- 关于什么情况下出现nan,但运算结果不是一个数字的时候结果是nan -->
<!-- 当运算结果应该是一个数字最后却不是数字就是nan -->
<input type="button" value="nan()" onclick="nan()"/>
<!-- 当除数为零的时候,结果为无穷大,Java中报错,但是在JS中是无穷大Infinity -->
<input type="button" value="Infi()" onclick="Infi()"/>
<input type="button" value="isNan" onclick="isN(12,'abs')"/>
<input type="button" value="Int" onclick="fl()"/>
<input type="button" value="flag" onclick="flag()"/>
<input type="button" value="bTes" onclick="bTest()"/>
<input type="button" value="sts" onclick="sy()"/>
<input type="button" value="stest" onclick="SP()"/>
</body>
</html>
<!-- <script>
alert("outside")
</script> -->JS代码实现效果
// 标识符必须由数字字母下划线美元符号组成,别的符号不允许
// 不能以数字开头
// 严格区分大小写
// 标识符不能用关键字做标识符
// 理论上没有长度限制
// 类名和接口首字母大写,后面每个单词首字母大写
// 方法名和变量名,首字母小写,后面每个单词首字母大写
// 所有的常量名,全部大写,单词和单词之间用下划线隔开
// 驼峰命名,见名知意
// java是一种强类型语言,java存在编译阶段
// 在java中,在编译阶段就确定了变量类型,一旦确定类型就无法转换,语法类型转换,不是真转换
// int i = 10;double d = i;不是把i变量给了d,把i变量内容改变了
// 而是把i变量保存的值10给了变量d,i变量还是int类型,值为10
// byte short int long float double boolean char
// 1248 4812
// JS是一个弱类型语言,没有编译阶段,一个变量可以随意赋值,什么类型都行
// undefined在JS里面是一个具体的值,当我们没有给变量赋值的时候,他的值就是undefined
// java中我们写方法
// 修饰符列表 返回值类型 方法名(形式参数列表){方法体}
// public static boolean login(String username,String password){return true;}
//boolean flag = user.login(username,password);
//这里我们实际调用方法的时候传进去的就是实参,实际参数必须与形参一一对应
// function 函数名(形参类型){函数体}
function sum(a,b)
{
// a和b都是变量名,他们都是形参,变量名随意
// 这里我们可以使用typeof来判断或者说限定这里就是数字number
// typeof的运算结果是六个字符串之一,字符串是全部小写的
// 在JS中使用==来做字符串判断,没有equals方法(这是java的Object类的一个方法)
var i = 100;
if(typeof a == "number" && typeof b == "number")
{
alert(a + b);
}
else
{
alert("必须都是数字")
}
}
function access()
{
//这里访问的是全局变量
alert(i);
}
function myFun()
{
//如果一个变量在声明的时候没有加上var
//那么无论在哪里声明的,他都是全局变量
//而且还要被调用一次
username = "jack";
//需要调用一次
myFun();
}
function sayName()
{
// 就近原则访问Rose局部变量
// var username = "Rose";
alert(username);
}
function count(a,b)
{
return a + b;
}
// JS中的函数不需要重载(重载是方法名相同,形参不同(可以是数量,类型,顺序不同))
// 调用函数count
function sayHello(username)
{
alert("hello" + username);
var w = count(10,30);
alert(w);
// var ret = count("jack");
var ret = count();
// 一个值赋值了,另一个值没赋值默认undefined
// 形成了字符串拼接
// NaN是一个具体存在的值,表示该值不是数字
alert(ret)
var sum = count(1,2,3);
//超过了数量,只用了前面的
// js的函数调用时,参数类型没有限制,参数个数没有限制
alert(sum)
}
function TestI()
{
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
alert(i)
}
function Test()
{
var a,b,c = 200;
alert(undefined);
alert("a =" + a);
alert("b =" + b);
alert("c =" + c);
// 一个值我们没声明直接用,就会报错
// alert(age);
}
function test1(username)
{
alert(username)
}
// js中同名函数会彼此覆盖
// 后声明的会覆盖前面的函数,谁后谁做主
//直接从内存中抹去了之前的函数了
function test1()
{
var u = sum(false,false);
alert(u);
}
function T()
{
var o;
alert(typeof o);
var p = 10;
alert(typeof p);
var k = "abc";
alert(typeof k);
var u = null;
alert(typeof u);
var f = true;
alert(typeof f);
var obj = new Object();
alert(typeof obj);
function sHello(){}
alert(typeof sHello())
}
function cALL()
{
var v = 1;
alert(typeof v);
var v1 = 3.14;
alert(typeof v1);
var v2 = -100;
alert(typeof v2);
var v3 = NaN;
alert(typeof v3);
var v4Infinity = Infinity;
alert(typeof v4Infinity);
}
function nan()
{
var i = 10;
var e = "abc";
alert(i / e);
alert(e + i);
}
function Infi()
{
var i = 0;
var p = 10;
alert(p / i);
}
function isN(a,b)
{
// 当我们isNaN()返回true,就代表不是一个数字
if(isNaN(a) || isNaN(b))
{
alert("参与运算的必须是数字");
}
alert(a + b);
}
//pareseFloat可以将字符串自动转换成
function fl()
{
// 将字符串转换为数字
alert(parseInt("3.19999"))
alert(parseInt(3.19999))
alert(parseFloat(3.14 + 1))
alert(parseFloat("3.14") + 1)
}
function flag()
{
var username = "jack";
if(username)
{
// 原因是浏览器自动将他转换为boolean类型,自动调用了boolean函数
// 不写也会调用
alert("欢迎" + username)
}
else
{
alert("用户名不为空")
}
}
function bTest()
{
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)
{
//无限循环,因为始终有值且为true
alert("hehe")
}
}
//JS中String是一个内置的类,继承于Object类
function sy()
{
//直接写出来的这种string字符串对象属于原始类型String
var S = "abc";
alert(typeof S);//得到String
//new出来的String属于Object类型
var s = new String("abc");
alert(typeof s);//得到Object
//无论小大String类型,他们的属性和函数都是通用的
alert(S.length);
alert(s.length);
}
function SP()
{
//String常用函数
//indexOf指定字符串在当前字符串第一次出现的索引
//lastIndexOf指定字符串在当前字符串最后一次出现的索引
//replace替换
//substr截取子字符串指定开始index,指定字符串长度
//substring从index到end处对字符串进行截取
//toLowerCase小写
//toUpperCase大写
//split拆分字符串
var os = "https://www.baidu.com"
//从第四开始长度为5
alert(os.substr(4,5));
//从0开始到第四个字符
alert(os.substring(0,4));
alert(os.indexOf("https"));
alert(os.indexOf("baidu.com") >= 0 ? "包含" : "不包含")
var iu = new String("name=value%name=value%name=value");
while(iu.indexOf("%") >= 0)
{
iu.replace("%","&");
alert(iu);
}
}
//Object是所有类型的超类,自定义的任何类型,默认继承Object
//prototype属性(常用的),作用是给类动态的拓展属性和函数
//constructor属性
//Object类包含哪些函数
//toString()valueOf()tolocaleString()
//JS中自定义的类默认继承Object,会继承Object类中所有的属性和函数
//换句话说,自定义的类也有prototype属性
// 定义方式function类名(形参)
//第二种方法类名 = function(形参){}
//创建对象的语法new 类名(实参)
function asdas()
{
function sayHello(){}
sayHello();//视为调用函数
var obj = new sayHello();//这种方式视为创建对象
//obj是一个引用,保存内存地址指向堆中的对象
function Student(){alert("学生")}
//当作函数
Student();
//当作类来创建对象
var student = new Student();
alert(student)
}
//在JS中,类的定义和函数的定义是放在一起的
function User(a,b,c)//三个形参
{
//声明属性,代表当前对象
// 三个属性
this.sno = a;
this.sname = b;
this.sage = c;
}
function U()
{
//创建对象
var u1 = new User(111,"zhangsan",30);
//访问对象的属性
alert("id" + u1.sno);
alert("name" + u1.sname);
alert("age" + u1.sage);
var u2 = new User(222,"2222",20);
//访问对象的属性
alert("id" + u2.sno);
alert("name" + u2.sname);
alert("age" + u2.sage);
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
}
Emp = function(ename,sal)
{
this.ename = ename;
this.sal = sal;
}
function Tes()
{
var e1 = new Emp("Smith",8000);
alert(e1.sal);
alert(e1.ename);
alert(e1["ename"]);
alert(e1["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 name = pro.getPname();
alert(name);
//这个可以给JS中任何Object的子类扩展
String.prototype.make = function()
{
alert("这是给String扩展的")
}
"abc".make();
// JS的变量不需要指定数据类型,但是在赋值的时候,每一个数据还是有类型的
// JS数据类型有原始类型,引用类型
// 原始类型有undefined,Number,String,null,boolean
// 引用类型Object,以及Object的子类
//ES规范,在ES6之后添加了symbol类型
// JS有一个运算符叫typeof,可以在程序运行阶段获取变量数据类型
//全局变量和局部变量
//全局变量,浏览器打开声明,关闭时销毁,会一直在内存空间,耗费内存
// 非必要不要使用全局变量
//局部变量声明在函数内,函数开始执行时局部变量的内存空间开辟
// 函数结束后,内存空间释放,什么周期短
// 尽量使用局部变量