<!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> -->
<!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" οnclick="Test()" value="加载了"/>
<input type="button" value="Hello" οnclick="sum(10)"/>
<input type="button" value="Test" id="button" οnclick="sayHello('zhangsan')"/>
<input type="button" value="测试" οnclick="test1('LISI')"/>
<input type="button" value="按一下" οnclick="access()"/>
<input type="button" value="叫名字" οnclick="sayName()"/>
<input type="button" value="typeOf" οnclick="T()"/>
<!-- Undefined类型只有一个值,这个值就是undefined -->
<!-- 当一个值没有手动赋值,系统默认赋值undefined -->
<!-- 或者也可以给一个变量手动赋undefined -->
<!-- Number类型包括那些值? -->
<!-- 整数小数正数负数,不是数字(NAN),无穷大Infinity -->
<input type="button" value="Number" οnclick="cALL()"/>
<!-- 关于什么情况下出现nan,但运算结果不是一个数字的时候结果是nan -->
<!-- 当运算结果应该是一个数字最后却不是数字就是nan -->
<input type="button" value="nan()" οnclick="nan()"/>
<!-- 当除数为零的时候,结果为无穷大,Java中报错,但是在JS中是无穷大Infinity -->
<input type="button" value="Infi()" οnclick="Infi()"/>
<input type="button" value="isNan" οnclick="isN(12,'abs')"/>
<input type="button" value="Int" οnclick="fl()"/>
<input type="button" value="flag" οnclick="flag()"/>
<input type="button" value="bTes" οnclick="bTest()"/>
<input type="button" value="sts" οnclick="sy()"/>
<input type="button" value="stest" οnclick="SP()"/>
</body>
</html>
// 标识符必须由数字字母下划线美元符号组成,别的符号不允许 // 不能以数字开头 // 严格区分大小写 // 标识符不能用关键字做标识符 // 理论上没有长度限制 // 类名和接口首字母大写,后面每个单词首字母大写 // 方法名和变量名,首字母小写,后面每个单词首字母大写 // 所有的常量名,全部大写,单词和单词之间用下划线隔开 // 驼峰命名,见名知意 // 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,可以在程序运行阶段获取变量数据类型 //全局变量和局部变量 //全局变量,浏览器打开声明,关闭时销毁,会一直在内存空间,耗费内存 // 非必要不要使用全局变量 //局部变量声明在函数内,函数开始执行时局部变量的内存空间开辟 // 函数结束后,内存空间释放,什么周期短 // 尽量使用局部变量
// 标识符必须由数字字母下划线美元符号组成,别的符号不允许
// 不能以数字开头
// 严格区分大小写
// 标识符不能用关键字做标识符
// 理论上没有长度限制
// 类名和接口首字母大写,后面每个单词首字母大写
// 方法名和变量名,首字母小写,后面每个单词首字母大写
// 所有的常量名,全部大写,单词和单词之间用下划线隔开
// 驼峰命名,见名知意
// 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中的函数不需要重载(重载是方法名相同,形参不同(可以是数量,类型,顺序不同))
// 调用函数countfunction 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,可以在程序运行阶段获取变量数据类型//全局变量和局部变量
//全局变量,浏览器打开声明,关闭时销毁,会一直在内存空间,耗费内存
// 非必要不要使用全局变量
//局部变量声明在函数内,函数开始执行时局部变量的内存空间开辟
// 函数结束后,内存空间释放,什么周期短
// 尽量使用局部变量