11 (H5*) js第1天 基本数据类型、变量
目录
1: js的介绍
2：写js代码注意的地方
3：变量
4：变量的命名和作用
5：变量的类型
6：Number类型
7：string类型
8：类型转换
9：操作符号
复习
<script> /* * * 复习: * JavaScript简称为JS * JavaScript是什么? * 是一门脚本语言:不需要编译,直接运行 * 是一门解释性的语言:遇到一样代码就解释一行代码 * C#语言是一门面向对象的语言,也是编译语言,是.net技术使用的 * 是一门动态类型的语言---不解析 * 是一门基于对象的语言---不解释 * 是一门弱类型的语言,声明变量的时候都使用var * 强类型的语言:C#就是-----> * 存储一个数字: int num=10; float num2=90.3; * * JS分三个部分: * 1. ECMAScript标准: js的基本的语法 * 2. DOM * 3. BOM * * JS用了将近10天来发明的 * * 变量---作用:操作数据(存储数据,读取数据) * 变量的声明: * var 变量名字; * var num; * 变量的初始化 * var 变量名字=值;---->字面量的方式赋值 * var str="您好啊"; * js中大小写是区分的 * js中的字符串可以使用单引号,也可以使用双引号---暂时推荐使用双引号 * js中每行代码结束要有分号 ; * 数据类型: * js中的原始数据类型: number,string,boolean,undefined,null,object * null和undefined数据是没有太大意义的,null是很有意义的---对象的位置讲 * NaN----不是一个数字,不是一个数字和一个数字计算--->结果就是NaN * isNaN()--->判断这个变量或者这个值是不是 不是一个数字---如果不是一个数字结果是true,如果是一个数字结果false * * number数据类型----无论是整数还是小数都是number数据类型的 * string数据类型----字符串,获取字符串的长度:变量名.length * boolean数据类型---两个值,true，false * null----只有一个,null * undefined----只有一个,undefined,一个变量声明了,没有赋值 * object---对象-----面向对象的时候讲解 * * 类型转换: * 其他类型转数字 * parseInt()---->转整数 * parseFloat()--->转小数 * Number()---->转数字-----要比上面两个严格 * 其他类型转字符串 * .toString() * String(); * * 其他类型转布尔类型 * Boolean()---->要么是true要么是false * * 运算符:----操作符 * 算术运算符: + - * / % * 复合运算符: += -= *= /= %= * 赋值运算符: = 优先级别是最低的 * 一元运算符: ++ -- * 三元运算符: ? : * 关系运算符: > < >= <= == === != !== * 逻辑运算符: && || ! * * 关系运算符的结果是布尔类型 * 逻辑运算符的结果是布尔类型 * * 表达式1&&表达式2 * 如果有一个为false,整个结果就是false * 表达式1||表达式2 * 只有有一个为true,整个结果为true * !表达式---结果就是取反 * * 案例: 交换两个变量的值 * * * * * * * * * * * * * * * * */ //如果有一个是字母字符串，另一个不是字符串是数字，用 - 或者* 结果是什么？ 为什么要获取变量的数据类型？ 为什么要有数据类型？ 小杨老师你的webstorm用的是什么主题？你是怎样设置的？ // var ch="a"; // var num=10; // console.log(ch*num); // // console.log(num); // //转布尔类型的时候是遵循1是true,0是false 的原则吗 ？ // console.log(Boolean(1));//true // console.log(Boolean(0));//false // console.log(Boolean(11));//true // console.log(Boolean(-10));//true // console.log(Boolean("哈哈"));//true // console.log(Boolean(""));//false // console.log(Boolean(null));//false // console.log(Boolean(undefined));//false </script>
1：js的介绍
<script> /* * * JavaScript :简称:js * js分三个部分: * 1. ECMAScript 标准----js的基本的语法 * 2. DOM------Document Object Model 文档对象模型 * 3. BOM------Browser Object Model 浏览器对象模型 * * * JavaScript是什么？ * 是一门脚本语言 * 是一门解释性语言 * 是一门动态类型的语言 * 是一门基于对象的语言 * * 编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行 * 脚本语言:不需要编译,直接执行 * 常见的脚本语言:t-sql,cmd * * 电脑的硬件---->系统--->客户端的程序--->代码 * 电脑的硬件---->系统--->浏览器--->js代码 * js原名不是JavaScript,而是LiveScript * js的作用?解决用户和浏览器之间的交互的问题 * js现在可以做什么? * * * HTML:是标记语言,展示数据的 * CSS:美化页面 * JavaScript:用户和浏览器交互, * * * * */ </script>
2: 写js代码注意的地方
//js代码的注意问题
/*
*
* 1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
* 2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
* 3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以
* 但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
*
* 4.有可能会出现这种情况:script标签中可能同时出现type和language的写法.
*
*
* 5.script标签在页面中可以出现多对
* 6.script标签一般是放在body的标签的最后的,有的时候会在head标签中,目前讲课的时候都在body标签的后面(body中的最后)
*
* 7.如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码
*
* */
3：变量
<script> /* * 变量:========> * 操作的数据都是在内存中操作 * js中存储数据使用变量的方式(名字,值--->数据) * js中声明变量都用var---->存储数据,数据应该有对应的数据类型 * js中的字符串类型的值都用双引号或者单引号 * * 存储一个数字10 * 变量的声明及赋值 * var num=10; * 存储一个名字 * var name='小黑'; * * */ /* * * 变量---作用,存储数据的或者是操作数据 * * 变量声明(有var 有变量名字,没有值) * * 变量初始化(有var 有变量名字,有值) * * 变量声明的方式: * var 变量名字; * * */ //var number;//变量的声明,此时是没有赋值的, //一次性声明多个变量 //var x,y,z,k,j;//都是声明,没有赋值 //变量的初始化(变量声明的同时并且赋值了) // = 的意义:赋值的含义 //存储一个数字10 var number = 10; //存储一个5 var number2 = 5; //存储一个人的名字 var name = "小黑"; //存储真(true) var flag = true; //存储一个null--->相当于是空 var nll = null; //存储一个对象 var obj = new Object(); </script>
4：变量命名和作用
<script> /* * * * 变量作用:用来操作数据的(可以存储,可以读取) * 变量的声明:没有赋值 * var 变量名; * 变量的初始化:有赋值 * var 变量名=值; * * 注意的基本的代码的规范 * js中声明变量都用var * js中的每一行代码结束都应该有分号;(写代码有分号的习惯) * js中的大小写是区分的: var N=10; n * js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号 * * 变量名的注意问题---变量名的命名规范,要遵循驼峰命名法 * 1.变量的名字要有意义, * 2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字 * 3.变量名一般都是小写的 * 4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法 * 5.不能使用关键字(系统自带的一些单词,不能使用) * 6.不会单词用拼音,拼音也要遵循驼峰命名法 * * var bigNumber=10; * * * * * * * */ //声明变量并初始化---变量的初始化----声明变量赋值 //声明了一个num的变量存储了一个数字100 //var num=100; //输出这个变量的值 //alert(num);//弹框 //浏览器的控制台在浏览器中的开发人员工具中(快捷键:F12)的console的选项中 // console.log(num);//把内容输出在浏览器的控制台中 //声明多个变量然后一个一个的赋值 // var num1,num2,num3;//声明 // //依次的赋值 // num1=10; // num2=20; // num3=30; //声明多个变量并且赋值 //var num1=10,num2=20,num3=30; // var num=10; // var $break=10; // var shuZi=10; </script>
5：变量的类型
如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义
<script> //声明变量并初始化 // var num=10; //js中的数据类型有哪些? //js中的原始数据类型:number,string,boolean,null,undefined,object /* * number:数字类型(整数和小数) * string:字符串类型(的值一般都是用单引号或者是双引号括起来) "34" * boolean:布尔类型(值只有两个,true(真1),false(假0)) * null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null * undefined:未定义,值只有一个:undefined * 什么情况下的结果是undefined * 变量声明了,没有赋值,结果是undefined * 函数没有明确返回值,如果接收了,结果也是undefined * 如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义 * object:对象----> * * */ // var num; // console.log(num+10);//NaN-----not an number---->不是一个数字 // var num; // console.log(num); //如何获取这个变量的数据类型是什么? 使用typeof 来获取 //typeof 的使用的语法 /* * 都可以获取这个变量的数据类型是什么! * typeof 变量名 * typeof(变量名) * * * * */ var num = 10; var str = "小白"; var flag = true; var nll = null; var undef; var obj = new Object(); //是使用typeof 获取变量的类型 console.log(typeof num);//number console.log(typeof str);//string console.log(typeof flag);//boolean console.log(String(nll));//是null console.log(typeof nll);//不是null console.log(typeof undef);//undefined console.log(typeof obj);//object console.log(typeof(num)); // // // console.log("10"); // console.log(10); </script>
6：Number类型
<script> //var num = 12; /* * 数字类型:整数和小数 * * num=20;整数 * num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点) * 所有的数字都是属于number类型 * 其他的语言: * 整数类型:int * 单精度浮点型:float * 双精度浮点型:double * * 数字: 为什么都是8位，因为一个字节是8位， * 二进制:遇到2进一 * * 00000001-----1 * 00000010-----2 * 00000011-----3 * 00000100-----4 * 00000101----5 * 00000110----6 * 00000111-----7 * 00001000-----8 * 00001001----9 * 八进制:遇到8进一 * 00000001 * 00000002 * 00000003 * 00000004 * 00000005 * 00000006 * 00000007 * 00000010-----8 * 00000011-----9 * 00000012-----10 * 十进制:遇到10进一 * 0 * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 十六进制:遇到f进一 * 00000001 * 00000002 * 00000003 * 00000004 * 00000005 * 00000006 * 00000007 * 00000008 * 00000009 * 0000000a----10 * 0000000b---11 * 0000000c----12 * 0000000d---13 * 0000000e---14 * 0000000f---15 * 00000010---16 * 00000011---17 * 00000012---18 * 0f12a * * */ /* * * * js中可以表示哪些进制 * var num=10;//十进制 * var num2=012;//八进制 * var num3=0x123;//十六进制 * * * */ // var num=12;//十进制 // console.log(num); // var num2=012;//八进制 // console.log(num2); // var num3=0x1a;//十六进制 // console.log(num3); // var num=0x1f; // console.log(num); </script> <script> //数字类型有范围: 最小值和最大值 // console.log(Number.MAX_VALUE);//数字的最大值 // console.log(Number.MIN_VALUE);//数字的最小值 //不要用小数去验证小数. // var x=0.1; // var y=0.2; // var sum=x+y; // console.log(sum==0.3); //不要用NaN验证是不是NaN // var num; // console.log(num+10==NaN); // console.log("您好"=="我好"); //如何验证这个结果是不是NaN,应该使用isNaN() //var num;//-----变量声明了,没有赋值,结果是:undefined //是不是不是一个数字----->不是一个数字吗？ NaN--->不是一个数字 //console.log(isNaN(10)); //判断结果不是一个数字可以使用isNaN(变量名) //var str="您好"; // var num; // var sum=num+10;//NaN // console.log(sum); // console.log(isNaN(sum));//不是数字为true,是数字结果为false </script> <script> //总结: /* * * 数字类型:number类型 * 无论是整数还是小数都是数字类型 * 不要用小数验证小数 * 不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量) * 想要表示十进制:就是正常的数字 * 想要表示八进制:以0开头 * 想要表示十六进制:0x开头 * * * * */ </script>
7：string类型
<script> //var str="10";//字符串 //var str2='20';//字符串 //字符串可以使用单引号,也可以使用双引号 //字符串的长度如何获取? 变量名.length // var str="what are you no sha lei"; // //字符串的个数有多少个?这个字符串的长度是多少 // console.log(str.length); // // var str1="fdshfjworwoijpfskj;akjfpojfiwnmoiwajdoiwajiwaewowj"; // console.log(str1.length); //html中的转义符: < < > > 空格: //js中的字符串里也有转义符 //tab键----水平制表符 // console.log("哈哈\\嘎嘎"); // console.log("哈哈\t嘎嘎"); // console.log("哈哈\"嘎嘎"); // // // console.log('哈哈\'嘎嘎'); //字符串的拼接: 使用+可以把多个字符串放在一起形成一个字符串 //只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加 //如果有一个是字符串,另一个不是字符串,使用- 号,此时会发生计算 // var str1="您好"; // var str2="我好"; // console.log(str1+str2); //console.log("哈哈"+"嘎嘎"+"嘿嘿"); // var str1="10"; // var str2="20"; // console.log(str1+str2); // var str1="10"; // var str2=20; // console.log(str1+str2); // var str1 = "10"; // var str2 = 5; // //浏览器帮助我们自动的把字符串类型转成了数字类型,这种方式叫:隐式转换 // console.log(str1-str2); // var str1="10"; // var str2=5; // console.log(str1*str2); </script>
8：类型转换
<script> //类型转换 //其他类型转数字类型:三种方式: //1.parseInt();//转整数 // console.log(parseInt("10"));//10 // console.log(parseInt("10afrswfdsf"));//10 // console.log(parseInt("g10"));//NaN // console.log(parseInt("1fds0"));//1 // console.log(parseInt("10.98"));//10 // console.log(parseInt("10.98fdsfd"));//10 //2.parseFloat()//转小数 // console.log(parseFloat("10"));//10 // console.log(parseFloat("10afrswfdsf"));//10 // console.log(parseFloat("g10"));//NaN // console.log(parseFloat("1fds0"));//1 // console.log(parseFloat("10.98"));//10.98 // console.log(parseFloat("10.98fdsfd"));//10.98 //3.Number();//转数字 // console.log(Number("10"));//10 // console.log(Number("10afrswfdsf"));//NaN // console.log(Number("g10"));//NaN // console.log(Number("1fds0"));//NaN // console.log(Number("10.98"));//10.98 // console.log(Number("10.98fdsfd"));//NaN //总结:想要转整数用parseInt(),想要转小数用parseFloat() //想要转数字:Number();要比上面的两种方式严格 //其他类型转字符串类型 //1 .toString() // var num=10; // console.log(num.toString());//字符串类型 // //2 String(); // // var num1=20; // console.log(String(num1)); //如果变量有意义调用.toString()使用转换. // 没有意义：比如只声明、没有赋值。。。还有null。 //如果变量没有意义使用String()转换 // var num2; // console.log(num2.toString()); // var num3=null; // console.log(num3.toString()); //这个可以 // var num2; // console.log(String(num2)); // var num3=null; // console.log(String(num3)); //其他类型转布尔类型 //1 Boolean(值); // // console.log(Boolean(1));//true // console.log(Boolean(0));//false // console.log(Boolean(11));//true // console.log(Boolean(-10));//true // console.log(Boolean("哈哈"));//true // console.log(Boolean(""));//false // console.log(Boolean(null));//false // console.log(Boolean(undefined));//false // var str=10; // console.log(+str); </script>
9：操作符号
<script> /* * * 操作符:一些符号-----用来计算 * * 1：算数运算符: + - * / % * 2：算数运算表达式:由算数运算符连接起来的表达式 * 3：一元运算符: 这个操作符只需要一个操作数就可以运算的符号 ++ -- * 4：二元运算符: 这个操作符需要两个操作数就可以运算, * 5：三元运算符: -----不讲,明天讲 * 6：复合运算符: += -= *= /= %= * 7：复合运算表达式:由复合运算符连接起来的表达式 * * var num=10; * num+=10;------>就是:num=num+10; * console.log(num);20 * * * 8：关系运算符: > < >= <= ==不严格的 ===严格的 !=不严格的不等 !==严格的不等 * 9：关系运算表达式:由关系运算符连接起来的表达式 * 关系运算表达式的结果是布尔类型 * 10：逻辑运算符: * &&---逻辑与--并且 * ||---逻辑或---或者 * !---逻辑非---取反--取非 * * 11：逻辑运算表达式:由逻辑运算符连接起来的表达式 * 表达式1&&表达式2 * 如果有一个为false,整个的结果就是false * 表达式1||表达式2 * 如果有一个为true,整个的结果为true * !表达式1 * 表达式1的结果是true,整个结果为false * 表达式1的结果是false,整个结果为true * * 12： 赋值运算符: = * * * * * */ // var num1=10; // var num2=20; // // console.log(num1==num2&&5>6); // var num=20; // console.log(num>10||5<0); // var flag=false; // console.log(!flag); // var num=10; // var sum=(num+10)*5; // console.log(sum); // var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true); // console.log(result); // // var num = 10; // // var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22'); // console.log(result2); // var num=20; // var result=num/3;//num变量与3取余--->10/3的余数 // console.log(parseInt(result)); // var num=20; // var result=num%3;//num变量与3取余--->10/3的余数 // console.log(result); // var num=10; // var sum=(num+10)+10; // var num = 20; // num %= 5; // // num=num-5; // console.log(num); // var str="5"; // var num=5; // console.log(str===num); // console.log(5>10);//false // console.log(5>=5);//true // console.log(5>3);//true // console.log(5==10);//false //字面量: 把一个值直接赋值给一个变量 //声明变量并初始化 // var num=10; // // var flag=true; // // var str="哈哈哈"; // // var y=10; // var n=y; </script>
