第五次网页前端培训笔记(HTML)

一、 JS的三种使用方式
         1．行内JS
         在html标签上直接写s代码
         2,内部JS
         在script标签中写3JS代码，script标签可以放在head中或body中（建议放在body标签最后)
         3.外部JS
         定义JS文件,通过script标签的src属性引入对应的S文件
         注：如果script标签设置 了src属性，则在scr1pt双标签之间的JS代码不会生效

 <button onclick="alert('hello world')">按钮</button>
		 <!-- 内部JS -->
		 <script type="text/javascript">
		       // alert("这是一个按钮")
		 </script>
		 <script src="js/test.js" type="text/javascript" charset="UTF-8">
		 
		 </script>

二、HTML的基本语法

        语句:
            1. DS代码-行为单位，代码从上往下执行，-行一 条语句。
            2.语句不加分号结尾，如果一行定义多条语句，每句语句只会必须以分号结尾。(建议都加分号)
            3。表达式不需要以分号结尾，如果加了分号则JavaScript引擎会当做语句执行，生成无用的语句。
        注释:
            1. HAL代码注釋: <1-- HTML注釋-- >
            2. JS代码注释:
            //单行注释
            /* 多行注释*/
        标识符:
            规则
                由Unicode字母、二、$. 数字组成、 中文组成
                (1) 不能以数字开头
                (2) 不能是关键字和保留字
                (3) 严格区分大小写
            规范
                (1) 见名知意
                (2) 驼峰命名或下划线规则
       关键字(保留字) :
            声明变量时，不要使用关键字

<script type="text/javascript">
		console.log("Hello")
		console.log("hahahhah")
		</script>

三、变量
                JS是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
                注:也可以不使用var修饰符，直接声明并赋值。

            变量的声明
                1.先声明在赋值
                2.声明并赋值
            变量的注意点
                1.如果变量只声明而未赋值，则显示undefinded
                2.如果变量未声明就使用，则会报错
                3.可以使用var同时声明多个变量
                4.如果重新声明一个已存在的变量，是无效
                5。如果重新声明一个已存在的变量并赋值，则会覆盖
                6. JS是-一种动态的、 弱类型语言，可以声明任意数据类型的变量
                
            变量名提升
                Javascript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
                这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
                
                注意:变量提升只对var命令声明的变量有效，如果变量不是用var命令声明的，就不会发生变量提升

 <script type="text/javascript">
		 /*变量的声明 */
		 // 1.先声明在赋值
		 var a;
		 a=1;
		 console. log(a);
		 // 2.声明并赋值
		 var b=2;
		 console. log(b);
		 
		 /* 变量的注意点*/
		 // 1.如果变量只声明而未赋值，则显示undefinded
		 var c; //声明变量
		 console.log(c); // undefined
		 // 2.如果变量未声明就使用，则会报错
		 // console.log(d); //.d is not defined
		 
		// 3.可以使用var同时声明多个变量
		var aa,bb,cc=10;
		console.log(aa); // undefinded
		console.log(bb); // undefinded.
		console.log(cc); // 10

		//如果重新声明个已存在的变量，是无放
		/* var a;
		console. log(a); */
		//5.如果重新声明一个已存在的变量并赋值，则会覆盖变量并起值，则会覆盖
		var a=10;
		console.log(a); //10
		
		// 6. JS是一种动态的、弱类型语言， 可以声明任意数据类型的变量
		var str="Hello World";
		var flag=true; 
		console.log(str);
		console.log(flag);
		console.log("true")
		
		//不使用var声明变量
		name ="zhangshan" ;
		console.log(name);

		 </script>

四、数据类型
            JS是弱类型语言，变量没有数据类型，数据有类型。

            undefined类型 
                      值不存在
                      出现的情况:
                        1.变量只声明未赋值，值为undefined
                        2.当定义函数需要形参，调用函数未传递实参时， 参数的值为undefined
                        3.当函数没有返回值，接收值为undefined
                
        null类型
                    表示空值
                    注意点:
                        1)使用typeof 操作符测试null 返回object字符串。
                            typrof操作符:判断变量的类型
                        2) undefined 派生自null, 所以等值比较返回值是true. 未初始化的变量和赋值为null
                
        
        数值型
                    数值型包含两种数值:整型和浮点型。
                        1)所有数字(整型和浮点型)都是以64位浮点数形式储存。所以，JS中1与1.0相等
                        2)在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
                
        字符串类型
                    1.使用' '或" "引起来
                    2.可以使用“+”对字符串进行拼接
            
        对象类型
                   数组
                        var 数组名 = [];
                   对象
                        var 对象名 = {};
                   函数
                        function 方法名() {
                    ###########
                }

