javascript 基础

和蔼的阿木木o

已于 2022-08-08 14:45:42 修改

阅读量561

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2022-07-18 18:50:00 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125845203

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

JavaScript的历史

前端三个层

字符串数据类型

javascript嵌入方式

内嵌式

外链式

其他事件

确认对话框

算数运算符

减- 乘* 除/ 取余%

变量的自增/自减

比较运算符

逻辑运算符

JavaScript的历史

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。
ECMA-262标准

JavaScript的历史

JavaScript是一种轻量级的脚本语言。
所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
        JS即Javascript, javaScript是一种广泛用于客户端Web开发的脚本语言，常用来给      HTML网页添加动态功能，比如响应用户的各种操作。
        javascript通过浏览器进行解析！
为什么要学习JavaScript？
        因为你没有选择。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。
        所以，学习JavaScript势在必行！一个合格的开发人员应该精通JavaScript和其他编程语言。如果你已经掌握了其他编程语言，或者你还什么都不会，请立刻开始学习JavaScript，不要被Web时代所淘汰。

前端三个层

字符串数据类型

javascript嵌入方式

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中。
JavaScript代码块一般放在script标签中。
如：
   <script>
                                //js代码块
   </script>
Javascript程序在html页面中具体如何放置？三个位置
1.嵌入式       嵌入在html的<script>标签中
2.外部引入      单独的js文件，后缀名以.js结尾
3.事件定义        嵌入在html标签的属性中

内嵌式

外链式

文件扩展名为 .js
Js文件内写程序代码，如 alert("一个对话框"); 浏览器弹出

其他事件

onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
ondblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次

    <button onclick="alert('一个人')">按钮1</button>
    <button onclick="alert(123)">按钮2</button>

javascript输出方式：

alert(“内容”); //警告框窗口输出
document.write(“内容”); //向文档写入 HTML 表达式或 JS代码
console.log()   控制台输出   工作中调试常用

   alert()函数会阻断JavaScript程序的执行，从而造成副作用；
   console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑

document.write(“内容”); 文档内部输出

    <script>
        document.write(123);
        document.write("<h1>Hello,World</h1>");
        document.write("<p style='background-color: #f00;'>Hello</p>")
        //alert(123)
        //把内容写入到document文档内部
        //document  文档
        // write  写
    </script>

console.log() 控制台输出

        <script>
        console.log(123);
        console.log("123");
        console.error("错误");  //错误级别
        console.warn("警告");   //警告级别
        console.info("信息")
                                    \n  换行
        // console  控制台
        // log      日志
        console.log("每一个星球都有一个驱动核心,\n每一种思想都有影响力的种子,\n感受世界的温度,\n年轻的你也能成为改变世界的动力,\n百度珍惜你所有的潜力,\n你的潜力是改变世界的动力");
        console.log(`每一个星球都有一个驱动核心，
        每一种思想都有影响力的种子。
        感受世界的温度，
        年轻的你也能成为改变世界的动力，
        百度珍惜你所有的潜力。
        你的潜力，是改变世界的动力！`);    //两种方式，第二种使用反引号 `
        </script>

基本数据类型

字符串   string
   数字     number
   布尔     boolean       (true / false)
   null     表示一个“空”的值    可用来清空变量
   undefined (Undefined 这个值表示变量不含有值)

null与undefined 都表示为空

null表示“没有对象”，即该处不应该有值

复合数据类型:
   数组 Array
   对象 Object

    函数 Function

什么是变量：

可变的量。从编程角度讲，变量是用于存储某种/某些数值的存储器。
对于变量的理解：变量是数据的代号。如同人的名字一样。

变量命名规则：

1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
正确: mysum _mychar $numa1
错误: 6num //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(% + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号，如(% + /等)
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
如：break，default，else,void,int,double,public等等

关键字

保留字

定义变量的关键字

var 定义全局变量

let 定义局部变量，只可以在函数内使用

const 定义常量

<script>
    //var num; //声明一个变量num
    //num = 10;  // = 赋值运算符 把右侧的值 赋值给左侧变量
    //close.log(10)
    var num = 10;   //初始化变量 声明变量的同时并进行赋值；
    num = 11;
    console.log(num);
</script>

检测数据类型

