Web前端-JavaScript--基础1

最新推荐文章于 2022-07-06 14:29:35 发布

yanghainan0318

最新推荐文章于 2022-07-06 14:29:35 发布

阅读量189

点赞数

分类专栏： web前端文章标签： JavaScript

本文链接：https://blog.csdn.net/yanghainan0318/article/details/103459358

版权

web前端专栏收录该内容

49 篇文章 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的那个值 并且马上停止运算