zoukankan      html  css  js  c++  java
  • js基础1


    <script "text/javascript"(表示script之间的是文本类型text,javascript是为了告诉浏览器里面的文本属于JavaScript语音)></script>
    script文件简称js文件

    js三种 引入方式:1内部(放入<script></script>内),
    2外部(.js文件,<script type="text/javascript" src"../"></script> ) 路径./代表同级路径,[一般js文件不放在<head></head>里,对用户体验不是很好,将js文件body最后,优化用户体验]
    3内嵌


    声明变量
    var a;
    a=10;
    以上简写为:var a:10;

    1.
    var a=10;
    var a=20;
    var c=a+b


    console.log(c) c直接为30
    对数字直接储存

    2.
    var a="hello";
    var a="world";
    var c=a+b


    console.log(c) c直接为"helloworld"
    为文字进行编码,比较占储存空间

    数据5种基本类型:
    1.数据类型
    2.字符串类型

    引入文本
    var a;
    a="hello"; 业内达成共识:默认优先使用单引号。 JavaScript语言规范
    引号内还有引号,a='what s this?"方式1:将外面的单引号变成双引号;将中间改成双引号 2:中间使用进行转译a='what"s" th\ns'? 表示换行



    3.布尔值类型(或者称为原始类型,true,false)
    4.null(是否为空)

    5.undefined
    a=undefined
    console.log(a)

    变量的命名规则:
    1,第一个字符可以是任意unicode(编码格式)大小写字母,以及美元符号($)和下划线(_)
    2,第二个字符以及后面的字符,还可以用数字,第一个字符不能是数字
    不能使用保留字(关键字)作为变量名

    合法变量名:arg0 _tmp $elem
    不合法变量名:1a 23 *** a+b -d var return

    算数操作符:
    操作符
    var a=10+20; 一元操作符(一个操作数) 二元操作符(两个操作数) 三元操作符(三个操作数)


    返回值,求的值最后的结果
    var n=10+20(30)


    自增操作符放在操作数的前面,会把操作数加1之后的值做法为返回值;自增操作符放在操作数的后面,会把操作数加1之前的值作为返回值
    一元操作符
    1,递增和递减操作符(++ ——),
    2,一元加和减操作符
    一元加,把其他类型的数据,转化成number类型的数据(对非数值应用一元加操作符时,该操作符会把这个数值强制)
    一元减,取操作数的相反数 例:var a=-3;var b=-a;console.log(b)

    typeof操作符 返回值是操作数的类型的名称的操作符(查看数据类型的操作符)


    console.log(10/5)和console.log('10'/5)打印显示的结果是一样的
    console.log('abc'*'5')打印显示的结果是NaN,意思是not number,没有数字)

    console.log(10+'20')打印显示的结果是1020
    1,字符串拼接操作符+ (把两个操作数都转换成字符串以后,在对这两个字符串收尾拼接)
    2,算数加法+ (把两个操作数都转换成数字之后,在进行数学上的加法)
    以上两个判断规则:两个操作数中只要有一个为字符串,那么这个加号就代表字符串拼接的操作符

    逻辑操作符:
    var a =true; var a ='';引号中为空,代表false,否则代表true
    var b=!a;
    console.log(b);打印出来是false
    任意类型的值都可以转换成布尔值类型的值:
    对象=>true
    空字符串=>false
    非空字符串=>true
    数值0=>false
    任意非0数值(包括infinity:无限大)true
    null:false
    nan:false
    undefined:false


    操作符逻辑非(!),求操作数的布尔值,返回这个布尔值相反的情况。例:var a=0; var b=!a;console.log(b) 打印结果为true
    逻辑与(&&),求第一个操作数的布尔值,如果这个布尔值为true,那么最终的返回值就是第二个操作数,否则最终的返回值是第一个操作数。 例1.var a=true; var b=false; var c=a&&b; console.log(c); 打印结果是false
    例2.var a=10;var b='hello';var c=a&&b; console.log(c); 打印结果为hello
    逻辑或(||)求第一个操作数的布尔值,如果这个布尔值为true,那么最终的返回值就是第一个操作数,否则最终的返回值是第二个操作数。var a='';var b=20; var c=a||b; console.log(c) 打印结果为20
    短路操作
    正常例var a=10; var b=true&&(a++); console.log(a,b) 打印结果为11 10
    短路操作例var a=10; var b=false&&(a++); console.log(a,b) 打印结果为10 false
    正常例var a=10; var b=false||(a++);console.log(a,b);打印结果为11 10
    短路操作例var a=10; var b=false||(a++);console.log(a,b);打印结果为10 true


    相等操作符(==)例var a=10;var b=20; var c=a==b; console.log(c);打印结果为flase
    例var a='10';var b=10; var c=a==b; console.log(c); 打印结果为true
    全等操作符(===)
    不相等操作符(!=)
    不全等操作符(!===)
    优先使用全等以及不全等操作符(避免以外的事情产生)

    赋值(=)var a=b=c=10; console.log(a,b,c)打印结果为10 10 10 声明三个变量的话,最好分别写;先算赋值符右边的部分,从右至左

    var a=10; var b=20; var c=30; var d=a<b<c(这里有两个返回值);console.log(d)打印结果为true
    var a=10; var b=20; var c=2; var d=a<b<c;console.log(d)打印结果为true
    var a=10; var b=20; var c=2; var d=a<b&&b<c;console.log(d)打印结果为false

    条件运算符-起判断作用(三目运算符,有三个操作数)var a=true?10:20; console.log(a) 打印结果为10

    条件语句
    if语句,if(10+10){

    var a=2;
    switch(a){
    case 1:console.log(1);
    case 2:console.log(2);
    case 3:console.log(3);
    case 4:console.log(4);

    }匹配到a=2的值以后,将case2 以及后面的都打印出来

    switch语句表示循环
    break语句:介绍整个switch语句,必须放到switch的语句块里面,(只执行选择到的,后面的不会显示,表示结束)
    var a=2;
    switch(a){
    case 1:console.log(1);break;
    case 2:console.log(2);break;
    case 3:console.log(3);break;
    case 4:console.log(4);break;
    default:console.log(‘一个都没有’)~一个都没有匹配到的时候显示
    }


    推荐使用atum、sublime编辑器编辑代码

  • 相关阅读:
    剑指Offer_栈的压入序列是否有对应的弹出序列
    剑指Offer_Java_顺时针打印矩阵(二维数组)
    排序算法Java代码实现(四)—— 归并排序
    排序算法Java代码实现(六)—— 堆排序
    排序算法Java代码实现(五)—— 快速排序
    排序算法Java代码实现(三)—— 插入排序 和 希尔排序
    CSS sprites
    局部变量和参数传递的问题
    隐藏元素的方式有哪些
    box-sizing属性的的用法
  • 原文地址:https://www.cnblogs.com/duanfuying/p/5967459.html
Copyright © 2011-2022 走看看