<script>
    var flag = 10;
    flag = "hello";
    flag = null;
    flag = undefined;

    console.log(typeof (flag));  //写法1
    // console.log(typeof flag);  写法2
    console.log(flag);
    // 检测基本数据类型
    // typeof 待检测的数据
    // typeof(待检测的数据)
</script>

提示输入对话框

window.prompt();      用于显示可提示用户进行输入的对话框
    使用window.prompt()可以弹出包含输入框的窗口，用户输入的内容将是此函数的返回值
语法：
    var msg = window.prompt("请输入一个数字","默认值");
prompt方法包含一个必须参数和一个可选参数。
第一个参数是必须的，将在窗口中显示的文字，第二个参数是可选的，为文本框的预设值

确认对话框

confirm()方法用于显示一个带有指定消息和 OK 及取消按钮的对话框

语法：
var msg = window.confirm(content) 返回值：布尔类型
注意：content 参数是字符串，要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）

<script>
    var flag = confirm("你准备好了吗");
    var mg = ((flag === true) ? "不错，继续努力" : "怎么了?继续加油");
    console.log(mg);

    var gw = confirm("你确定要删除购物车吗？");
    var le = ((gw === true) ? "删除成功" : "删除失败");
    document.write(le);
     //简写
    var gw = confirm("你确定要删除购物车吗？");
    var le = (gw ? "删除成功" : "删除失败");
    document.write(le);
</script>

<script>
    // alert("hello");
    var age = prompt("请输入您的年龄", 18);
    var user = prompt("请输入您的姓名");
    document.write("<h1>尊敬的梅赛德斯车主:" + user + "您好</h1>");
    console.log(age);
    // prompt(参数1，参数2)
    // 参数1：提示文本
    // 参数2：输入框初始值
    //返回值：函数运行完后得到的具体值；
    //当点击【确认】按钮，返回输入框中的值，点击【取消】按钮，返回null；
</script>

算数运算符

<body>
    <!-- 算术运算符 -->
    <!-- + - * / % -->
</body>
<script>
    console.log(2 + 3); //5
    console.log("2" + 3); //"23"
    console.log("2" + true); //"2true"
    console.log(2 + null); //2
    console.log(2 + undefined); // NaN(Not a Number)
    var a = 10, b = "hello"; //同时定义两个变量
     1.当加号的两侧同时为数字时，为加法运算
     2.当加号任何一侧为字符串时，为字符串的拼接
    一元运算符：  一个运算符，一个运算子  a++  ++a
    二元运算符：  一个运算符，两个运算子  a + b  a += 10
    三元运算符：    条件?语句1:语句2
    条件成立，执行语句1，条件不成立，执行语句2
    var num = prompt("请输入一个数字");
    (num > 5) ? alert("你输入的数比5大") : alert("你输入的数比5小");

    var age = prompt("请输入你的年龄");//写法1
    var mg = ((age > 18) ? "你已经成年了" : "你还未成年");
    alert(mg);
</script>

1，+ 在js里可以表示加法运算
如：alert(2+3)
       var a=5,b=5,c;
       c=a+b;

2，+ 可以表示字符串的拼接
Eg：var s1="Hello,";
       s1=s1+"World!";
       alert(s1);
       s1+=“!!!”;                               s +=“!!!” 等价于    s=s+”!!!”;
                                                        加法运算同样适用
       alert(s1);

**减- 乘* 除/ 取余%**

减法运算符 –    乘法运算符*      除法运算符 /       取余   %

会强制将字符串转为数字型运算，转换不成功就返回值NaN
Eg：var a=4,b=2,c,d,e;
       c=a-b;           c是a与b的差
       d=a*b;          d是a与b的积
       e=a/b;           e是a与b的商
       f=a%b;          f是a与 b相除取的余数

var sum=4;
       sum+=2;          sum的值等于多少？ +=
       sum-=2;                                          -=
       sum*=2;                                         *=
       sum/=2;                                          /=
       sum%=2;                                        %=

