javascript基础

166 阅读5分钟

1JavaScript引入方式

1 <!-- 行内式 -->
<button onclick="alert('helloworld!!')">点击</button>

2<!-- 嵌入式 -->
<script>
    // 写js代码
    alert("helloworld!!!")
</script>
3<!-- 
    外部引入js文件
    ./ == 当前目录下
    ../ == 返回上一级目录
    cd .  cd ..
 -->
<script src="./test.js"></script>

注释

// 单行注释
/**/ 多行注释

输出

 <script>
// 1.窗口输出 
alert("你好,世界");
// 2.控制台输出 --输出类型string
console.log("这是第一个输出")   
// 3,prompt  
prompt("请检查")
</script>

变量

     <script>
    // 变量
    // 变量就是装东西的!!!就是存储数据的容器。我们可以通过变量名称获取数据修改数据!!!
    // 1.变量的声明 var是关键词, variable
    var age; 
    // 2.变量的赋值
    age = 10; 

    // 3.变量的初始化
    var age = 10;
    console.log(age) --10

    var age,name;
    var age=10,name="kuaixiang";
    
 </script>

变量命名

           <script>
     age这个变量名是随你定义的吗?
     由字符、数字、下划线、美元符号组成
     不能以数字开头
    不能是关键字、保留字
     严格区分大小写
     变量的定义最好有一定的意义

    var age = 10;
    var Age = 20;
    // var var = 20;
    cosole.log(age);
    var myTest = 10;

    var a = 10;
    var b = 20;
    </script>

数字类型

    <script>
    var num1 = 10;
    var num2 = 19;
    var num3 = 0xa;
     进制之间的转换
      1.数字的范围
     var num4 = ; 9007199254740992
     isNaN == 判断是否不是一个数字
    console.log(isNaN(num1)) // 打印出来false isNot a Number

   </script>

字符串类型

         <script>
     在定义字符串时,单引号和双引号都是可以的!!!
    var string1 = "中国加油";
    var string2 = "武汉加油";
    var string3 = '你好世界';

     var string4 = "这是一个'激动人心'的时刻"
     2.字符串的转义字符
    \n == 换行
     \\ == \
     \" \'
     \t  tab 空格
     \b  空格
    var string4 = "这是一个\"激动人心\"的时刻"
    var string5 = "锄禾日当午,\n汗滴禾下土"
    console.log(string5)

     3.字符串的长度
    var string6 = "你是不是没有好好的学习?"
    console.log(string6.length)

     4.字符串拼接
    var string7 = "床前明月光";
    var string8 = "疑是地上霜";
    console.log(string7 + "\n" +string8)
    </script>

显示年龄的案例

         <script>
     // alert console.log prompt
     注意 一个语句结束之后,最好加;  javascript没有严格要求!!!
    var age = prompt("请输入您的年龄");
    var str = "您今年的年龄已经" + age + "岁了";
    console.log(str)
 </script>

布尔值

     <script>
    // 布尔值类型  true 和false
    // true 真 false 假
    var flag = false; // 布尔值类型
    // 布尔值和数字相加时 true = 1;
    console.log(flag + 1); --1

    var str = flag + "前端课堂"
    console.log(str)-- false前端课程
     </script>

其他数据类型

    <script>
    // undefined 没有被定义的意思,这种一种数据类型!!!
    var name;
    console.log("你好" + name) //你好undefined

    var age = null; // null也是一种数据类型!!!
    console.log(111 + age) //111
     console.log("你好" + age) //你好null
    

     当数字和字符串进行拼接时,会将数字自动转换成字符串!!!
    console.log(111 + "您好") // 111您好

     当字符串数字和数字想减时,就会自动将字符串数字转换成数字!!!
    console.log("110" - 9); //101

    // NaN == not a number
    console.log("你好" - 10); //NaN
    </script>

检测数据类型

 <script>
    var str = "单身快乐";
    var a;
    var b = null;
    // typeof  使用方法 typeof 变量名称
    console.log(typeof str)  //string
    console.log(typeof 110) // number
    console.log(typeof true) // boolean
    console.log(typeof a)  // undefined
    console.log(typeof null) // object
 </script>

字面量

   <script>
    console.log(18)
    console.log("123123");
    console.log(true)
    console.log(undefined)
  </script>   

转换成字符串型

  script>
    // string number boolean object undefined
    // var num = 10;
    var num = 10;
    // num转换成了数字,隐式转换
    console.log("您的数字为:" + num);

    // 显示转换
    var num = 10;
    // to ... string
    console.log(num.toString())
    console.log(String(num))
 </script>

转换成数字类型

       <script>
    // 1.parseInt(变量) --整型
    // 这个函数不仅可以转换字符串,而且转换出来的是一个整数
    console.log(parseInt('3.1415926')) --3
    console.log(parseInt('3.9415926')) --3
    console.log(parseInt("110,你好!!!")) --110
    console.log(parseInt("你好,100!!!"))  // NaN

    // 2.parseFloat(变量) //  -- 浮点型  可以将字符串类型转数字
    // float: 浮点 
    console.log(parseFloat('3.1415926')) --3.1415926
    console.log(parseFloat('120px')); --120
    console.log(parseFloat('你好,120')); // NaN
    var sum=parseFloat(0.1)
     var sum2=parseFloat(0.2)
     console.log(sum+sum2);   // 输出0.30000000000000004 不等于0.3 会失精度
     原理:现将十进制的数转化为二进制数 二进制最多位数为53位 超出的截去 //失去精度
     再将二进制数相加转化为十进制数

    // 3.利用Number函数
    var str = "123"
    console.log(Number(str)) --123

    // 4. - 可以隐式转换字符串 /
    console.log('120' - 10); --110
    console.log('123' * 1); --123

    // 5.布尔类型转换成数字
    var flag = false;
    console.log(Number(flag)) --0
 </script>

计算年龄

        <script>
    // 从输入框中得到一个年龄
    var year = prompt("请输入您的出生年龄");
    console.log(typeof year)
    var age = 2020 - year;
    console.log("你的今年的年龄是:" + age);

  </script>

加法计算器

    <script>
    // 从输入框中得到一个年龄
    var year = prompt("请输入您的出生年龄");
    console.log(typeof year) --string
    var age = 2020 - year;
    console.log("你的今年的年龄是:" + age);

 </script>

布尔值案例

   <script>
    // var flag = prompt("请输入您要输入的bool值:");
    // console.log(flag)
    // console.log(Boolean(flag))
    // 在布尔类型转换的时候,如果不是0,'',NaN,null,undefined,其他转换出来的都是true
    console.log(Boolean(1)) --true
   </script>

对于 null 来说,虽然它是基本类型,但是会显示 object,这是一个存在很久了的 Bug

Number()和parseInt()不同

 都可以用来进行数字的转换
 区别在于,当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)
 parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN