JavaScript代码执行顺序与JS注册事件与回调函数-----JavaScript

已于 2023-11-10 14:42:04 修改
阅读量82 收藏
点赞数 2
分类专栏： 前端 文章标签： javascript 前端 reactjs react.js vue.js node.js js
于 2023-11-04 11:15:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134215937
版权 
<!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">
		<script type="text/javascript" src="js.js">
			alert("js")
			// 暴露在脚本块之内的程序,在页面打开的时候执行,遵循自上而下的方式执行
			// 不需要事件(可以用来做特殊操作)
			// 脚本块放到Head里面甚至是HTML标签之外都可以执行
			// JS代码的注释方式和java是一样的
			// 还有alert方法会阻塞整个HTML页面的加载,直到我们按下确认为止
		</script>
		<!-- 引入外部独立的JS代码,和我们直接写在script里面是一样的 -->
		<!-- 同一个js文件可以引入两次,但是没必要 -->
		<!-- 结束的script标签必须有,不能是单标签的 -->
		<!-- 引入了代码块后,script标签内的代码就不会被执行了 -->
		<!-- JS是一门事件驱动型的语言,依靠事件去驱动,然后执行相应的程序 -->
		<!-- 在JS中有许多事件用来触发,任何事件都会对应一个用来触发的事件句柄 -->
		<!-- 事件和事件句柄的区别是,句柄前面会有一个on比如说onclick -->
		<!-- 以下逻辑是,将我们的函数注册到按钮上,等待click事件发生,然后浏览器调用我们写好的函数,这就叫回调函数 -->
		<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()"/>
		<input type="button" id="myBtn" value="Halla"/>
		<input type="button" id="myBtn1" value="Halla"/>
		<input type="text" id="choose"/>
		<input type="button" id="osx" value="按下去"/>
	</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">
        <script type="text/javascript" src="js.js">
            alert("js")
            // 暴露在脚本块之内的程序,在页面打开的时候执行,遵循自上而下的方式执行
            // 不需要事件(可以用来做特殊操作)
            // 脚本块放到Head里面甚至是HTML标签之外都可以执行
            // JS代码的注释方式和java是一样的
            // 还有alert方法会阻塞整个HTML页面的加载,直到我们按下确认为止
        </script>
        <!-- 引入外部独立的JS代码,和我们直接写在script里面是一样的 -->
        <!-- 同一个js文件可以引入两次,但是没必要 -->
        <!-- 结束的script标签必须有,不能是单标签的 -->
        <!-- 引入了代码块后,script标签内的代码就不会被执行了 -->
        <!-- JS是一门事件驱动型的语言,依靠事件去驱动,然后执行相应的程序 -->
        <!-- 在JS中有许多事件用来触发,任何事件都会对应一个用来触发的事件句柄 -->
        <!-- 事件和事件句柄的区别是,句柄前面会有一个on比如说onclick -->
        <!-- 以下逻辑是,将我们的函数注册到按钮上,等待click事件发生,然后浏览器调用我们写好的函数,这就叫回调函数 -->
        <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()"/>
        <input type="button" id="myBtn" value="Halla"/>
        <input type="button" id="myBtn1" value="Halla"/>
        <input type="text" id="choose"/>
        <input type="button" id="osx" value="按下去"/>
    </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 函数名(形参类型){函数体}

//blur失去焦点
//focus获得焦点
//click鼠标单击
//dblclick鼠标双击
//keydown按下键盘
//keyup键盘松开
//mousedown鼠标按下
//mouseover鼠标松开
//mousemove鼠标移动
//mouseoutout鼠标移开
//mouseup鼠标弹起
//reset表单重置
//submit表单提交
//change下拉选项改变
//select文本选中
//load页面加载完毕(全部页面元素加载到内存)

// 任何一个事件都会对应一个事件句柄,事件句柄就是在事件前添加on
//sayHello函数被称为回调函数(自己写出函数,不是自己调用如用户调用)

window.onload = function()
{
	document.getElementById("osx").onclick = function()
	{
		var choose = document.getElementById("choose");
		//一个节点只要有的属性都可以.出来切换
		choose.type = "checkbox";
		// choose.type = "password";
		// choose.value = "按下了";
	}
	
	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();
	}
	
	function doSome()
	{
		alert("按下了");
	}
				
	//通过ID来获取这个按钮对象
	//整个浏览器我们称之为window,就是window.alert的window
	//页面信息我们称之为document
	var btnObj = document.getElementById("myBtn");
	//给按钮对象的onclick赋值
	btnObj.onclick = doSome;
	
	var scxz = document.getElementById("myBtn1")
	scxz.onclick = function()
	{
		alert("按按钮");
	}
	
	// null属于Object类型
	// nan属于数字Number
	
	// undefined属于undefined
	// 他们三个类型不同
	// null == undefined
	// null和undefined可以等同
	// ==等同于运算符,===全等运算符,即判断值是否相等,有判断类型是否相等
	// 当我们用===,null和undefined和nan全都不等
	
	// 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 函数名(形参类型){函数体}

//blur失去焦点
//focus获得焦点
//click鼠标单击
//dblclick鼠标双击
//keydown按下键盘
//keyup键盘松开
//mousedown鼠标按下
//mouseover鼠标松开
//mousemove鼠标移动
//mouseoutout鼠标移开
//mouseup鼠标弹起
//reset表单重置
//submit表单提交
//change下拉选项改变
//select文本选中
//load页面加载完毕(全部页面元素加载到内存)

// 任何一个事件都会对应一个事件句柄,事件句柄就是在事件前添加on
//sayHello函数被称为回调函数(自己写出函数,不是自己调用如用户调用)

window.onload = function()
{
    document.getElementById("osx").onclick = function()
    {
        var choose = document.getElementById("choose");
        //一个节点只要有的属性都可以.出来切换
        choose.type = "checkbox";
        // choose.type = "password";
        // choose.value = "按下了";
    }
    
    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();
    }
    
    function doSome()
    {
        alert("按下了");
    }
                
    //通过ID来获取这个按钮对象
    //整个浏览器我们称之为window,就是window.alert的window
    //页面信息我们称之为document
    var btnObj = document.getElementById("myBtn");
    //给按钮对象的onclick赋值
    btnObj.onclick = doSome;
    
    var scxz = document.getElementById("myBtn1")
    scxz.onclick = function()
    {
        alert("按按钮");
    }
    
    // null属于Object类型
    // nan属于数字Number
    
    // undefined属于undefined
    // 他们三个类型不同
    // null == undefined
    // null和undefined可以等同
    // ==等同于运算符,===全等运算符,即判断值是否相等,有判断类型是否相等
    // 当我们用===,null和undefined和nan全都不等
    
    // JS的变量不需要指定数据类型,但是在赋值的时候,每一个数据还是有类型的
    // JS数据类型有原始类型,引用类型
    // 原始类型有undefined,Number,String,null,boolean
    // 引用类型Object,以及Object的子类
    //ES规范,在ES6之后添加了symbol类型
    // JS有一个运算符叫typeof,可以在程序运行阶段获取变量数据类型
    
    //全局变量和局部变量
    //全局变量,浏览器打开声明,关闭时销毁,会一直在内存空间,耗费内存
    // 非必要不要使用全局变量
    //局部变量声明在函数内,函数开始执行时局部变量的内存空间开辟
    // 函数结束后,内存空间释放,什么周期短
    // 尽量使用局部变量
}

旧约Alatus
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧约Alatus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值