<script>
     console.log(2 - 1);  //1
    console.log(23 - "3"); //20   会强制将字符串转化为数字，转换不成功就返回值NaN
    console.log("23" - "3"); //20
    console.log(2 - undefined); //NaN
    console.log(2 * 2) //4
    console.log("2" * 2) //4
    console.log("2" * "2")//4
    console.log(2 * null) //0
    console.log(2 * undefined) //NaN
    console.log(4 / 2)//2
    console.log("4" / 2)//2
    console.log("4" / "2") //2
    console.log(2 / null) //Infinity 无穷数
    console.log(2 / undefined) //NaN
    console.log(4 % 2)//0
</script>

变量的自增/自减

自增 ++   自减 --
c = 12;
c++;                  这与c=c+1;效果是一样的
alert(c);             输出13
c--;                    这与c=c-1;效果是一样的
alert(c);             输出11

自增与自减运算符出现的地方也有讲究
Eg：c=20;
alert(c++);             输出20,因为++写在变量后面,这表示变量c完成
                               运算之后,再将其值增1
alert(c);                   现在将输出21,自减运算符也与些相似

var a = 90;
a++       ---> a = a + 1
这时a的值是多少？
var b = 90;
--b           --->b = b - 1
这时b的值是多少？

总结：
a++ b--   先赋值再自增（自减）
++a --b   先自增（自减）再赋值

              <script>
              a += 2;   //自增+2简写
              a++;    //自增+1,   a+=1   a=a+1   
              </script>

<script>
 var a = 10;
    var b;
    b=a++;  //++在后，先把a原来的值10作为a++表达式的值，赋值给b，a再自增 
    b=++a;   //++在前   先自增，自增后a的值是11，把11作为++a表达式的值，赋值给b
    console.log(a);
    console.log(b);
</script>

比较运算符

比较操作符:大于>，小于<，小于等于<=，大于等于>=，等于==，不等于!=

=== 恒等，比较过程中不会进行类型转换。

其他比较过程中会进行类型转换
比较操作符返回布尔值
alert(2<4);//返回true
alert(2>4);//返回false
alert(2<=4);//返回true
alert(2>=2);//返回true
alert(2==2);//返回true
alert(2!=2);//返回false

最终返回结果是一个布尔值。

逻辑运算符

总结：
逻辑与&&
true && true     true
true && false    false
false && true    false
false && false    false
两者为真才为真，其中一个为假即为假

逻辑或||
true   || true       true
true   || false      true
false || true      true
false || false       false
两者为假才为假，其中一个为真即为真

！逻辑非，非真即假，非假即真

<script>
    //逻辑与短路运算
    true && alert(123); //123
    false&&alert(123);//false
    当逻辑与的左侧为false时，结果是false，符号右侧可以忽略
    当逻辑与左侧为true，结果以右侧值为准
    // ！  逻辑非
    console.log(!!2); //true
    console.log(!!0);//false
    console.log(!!"");//false
    console.log(!!"abc")//true
    // 逻辑或短路运算
    console.log(false || "hello")//hello
    console.log(true || "hello")//true
    console.log(1 || hello)//1
    console.log(0 || 2)//2
    当逻辑或左侧为true，结果就是左侧值，右侧可以忽略
    当逻辑或左侧为false，结果以右侧值为准
</script>

字符串转换为数字型

<script>
    var a = "12";
    a = a - 0; //方法一
    a = a * 1; //方法二
    console.log(parseInt(a));  //方法三
    var b = parseInt(a);  //转化为整数
    console.log(typeof b); 
    console.log(parseFloat(a)) //转换为浮点数
    var b = Number(a);   //字符串转化为数字，转换不成功就返回值NaN
    console.log(b)
<script>

数字型转为字符型

<script>
    var a=10;
    var b=String(a); //方法一
    console.log(b)
    a = a + "";  //方法二
    parseFloat(0.3-0.1).toFixed(1)//0.2，可解决0.3-0.1==0.2，四舍五入，保留小数点后几位
</script>

运算符的优先级：

！ > 算术运算符 > 关系运算符 > && > || > 赋值运算符

数据类型转换

在JavaScritp中，连接字符串时也使用“＋”号。当字符串与数字相遇时，由于JavaScript是弱类型语言，所以，数字会被强制转换为字符串与字符串进行拼接。
Eg：
var num=23+45;
alert("23+45等于"+num);
表达式从左往右计算，字符串之后的数字都会当成字符串然连接
alert("23+45="+(23+45)); 使用括号分隔