JavaScript基础笔记1

最新推荐文章于 2025-02-18 17:52:54 发布

原创最新推荐文章于 2025-02-18 17:52:54 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解JavaScript的基础概念，包括其发展历程、语法特性、数据类型、变量声明、操作符及类型转换等内容，适合初学者入门。

JavaScript 简称：js
js分三个部分：

ECMAScript 标准----js的基本的语法
DOM------Document Object Model 文档对象模型
BOM------Browser Object Model 浏览器对象模型

JavaScript是什么？

是一门脚本语言
是一门解释性语言
是一门动态类型的语言
是一门基于对象的语言

编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行

脚本语言:不需要编译,直接执行

常见的脚本语言:t-sql,cmd

电脑的硬件----系统---客户端的程序---代码
电脑的硬件----系统---浏览器---js代码

js原名不是JavaScript,而是LiveScript

js的作用?解决用户和浏览器之间的交互的问题

js现在可以做什么?

HTML:是标记语言,展示数据的
CSS:美化页面
JavaScript:用户和浏览器交互,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础</title>
  <script>
    /*
    *
    * */
  </script>
</head>
<body>

<script>
  //js代码
  alert("弹出一个对话框");
</script>
</body>
</html>

结果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础</title>
  <script>
    /*
    * js的代码可以分三个地方写:
    * 1.在html的文件中,script的标签中写js代码
    * 2.js代码可以在html的标签中写---
    * 3.在js文件中可以写js代码,但是需要在html的页面中引入 script的标签中的src="js的路径"
    *
    * 在webstorm工具中打开页面:
    * 1. 右上角有浏览器图标,直接点击即可
    * 2. 快捷键: Alt+F2 回车或者上下键选择
    * */
  </script>

  <script>
    //1.在html的文件中,script的标签中写js代码
    alert("在页面中弹出对话框");
  </script>


  <input type="button" value="按钮" onclick="alert('被点了');"/>
</head>

<body>

<script src="test.js"></script>
</body>
</html>

注意：

在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以。但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
有可能会出现这种情况:script标签中可能同时出现type和language的写法.
script标签在页面中可以出现多对
script标签一般是放在body的标签的最后的,有的时候会在head标签中
如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础：变量</title>
  <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();
  </script>
</head>

<body>

</body>
</html>

注意的基本的代码的规范
* js中声明变量都用var
* js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
* js中的大小写是区分的: var N=10; n
* js中的字符串可以使用单引号,也可以使用双引号

变量名的注意问题---变量名的命名规范,要遵循驼峰命名法
* 1.变量的名字要有意义,
* 2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字
* 3.变量名一般都是小写的
* 4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法
* 5.不能使用关键字(系统自带的一些单词,不能使用)
* 6.不会单词用拼音,拼音也要遵循驼峰命名法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js</title>
  <script>
    //声明变量并初始化---变量的初始化----声明变量赋值
	
    //声明了一个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;
  </script>
</head>
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js注释</title>
  <script>
    /*
    *
    * 注释:是解释代码的含义,给其他的程序员看的
    * 注释的方式:
    * 1.单行注释  //
    * 2.多行注释	
    */

    //单行注释:一般用在一行代码的上面
    /*多行注释:一般是用在函数或者是一段代码的上面*/

    //代码中如果没有注释,不规范
  </script>
</head>
<body>

</body>
</html>

数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js数据类型</title>
  <script>
    //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:对象---->
	 *
     * */

    var num0;
    console.log(num0+10);//NaN-----not an number---->不是一个数字

    var num1;
    console.log(num1);//undefined

    //如何获取这个变量的数据类型是什么? 使用typeof 来获取
    //typeof 的使用的语法
    /*
     * 都可以获取这个变量的数据类型是什么!
     * typeof 变量名
     * typeof(变量名)
     *
     * */

    var num = 10;
    var str = "小白";
    var flag = true;
    var nll = null;
    var undef;
    var obj = new Object();
    //是使用typeof 获取变量的类型
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof flag);//boolean
    console.log(String(nll));//是null
    console.log(typeof nll);//不是null
    console.log(typeof undef);//undefined
    console.log(typeof obj);//object
    console.log(typeof(num));//number
  </script>
</head>

<body>

</body>
</html>

