Web前端-JavaScript--基础1

                                          javascript基础

js书写位置

js可以书写的位置有三块:
    1.内嵌式   在当前页面的body最后(实际开发推荐这样做) 定义script标签
            标签内部写js代码

<script>
  
    alert("我是内嵌式js代码")
    
</script>
    2.行内式  在标签上面通过一些简单的事件 来写简单js代码(实际开发不推荐 因为行为和结构没有分离)

    3.外链式  定义js文件  通过script标签的src属性引入该js文件
        注意点:
            一旦script标签通过src引入了其他js文件
            那么该script标签内部的任何代码都将不再执行!!!!!!
<script src="out.js">
    //这个script标签已经通过src引入外部的js文件了  那么这里面的任何js代码都将不再执行
    
</script>

js初步使用

<script>
    
//    弹窗功能
    alert("弹了个窗!!!");
//    控制台打印
    console.log("我在哪里呢?");//程序调试

        //普通日志信息
    console.log("我是在控制台输出")
//    警告日志信息
    console.warn("井盖丢了...")
//    错误日志输出
    console.error("井盖爆炸了...")


//  弹出普通消息对话框
    alert("提示你哈哈")
//    选择对话框
    var choice=confirm("请问你是傻子么?")
    console.log(choice)
//    输入对话框
    prompt("输入你的银行卡密码:")

</script>

js的变量:


​​   顾名思义,值可以变化的量

    js变量分类:

        基本数据类型(简单数据类型)
            boolean(布尔值) string(字符串) number(数值型)

            特殊:  NULL(空值) undefined(未定义)

        复合数据类型(复杂数据类型)(后面)
            object  Date Math...

 

number(数值型):包含整数和小数

string(字符串类型):
        可以单引号 也可以双引号
        必须成对出现

 boolean(布尔值):只有两个值 true和false
    true 表示真

    false表示假

在js中声明变量 用 var(variable:变量)
var 变量名; 声明一个变量
var 变量名=变量的值;  声明并赋值一个变量(就是创建变量)

标识符的命名规则 以及命名规范


​​​​​​命名规则(必须遵守):

    1.变量名由 数字,字母,下划线,美元符号组成
    2.不能以数字开头
    3.严格区分大小写
    4.长度限制为255个字符
    5.不能是关键字或者保留字
    6.汉子可以作为变量名 但是不建议使用(不要使用!!!!!);

命名规范(潜规则):

    1.见名知意

    2.驼峰命名法

变量类型的判断

   var a=30;
    var b=56.23;
    
// typeof 变量名  返回当前变量类型
    console.log(typeof a);//number
    console.log(typeof b);//number

交换两个变量的值

方法一:

   var temp=a;
    a=b;
    b=temp;

方法二:

 var temp=a+b;

    a=temp-a;
    b=temp-b;

方法三:

a=a+b;
    b=a-b;
    a=a-b;

方法四:

 b=(a+b)-(a=b);

number数值型


  包含整数和小数(浮点数)
    由于小数时非精确值  所以 在js中 不推荐使用小数直接计算
永远不要测试某个特定的浮点数值(不要判断两个浮点数是否相等)

console.log(0.1+0.2);//0.300000000004 不推荐小数直接进行计算
//    console.log(0.4+0.5);
//    console.log(0.07*100);//7.000000000000001
获取整数最大值
console.log(Number.MAX_VALUE);
获取整数最小值
console.log(Number.MIN_VALUE);

console.log(1/0);//正无穷  Infinity

console.log(-1/0);//负无穷  -Infinity

 

 当尝试进行数学计算时 而当前表达式中有无法当做数字处理的结果
 那么该结果返回NaN Undefined和任何数值计算都是NaN
var str="哈哈";
    var b=16;
    console.log(str-b);//NaN    Not a  Number 不是一个数字
   
isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true

 只要是 非数字 就返回true
 console.log(isNaN("haha"));//true
 console.log(isNaN(69));//false
 console.log(isNaN("58"));//false
 console.log(isNaN(NaN));//true

这里面的true 是进行了 转换 true转换成1  false转换成0
//    console.log(isNaN(true));//false
//    console.log(isNaN(false));//false

string字符串类型:

字符串的常用方法:

*   字符串的常用方法:
    *       获取指定字符的方法:
    *           str.charAt(index) 根据索引位置找到指定索引位置的字符
    *           str.charCodeAt(index) 根据索引位置找到指定索引位置的字符的ACSII值
    *           str[index] html5推出的 
    *ASCII 美国标准信息交换码
 console.log(str.charAt(5));  //根据索引值找到字符
    console.log(str.charCodeAt(0));  //ACSII码
    console.log(str[5]);//根据索引值找到字符
    *
    *
    *       截取:
    *           str.slice(start,end) 包含头不包含尾
    *                       start 表示从指定为到最后
    *           str.substring(start,end) 跟slice一毛一样
    *
    *           str.substr(start,length)
    *
    *   因为字符串的值不可变特性 所以字符串没有删除方法
