JS基础第一天

页面中有什么代码?html--展示内容,css---美化页面的,js---控制页面

    

    * js的代码可以分三个地方写:

    * 1.在html的文件中,script的标签中写js代码

    * 2.js代码可以在html的标签中写---

    * 3.在js文件中可以写js代码,但是需要在html的页面中引入 script的标签中的src="js的路径"

    * 在webstorm工具中打开页面:

    * 1. 右上角有浏览器图标,直接点击即可

* 2. 快捷键: Alt+F2 回车或者上下键选择

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标签,里面写代码

     * 变量:========>

     * 操作的数据都是在内存中操作

     * 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();

* 变量作用:用来操作数据的(可以存储,可以读取)

    * 变量的声明:没有赋值

    * 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;

 //声明变量并初始化

    //    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:对象----> 

typeof 的使用的语法

     * 都可以获取这个变量的数据类型是什么!

     * typeof 变量名

     * typeof(变量名)

总结:

    * 数字类型:number类型

    * 无论是整数还是小数都是数字类型

    * 不要用小数验证小数

    * 不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量)

    * 想要表示十进制:就是正常的数字

    * 想要表示八进制:以0开头

    * 想要表示十六进制:0x开头

    字符串可以使用单引号,也可以使用双引号

    字符串的长度如何获取? 变量名.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);

其他类型转数字类型:三种方式:

    //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()使用转换

    //如果变量没有意义使用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 num=10;

     * num+=10;------>就是:num=num+10;

     * console.log(num);20

     * 关系运算符: >  <  >=  <=  ==不严格的 ===严格的 !=不严格的不等 !==严格的不等

     * 关系运算表达式:由关系运算符连接起来的表达式

     * 关系运算表达式的结果是布尔类型

     * 逻辑运算符:

     * &&---逻辑与--并且

     * ||---逻辑或---或者

     * !---逻辑非---取反--取非

     * 逻辑运算表达式:由逻辑运算符连接起来的表达式

     * 表达式1&&表达式2

     * 如果有一个为false,整个的结果就是false

     * 表达式1||表达式2

     * 如果有一个为true,整个的结果为true

     * !表达式1

     * 表达式1的结果是true,整个结果为false

     * 表达式1的结果是false,整个结果为true

     * 赋值运算符:  =

    //    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;