数字类型：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数字类型</title>
  <script>
    /*
    * 数字类型:整数和小数
    *
    * num=20;整数
    * num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)
    * 所有的数字都是属于number类型
	*
    * 其他的语言:
    * 整数类型:int
    * 单精度浮点型:float
    * 双精度浮点型:double
    *
    * 数字:
    * 二进制:遇到2进一
    *
    *   00000001-----1
    *   00000010-----2
    *   00000011-----3
    *   00000100-----4
    *   00000101----5
    *   00000110----6
    *   00000111-----7
    *   00001000-----8
    *   00001001----9
    * 八进制:遇到8进一
    *   00000001
    *   00000002
    *   00000003
    *   00000004
    *   00000005
    *   00000006
    *   00000007
    *   00000010-----8
    *   00000011-----9
    *   00000012-----10
    * 十进制:遇到10进一
    *   0
    *   1
    *   2
    *   3
    *   4
    *   5
    *   6
    *   7
    *   8
    *   9
    *   10
    * 十六进制:遇到f进一
    * 00000001
    * 00000002
    * 00000003
    * 00000004
    * 00000005
    * 00000006
    * 00000007
    * 00000008
    * 00000009
    * 0000000a----10
    * 0000000b---11
    * 0000000c----12
    * 0000000d---13
    * 0000000e---14
    * 0000000f---15
    * 00000010---16
    * 00000011---17
    * 00000012---18
    *
    * */


    /*
    * js中可以表示哪些进制
    * var num=10;//十进制
    * var num2=012;//八进制
    * var num3=0x123;//十六进制
    *
    * */


    //var num=12;//十进制
    //console.log(num);//12
    //var num2=012;//八进制
    //console.log(num2);//10,输出的是十进制
    //var num3=0x1a;//十六进制
    //console.log(num3);//26

  </script>

  <script>

    //数字类型有范围: 最小值和最大值
    console.log(Number.MAX_VALUE);//1.7976931348623157e+308,数字的最大值
    console.log(Number.MIN_VALUE);//5e-324,数字的最小值


    //不要用小数去验证小数.
    var x=0.1;
    var y=0.2;
    var sum=x+y;
    console.log(sum==0.3);//false

    //不要用NaN验证是不是NaN
    var num;
    console.log(num+10==NaN);//false
    console.log("您好"=="我好");//false

    //如何验证这个结果是不是NaN,应该使用isNaN()

    //var num;//-----变量声明了,没有赋值,结果是:undefined
    //是不是不是一个数字----->不是一个数字吗？ NaN--->不是一个数字
    console.log(isNaN(10));//false

    //判断结果不是一个数字可以使用isNaN(变量名)

    var str1="您好";
    var num1;
    var sum1=num1+10;
    console.log(sum1);//NaN
    console.log(isNaN(sum1));//true//不是数字为true,是数字结果为false
  </script>

  <script>
    //总结:
    /*
    * 数字类型:number类型
    * 无论是整数还是小数都是数字类型
    * 不要用小数验证小数
    * 不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量)
    * 想要表示十进制:就是正常的数字
    * 想要表示八进制:以0开头
    * 想要表示十六进制:0x开头
    *
    * */
  </script>
</head>
<body>


</body>
</html>

字符串：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字符串</title>
  <script>
    //字符串可以使用单引号,也可以使用双引号
    //var str="10";//字符串
    //var str2='20';//字符串

    //字符串的长度如何获取? 变量名.length

    var str="what are you no sha lei";
    //字符串的个数有多少个?这个字符串的长度是多少
    console.log(str.length);//23，包括空格
    
    var str1="asdfghjkl;zxcvbnm";
    console.log(str1.length);//17，包括分号

    //html中的转义符: <  &lt; > &gt; 空格: &nbsp;
    //js中的字符串里也有转义符

    //tab键----水平制表符
    console.log("哈哈\\嘎嘎");//  哈哈\嘎嘎
    console.log("哈哈\t嘎嘎");//  哈哈	嘎嘎
    console.log("哈哈\"嘎嘎");//  哈哈"嘎嘎

    console.log('哈哈\'嘎嘎');//  哈哈'嘎嘎


    //字符串的拼接: 使用+可以把多个字符串放在一起形成一个字符串
    //只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加
    //如果有一个是字符串,另一个不是字符串,使用- 号,此时会发生计算
    var str1="您好";
    var str2="我好";
    console.log(str1+str2);//您好我好

    console.log("哈哈"+"嘎嘎"+"嘿嘿");//哈哈嘎嘎嘿嘿
	
    var str3="10";
    var str4="20";
    console.log(str3+str4);//1020

    var str5="10";
    var str6=20;
    console.log(str5+str6);//1020


    var str7 = "10";
    var str8 = 5;
    //浏览器帮助我们自动的把字符串类型转成了数字类型,这种方式叫:隐式转换
    console.log(str7-str8);//5

    var str9="10";
    var str10=5;
    console.log(str9*str10);//50

  </script>
</head>
<body>


</body>
</html>

类型转换：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$类型转换$</title>
  <script>
    //其他类型转数字类型:三种方式:
	
    //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 num4;
    console.log(String(num4));//undefined
    var num5=null;
    console.log(String(num5));//null


    //其他类型转布尔类型

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

  </script>
</head>

<body>

</body>
</html>

操作符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>操作符</title>
  <script>
    /*
     * 操作符:一些符号-----用来计算
     *
     * 算数运算符:  +  -  * / %
     * 算数运算表达式:由算数运算符连接起来的表达式
     * 一元运算符: 这个操作符只需要一个操作数就可以运算的符号  ++  --
     * 二元运算符: 这个操作符需要两个操作数就可以运算,
     * 三元运算符: 
     * 复合运算符: +=  -=  *= /= %=
     * 复合运算表达式:由复合运算符连接起来的表达式
     *
     * 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);//false

        var num=20;
        console.log(num>10||5<0);//true

        var flag=false;
        console.log(!flag);//true

        var num3=10;
        var sum=(num3+10)*5;
        console.log(sum);//100

        var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true);
        console.log(result);//true

        var num4 = 10;
        var result2 =( 5 == num4 / 2 && (2 + 2 * num4).toString() === '22');
        console.log(result2);//true

        var num5=10;
        var result=num5/3;//num变量与3取商
        console.log(parseInt(result));//3

        var num6=10;
        var result=num6%3;//num变量与3取余--->10/3的余数
        console.log(result);//1

        var str="5";
        var num=5;
        console.log(str===num);//false

    //字面量: 把一个值直接赋值给一个变量

    //声明变量并初始化
    //var num=10;
    //var flag=true;
    //var str="哈哈哈";
    //var y=10;
    //var n=y;

  </script>
</head>
<body>


</body>
</html>