console.log(str.slice(2,5));  //包含头不包含尾
    console.log(str.substring(2,5));//包含头不包含尾
    console.log(str.substr(3,5)); //从第几位  截取多少个
    *
    *
    *       拆分:
    *           str.split("规则字符串")
    *               按照指定规则把字符串拆分成几个部分
    *               返回值是一个数组
    *
    *           str.split("") 把字符串转换成数组 每一个字符都是数组的元素
    *
    *           str.split("规则字符串",数量)
    *               拆分后  只拿指定数量的部分放到数组
console.log(str.split(""));
    console.log(str.split("2"));//按照2 去切
    console.log(str.split("2",2));//按照2 去切  只要2
    *
    *       替换:
    *           str.replace("原字符串","新字符串")
    *               默认只替换第一个找到的
    *            替换所有要借助正则表达式(js特效最后补充讲)
 console.log(str.replace("e","w"));
 console.log(str.replace(/5/gi,"8"));   //g  是全部  i 是忽略大小写
    *
    *
    *       其他:
    *           str.concat()字符串拼接
    *
    *           str+"dsf"
    *
    *           str.indexOf("字符序列")
    *
    *           str.trim()去掉首尾空格  Html5推出的
    *
    *           toLowerCase() 转换小写
    *           toUpperCase() 转换大写

indexOf补充 

    var str="HelloWorldJavaScript";


//        根据字符或者字符序列找到第一个出现的位置
    /*console.log(str.indexOf("o"));
//      从指定位置开始往后找 第一个出现的
    console.log(str.indexOf("o",5));*/
//                从后往前找 第一个出现的位置
   /* console.log(str.lastIndexOf("a"));
//                从指定位置开始往前找 第一个出现的
    console.log(str.lastIndexOf("a",12));*/
 console.log(str.indexOf("J"));
    console.log(str.trim());//去掉首尾空格
    console.log(str.toUpperCase());//转大写
    console.log(str.toLowerCase());//转小写
翻转字符串
var strArr=str.split("");
    console.log(strArr);
    str1=strArr.reverse()
        .join("");
    console.log(str1);

字符串可以是单引号 也可以是双引号 但是一定要成对出现
var str="haha";
  var str1='嘿嘿';

通过字符串的方式创建标签

var btn=document.getElementsByTagName("button")[0];
    var h1=document.getElementsByTagName("h1")[0];
    var box=document.getElementById("box");
    btn.onclick=function () {
        //a标签不写href 而是写name表示当前a标签作为一个锚点标记
//        h1.innerHTML="我是锚点".anchor("aa");
//        "文本内容".link("href的地址")  创建一个超链接标签

//        h1.innerHTML="我是超链接".link("http://www.baidu.com")

//        h1.innerHTML="我是big标签的内容".big();
//        box.innerHTML="我是big标签的内容".big();
//        box.innerHTML="我是big标签的内容".small();
//        box.innerHTML="我是bold".bold();

    }

 

获取字符串长度
console.log(str.length);//4
console.log(str1.length);//2
字符串的转义符:
作用是 :避免混淆
\"  把双引号转换成一个普通的 用来输出的双引号 而不作为有意义的字符串开头结尾
var str="小明说:\"烤烧真好吃\"";
var str1='小强说:\'hehe\'';
var str2='小明说:"吾后必有大成"';
console.log(str);
console.log(str1);
console.log(str2);
console.log("\\\\");
字符串拼接:
    字符串和其他类型的变量 如果进行+号 运算 那么会自动进行字符串拼接
    结果会转换成字符串类型
 console.log("嘿嘿"+10+20);//嘿嘿1020

console.log("嘿嘿"+(10+20));//嘿嘿30

 console.log("哈哈"+true);//哈哈true
字符串和number类型进行 减法 乘法 除法运算时
会尝试把字符串转换成数字 然后进行计算
如果字符串无法转换数字 则结果是NaN 
console.log("100"-38);//62
 
 console.log("100"*30);//3000

console.log("hah10"/5);//NaN

将变量转换成字符串的三个方法:


​​​​  1. 变量.toString() 结果就是字符串 (几乎每一个值都有toString()方法)

      2.String(变量)  结果就是字符串

   3.变量+""  结果自动转换成字符串类型

 var a=10;
   
   console.log(typeof a.toString());

//   console.log(10.toString());//错误写法
//    在当前值不方便直接调用toString()时  可以使用该函数
    console.log(typeof String(10));
    
    console.log(typeof (10+""));

转换成数值的三个方法:


    parseInt()  Number()  parseFloat();

    这三个方法都是能够讲字符串或者布尔值转换成数值

    parseInt和Number方法 都是能够转换成数值型,区别在哪里?

    parseInt:
        从字符串的左边开始解析,解析到非数字停止
        返回解析出来的数字部分
        如果左边一开始就是非数字 则直接返回NaN

