前端学习:学习笔记(JS部分）
JS的简介
新建步骤
<body> 1.新建Dynamic Web Project 2.在WebContent中Folder新建一个JS目录(文件夹) 3.新建HTML文件 </body>
JS基本语法
内嵌JS代码
<body> <input type="button" value="按钮" onclick="alert('HELLO JS')"/> </body>
内部JS代码
<body> <h1>HTML JS</h1> </body> <script type="text/javascript"> //页面加载完成后,弹出窗口输出“你好” alert("你好啊~~~~我很好"); alert("XXXXXXXXXXXX"); </script>
外部JS代码
<body> </body> <script type="text/javascript" src="Demo03.js"></script>
Demo03.js
alert('我是漂泊在外的JS代码');
变量
<body> </body> <script type="text/javascript"> //定义变量方式1. //代码是从上到下,依次执行. //var price=1888; //price=9999; //price=7777; //定义变量方式2. price = 1111; var year="五"; alert('艾弗森'+year+'代战靴: '+price); alert('艾弗森'+year+'代战靴: '+price); alert('艾弗森'+year+'代战靴: '+price); alert('艾弗森'+year+'代战靴: '+price); alert('艾弗森'+year+'代战靴: '+price); </script>
JS原始数据类型
<body> </body> <script type="text/javascript"> //1.number类型 var num1=100; var num2=123.45; //查看变量数据类型的两种方式 //alert('num1的类型是: '+ typeof num1); //alert('num2的类型是: '+ typeof(num2)); //2.string类型 var str1='韦'; var str2='韦1111'; var str3="我是一个字符串"; //alert('str1的类型是: '+ typeof str1); //alert('str2的类型是: '+ typeof(str2)); //alert('str3的类型是: '+ typeof(str3)); //3.boolean类型 var b1=true; var b2=false; //alert('b1的类型是: '+ typeof b1); //alert('b2的类型是: '+ typeof b2); //4.null类型===> 空类型 var n1=null; //alert(n1); //alert('n1的类型是: '+ typeof n1); //5.undefined类型:===>未定义 var under; alert(under); alert(typeof under); </script>
原始数据类型的转换
<body> </body> <script type="text/javascript"> //1.将number/boolean的变量====> string /* var num=123; alert('转换前:'+typeof(num)); alert('num='+num); num=num.toString(); alert('转换后:'+typeof(num)); alert('num='+num); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var x=true; alert('转换前:'+typeof(x)); alert('x='+x); x=x.toString(); alert('转换后:'+typeof(x)); alert('x='+x); //2.将string/boolean的变量====> number var str1="666"; var str2="123abc456"; var str3="我好帅"; var b1=true; var b2=false; // string number //alert(str1 + 4); //6664 //alert(10+11); //21 //左右两边能相加的时候,是叫加号的作用 //左右两边不能相加的时候,是叫连接符的作用 //开始数据类型转换 str1=parseInt(str1); alert(str1 + 4); //670 str2=parseInt(str2); alert(str2); //123 str3=parseInt(str3); alert(str3); //NaN not a number //boolean是不能转换为number类型,得到的结果依旧是NaN b1=parseInt(b1); b2=parseInt(b2); alert(b1); alert(b2); alert(typeof b2); */ //3.强制类型转换 //Boolean() // string字符串 // '' 或者 "" ==>false // 其他 ==>true // number // 0 ==>false // 非0 ==>true /* var str1=""; var str2="true"; var str3="xxxxxxxx"; str1=Boolean(str1); alert(str1); str2=Boolean(str2); alert(str2); str3=Boolean(str3); alert(str3); var num1=0; var num2=123; var num3=3.1415; alert( Boolean(num1) ); alert( Boolean(num2) ); alert( Boolean(num3) ); //Number() var str1=''; var str2='123'; var str3='333xxx123'; var str4='韦小宝'; alert( Number(str1) ); //0 alert( Number(str2) ); //123 alert( Number(str3) ); //NaN alert( Number(str4) ); //NaN */ var b1=true; var b2=false; alert( Number(b1) ); //1 alert( Number(b2) ); //0 </script>
引用数据类型
<body> </body> <script type="text/javascript"> // java: Student s1=new Student(); // js: var obj = new Object(); alert( typeof obj); //object </script>
运算符
<body> <a href="javascript:void(0)"> 百度一下 </a> </body> <script type="text/javascript"> //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //1.算数运算符 //alert(1+1); //alert('A'+1); //alert(99-'11'); //alert(99-'a'); //alert(10*'3'); //alert(134/'10'); 13.4 //alert(189%10); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //2.逻辑运算符(boolean) // 条件1&&条件2 // && : 两个条件同时为真,结果为真. //alert(true&&false); // 条件1||条件2 // || : 两个条件有一个为真,结果为真. //alert(true||false); // 非运算符 取反 //alert(!true); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //3.比较运算符(boolean) // = 赋值 // == 等于(只比较值) // === 全等于(比较值&&比较数据类型) //alert(11>'22'); //false //alert(10<9); //false //alert(12>=12); //true //alert(13<=11) //false //alert(12!=12); //alert(100=='100'); //alert(100==='100'); //alert(100===100); //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //4.三元运算符 // 判断条件boolean?truexxxx:falseyyyyy //alert(10>7?'大于':'小于或者等于'); //5.void运算符 //6.类型运算符 // typeof 得到数据类型 // instanceof 判断该对象是否为该类的实例 //alert(typeof 10); var v1 ='xxx'; var obj=new Object(); var n1 =new Number(); // 对象名 类名 //alert(v1 instanceof Object); alert(n1 instanceof Object); </script>