<script type="text/javascript">
		 /* undefined */
		 // 1.变量只声明未赋值，值为undefined
		var a;
		 console.log(a);
		 
		 // 2.当定义函数需要形参， 调用函数未传递实参时，参数的值为undefined
		 //定义函数 function方法名([参数]) {}
		 function fn01(str) {
		 console. log(str); 
		 }
		 //调用方法方法名([参数]);
		 fn01(1);
		 
		 // 3.当函数没有返回值，接收值为undefined
		 function fn02() {
		 console. log(" fne2...");
		 
		 }
		 var b = fn02();
		 console.log(b);
		 console.log("===================================")

		/* null类型 */
		var num = 1; //数值类型
		var flag = true; //布尔类型
		var str = "Hello"; //字符串类型
		console.log(typeof num); // number
		console.log(typeof flag); // boolean
		console.log(typeof str); // string
		//.1) 使用typeof操作符测试 null 返回 object 字符串。
		var aa = null;
		console.log(typeof aa); //object
		
		// 2) undefined 派生自null, 所以等值比较返回值是true。 未初始化的变量和赋值为null 的
		console. log(undefined == null); // true
		//只声明未赋值的变量 值为nu11的变量相等
		var bb;
		var cc = null;
		console.log(bb == cc); // true
		
		console.log("---------");
		/*数值型*/
		// 1和1.0相等
		console.log(1==1.0); // true
		//1+10L0于2
		var n=1+1.0;
		console.log(n); // 2
		//将浮点型的整数转换成整型1.0 -> 1
		console.log(1.0);
		
		console.log("==========");
		/*字符串类型*/
		// 1.使用或““引起来
		var s1 = "Holld";
		var s2 = "World";
		console.log(s1,s2);
		// 2.可以使用”+”对字符串进行拼接
		console.log(s1+s2);
		 </script>

五、类型转换

        1.自动类型转换
                    1.转字符串:所有的值转字符串都是加引号
                    2.转布尔型:有值为true,无值为false (0为false, 非0为true)
                    3.转数值型:空值是0,非空的数值型字符串能转换，非数值字符串转换为NaN
         2.函数转换
                    parseInt()  转整数型
                    parseFloat()  转浮点型
           注:转换时会从值的第零个位置开始找有效数字，直到找到无效数字位置.parseFloat在转换时会比parseInt多识别一个小数点。

        3.显示转换
                tostring()将值转换成字符串
                toFixed()保留指定小数位， 四舍五入
                注:值不能为null
                
                JS为Number. Boolean. string 对象提供了构造方法，用于强制转换数据类型，转换的是值的全部，不是部分。

<script type="text/javascript">
		 //parseInt
		 console. log(parseInt("123abc"));
		 console. log(parseInt(" abc123"));
		 console. log(parseInt("123.4abc")); 
		 console. log(parseInt("123"));
		 console. log("123")
		 
		 console. log("=================")
		
		 var a=1;
		 var b = "2";
		 console. log(a+b); // 12
		 console. log(a + parseInt(b));
		 
		 console. log("=================")
		 //parseFloat
		 console. log(parseFloat("123abc"));//123
		 console. log(parseFloat(" abc123"));//NaN
		 console. log(parseFloat("123.4abc"));//123.4
		 console. log(parseFloat("123"));//123
		 console. log(parseFloat("123.4.5"))//123.4
		 
		 console. log("======================")		 
		 //toString()
		 var aa = 10;
		 console.log(aa);
		 console.log(aa.toString());
		 var bb=null; //空值
		 // console. log(bb. toString()); // Cannot read property 'toString' of null
		 // toFixed()
		 var cc=1.346;
		 console.log(cc.toFixed(2)); // 保留两位，四舍五入
		 
		 console.log("================")
		 var q="1";
		 var w="a";
		 var e="123abc";
		 var r="123.4";
		 var t="123.4abc";
		 console.log(Number(q));
		 console.log(Number(w));
		 console.log(Number(e));
		 console.log(Number(r));
		 console.log(Number(t));
		 
		  console.log("================")
		  // Boolean
		  console. log(Boolean("a"));//true
		  console. log(Boolean(0));//false
		  console. log(Boolean("1"));//true
		  console. log(Boolean(null));//false

		  console.log("================")
		  // string
		  console.log(10);
		  console. log(String(10));
		  console.log(null);
		  console. log(String(null));
		 </script>