console.log(parseInt("66"));

    Number:
        必须保证整个字符串都是纯数字
        否则就返回NaN

console.log(Number("98"));

    parseFloat:
        能够从字符串中解析出一个小数
        解析的效果跟parseInt一模一样

console.log(parseFloat("3.68"));

算术运算符:


​​​​    + -  *  /  %(取模)  ++  --
    %取模: 求余数
++/-- :单目运算符  a++  --b
a+b: 双目运算符
++/--: a++ 相当于a=a+1;  也就是自增一   --同理
++/--放在操作数前边或者后面时的区别:
    如果++/--不参与其他运算  那么放前放后 没有任何区别 就是自增一/自减一

    一旦++/--参与其他运算时 前后就有区别了:
        当++在操作数后面时  那么先将当前操作数本身的结果拿出来给其他算式使用
                然后再自己独自的自增一
         当++在操作数前边时  先将操作数+1 然后将加完的结果给其他算式使用
        --完全同理 

var a=3;
    var b=3;

    var num1=a++;
    var num2=++b;

    console.log("a的值:"+a);
    console.log("b的值:"+a);
    console.log("num1的值:"+num1);
    console.log("num2的值:"+num2);

赋值运算符:
​​

=  += -= *= /=  %=

    a+=5; //相当于 a=a+5
    a-=5;//a=a-5
    a*=5;//a=a*5
    a/=5;//a=a/5
    a%=3;//a=a%3;

比较运算符:


​​​​​    >  <  >=  <=  ==(相等)   ===(全等) !=(不相等) !==(不全等)

==(相等):
    如果比较的两个值
        类型一样:
            那么直接比较值是否相等
            相等返回true
            不相等返回false
       类型不一样:
            先将类型转换成同一个类型
            相等返回true
            不相等返回false

===(全等):
    如果比较的两个值:
        类型一样
            那么直接比较值是否相等
            相等返回true
            不相等返回false
         类型不一样:
            直接返回false

!=(不相等)
    如果比较的两个值:
        类型一样:
            那么直接比较值是否不相等
            不相等返回true
            相等返回false

        类型不一样:
            先把两个类型转换成同一个类型 在比较值是否不相等
            不相等返回true
            相等返回false

   !==(不全等)
       如果比较的两个值:
            类型一样:
                  那么直接比较值是否不相等
                不相等返回true
                相等返回false

             类型不一样:
                直接返回true

三目运算符: 专门用来取得一个结果的

true取?后的值

false取:后的值

 var b=10;
    var c=20;

    var a=c>b?c:b;
    console.log(a);

逻辑运算:



    &&(与  并且)  ||(或  或者)  !(非  取反)

逻辑运算就是操作布尔值或者布尔表达式的
    布尔表达式: 结果为布尔值的表达式

全真才真 一假即假
    console.log(true && true);//true
    console.log(true && false);//false
    console.log(false && true);//false
    console.log(false && false);//false

全假才假 一真即真
    console.log(true || true);//true
    console.log(true || false);//true
    console.log(false || true);//true
    console.log(false || false);//false

js中的&& || 具有短路效果

    短路与&&的效果:
        左边为true 右边继续参与运行
        左边为false 右边不参与运行

    短路或||的效果
        左边为false 右边继续参与运行
        左边为true 右边不参与运行

     短路效果使用时要注意:
         如果里面有赋值运算  那么要注意了  有可能赋值失败

逻辑运算:
    &&(与  并且)  ||(或  或者)  !(非  取反)

逻辑运算就是操作布尔值或者布尔表达式的
    布尔表达式: 结果为布尔值的表达式
    
js中的&& || 具有短路效果

    短路与&&的效果:
        左边为true 右边继续参与运行
        左边为false 右边不参与运行

    短路或||的效果
        左边为false 右边继续参与运行
        左边为true 右边不参与运行


     短路效果使用时要注意:
         如果里面有赋值运算  那么要注意了  有可能赋值失败

 

其他逻辑运算

 

如果逻辑运算符两边操作的是布尔值或者布尔表达式 那么结果将是布尔值
        a>b && b<c  返回一个布尔值
//        a>b<c 错误写法 这是数学写法 不是编程写法

        如果逻辑运算符两边操作的是除布尔值以外的其他值 那么最后结果将返回其他值
        3 && 4 结果是4        
        && 和|| 操作不是布尔值的情况下  那么要记住一个转换规则:
            ""(空字符串) 0 undefined  NaN null false  这个6个兄弟
            在逻辑运算中会被当做false处理  剩下其他所有!!!!都是true

        &&运算:
            如果都没有6兄弟  那么一直运算到最后 去最后的值

            如果中间有6兄弟(被当做false处理) 那么取导致false的那个值
                    并且马上停止运算
        ||运算:
           如果都是false 那么取最后的那个false的值
           如果中间有true 那么取中间true的那个值 并且马上停止运算

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值