【java学习之路】（javaWeb篇）003.JavaScript part1

最新推荐文章于 2024-07-12 16:27:40 发布

染沁半世苍凉

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量191

点赞数

分类专栏： java学习之路文章标签： javascript java 前端

本文链接：https://blog.csdn.net/qq_24254611/article/details/122905108

版权

java学习之路专栏收录该内容

60 篇文章 6 订阅

订阅专栏

JavaScript

JavaScript简介

概述：JavaScript在前端中简称【JS】，JavaScript是开发web脚本语言。但是它也被用到了很多非浏览器环境中【比如：node平台】，JavaScript在1995年由Netscape公司的[Brendan Eich](https://baike.baidu.com/item/Brendan Eich)（创始人大概用了十天的时间将这门语言创建出来），JS可以嵌套在静态页面中可以给静态页面添加一些动态效果（脚本语言），

不同浏览器厂商（在浏览器中都有内置解析器解析JS语法）；

各大浏览器厂商：chorme、IE、火狐、sofai、欧朋（都有属于自己的解析器）

谷歌浏览器：V8解析器（可以解析JS语法：让谷歌浏览器知道你在写什么）

JavaScript组成

问题：前端三层？

前端分为三层：

结构层前面课程当中学习标签

样式层前面课程我们学习样式

行为层即将学习javaScript

问题2：JavaScript组成？

答：分为三部分

ECMAScript:欧洲计算机协会大概每年6月中旬定制语法规范；

比如：变量为什么用var、函数关键字为什么function、循环语句为什么是for

注意此处为2014年规范简称ES5

DOM【document object model】文档对象模型（经常用来操作标签：在JS当中）

BOM【browser object model】:浏览器对象模型（模拟浏览器）

JS书写格式

概述：JavaScript属于脚本语言，JS语法务必、必须、一定嵌套在静态页面中，JS当中才可以运行；

我们可以利用双闭合标签<script></scipt>在静态页面中书写JS语法，双闭合标签scipt可以防止静态页面中任意地方，script当然也可以有多个；

注释：
//单行注释
    /*
       多行注释：可以写多行注释给同事们看
       工作当中尽量养成这个习惯
    */

JS语法必须放置在双闭合标签script里面
双闭合标签script可以放置静态页面中任意地方（一般放置静态页面底部）
程序当中当然可以有多个script标签

内置功能函数使用

内置：浏览器厂商天生本身天生就有的，我们程序员可以直接使用

警告框-alert

概述：警告框功能是在浏览器正上方（中间）弹出一个警告框。

<script>
    alert("Hello World");
</script>

警告框功能可以多次使用
JS当中字符串，外层需要加上双引号、单引号（别一双一单）
每行代码最后面加上一个分号：代表的是这行语句结束

提示框-prompt

概述：在JS当中内置函数prompt，可以在浏览器正上方弹出一个提示框；

<script>
    prompt("芜湖！");
</script>

控制台使用

概述：console.log（打印的数据）

<script>
    console.log("芜湖！！！！");
</script>

数据类型

概述：在JS当中也有数据类型也分：基本数据类型（5）、引用类型【复杂数据类型】（1）

<script>
    //字符串（String）:字符串即为人说的话【务必加上双引号、单引号】
    console.log("我爱你JS");
    console.log("最近快过年了，回家要胖五进");
    //数字类型(Number):咱们小学学习数字
    console.log(100);
    console.log(-4.14);
    console.log(123456789);
    //布尔类型数值：true、false
    console.log(true);
    console.log(false);
    //未定类型数据
    console.log(undefined);
    //空对象类型
    console.log(null);
    //JS当中有一个关键字typeof可以检测数据类型
    console.log(typeof 123);
    console.log(typeof true);
    console.log(typeof undefined);

</script>

在JS当中有五个基本数据类型是：字符串、数字、布尔值、未定义、空对象

typeof是JS当中一个关键字可以检查数据类型

变量

概述：变量（variable）来源于数学,变量相当于是一个容器，变量可以存储数据、存储计算完结果；

通过访问变量名字获取到存储数据。

JavaScript当中变量使用：

第一步：用关键字var 声明变量 var 变量名字

第二步：给变量进行赋值变量名字 = 123；

第三步：使用变量 console.log(变量名字)

<script>
    //第一步：用关键字var进行声明变量
    var num;
    //第二步：可以给变量进行赋值 （将右侧数据||计算完结果）赋值给左侧变量
    num = 123;
    //第三步：使用
    //通过访问变量名字、获取到对应存储数据
    console.log(num);

</script>

JS当中变量只是用关键字var声明但为赋值，默认初始undefined
JS当中变量可以声明一次、但是可以多次赋值
多次赋值以后在使用：使用的是最后一次赋值数据

<script>
    var a = 100;
    var b = 200;
    var c = 300;
    console.log(a, b, c);
</script>

注意：这种写法才是常用声明变量方式：就是将第一步和第二步结合在一起

运算符

概述：在JS当中拥有数学运算符、比较运算符、逻辑运算符、赋值运算符等等。

运算符又称之为操作符

数学运算符（5）

概述：数学运算符即为：加、减、乘、除、取余数。在JS当中任意类型数据都可以参与数学运算符。

除了数字以为其他类型数据需要隐式转换为数字参与数学运算符。

数字参与

概述：如果是数字参与数学运算符：运算符口诀和小学学习是一模一样的

<script>
    //数学运算符------数字参与
    //如果是数字和数字进行数学运算符：
    //先算乘除、后算加减、如果有小括号先算小括号里面的
    console.log(66 + 22);
    console.log(66 - 33);
    console.log(22 * 22);
    console.log(6 / 3);
    console.log(99 % 3); // 0
</script>

布尔参与

概述：在JS当中布尔值类型数据也可以参与数学运算符，布尔值参与数学运算符，计算机底层自动隐式转换为数字参与。（底层完成隐式转换为起始通过系统内置函数Number完成）

布尔类型数据参与数学运算符：隐式转换为数字 true=>1 false=>0

<script>
    console.log(Number(true));//1
    console.log(Number(false));//0
    console.log(true + 99);//100
    console.log(false * 100);//0
</script>

未定义类型参数

概述：未定义类型是数值也可以参与数学运算符，需要隐式转换为数字NaN【not a number】

NaN:是JS语言当中一个数字类型特殊值，一般进行数学运算符的时候，计算不出结果，返回数字NaN；

<script>
    //在JS当中未定义类型数据undefined也可以参数学运算符：
    //但是要隐式转换为数字参与
    //undefined未定义类型数据参与数学运算符的时候会隐式转换为数字NaN
    /************************************************************/
    //NaN起始也是数字类型数值：值不够这个数值比较特殊，一般在计算数学运算符的时候算不出结果的时候
    //返回数字NaN
    console.log(0 / 0);
    console.log(typeof NaN);
    console.log(NaN + 33);
    console.log(NaN * 33);
    console.log(NaN + NaN);
    console.log(undefined + 33);
    console.log(undefined / 33);

</script>

总结：未定义类型数据也可以参数数学运算符，但是需要隐式转换为数字NaN参与

NaN是数字类型一个特殊值：这个数字进行数学运算的时候都是计算不出结果（NaN）

空对象类参与

概述：空对象类型数据null，也可以参与数学运算符，但是需要隐式转换为数字参与数学运算符；

<script>
    //在JS当中未定义类型数据undefined也可以参数学运算符：
    //但是要隐式转换为数字参与
    //undefined未定义类型数据参与数学运算符的时候会隐式转换为数字NaN
    /************************************************************/
    //NaN起始也是数字类型数值：值不够这个数值比较特殊，一般在计算数学运算符的时候算不出结果的时候
    //返回数字NaN
    //Null类型数值参与数学运算符
    console.log(Number(null));
    console.log(null * 99);
    console.log(0 + NaN);
    console.log(null + NaN);

</script>

字符串参与

概述:字符串也可以参与数学运算符，但是它有一些特殊：

特殊：字符串参与数学运算符的时候，加号比较特殊；

<script>
    console.log("12" + 44);//1244
    console.log("张三喜欢李四" + 666);
    console.log("12" - 44);
    console.log("12" * 44);
    console.log("12" / 44);
    console.log("12" % 44);

</script>

比较运算符（8）

概述：任意类型数据都可以参与比较运算符，比较最终结果：要么为布尔值true、要么为布尔值false

除了数字以外其他类型数据也可以参与比较运算符：但是需要隐式转换为数字参与（字符串特殊）

数字比较

<script>
    //数字参与比较运算符
    console.log(3 > 6); //false
    console.log(3 >= 6); //false
    console.log(3 < 6); //true
    console.log(3 <= 6); //true
    console.log(3 == 3); //true
    console.log(3 != 3); //false
    console.log(3 === "3"); //false
    console.log(3 !== 3); //false
</script>

注意：

一个等号：赋值运算符不是进行比较运算符（常用语给变量赋值）

两个等号：相等比较运算符 (只看数值是否一样)

三个等号：全等比较（即看数值又看类型比较）

其他类型数据比较（字符串除外）

概述：其他类型数据也可以参与比较（数字、字符串除去），其他类型数据也可以参与比较运算符，但是需要隐式转换为数字参与。

<script>
    console.log(100 > true);
    console.log(true === 1);
    console.log(true == 1);
    console.log(true < false);
    console.log(NaN > 100);
    console.log(undefined > 100);
    console.log(6666 > null);
</script>

字符串比较

概述：字符串参与比较时候分为两种情况：

第一种：字符串和数字

第二种：字符串和字符串比较

字符串和数字比较

概述：如果是字符串和数字比较：字符串隐式转换为数字参与比较；

<script>
    //字符串和数字比较
    console.log("66" > 99); //false
    console.log("33" > 12); //true
    console.log("33" == 33); //true 
    console.log("33" === 33); //false
</script>

字符串和字符串进行比较

概述：如果是字符串和字符串进行表，通过的是ASCII码数值进行比较：

两个字符串都是从左到右有一个一个字符进行比较：知道某一个字符比较出结果，比较结束了；

0-9<A-Z<a-z:从左到右依次变大

<script>
    //字符串和字符串比较
    console.log("a2" > "A2"); //true
    console.log("b2a" > "ABC"); //true
    console.log("李四" == "李四");//true
</script>

逻辑运算符

概述：在JavaScript脚本语言当中也有所谓逻辑运算符【与、或、非】，任意类型数据都可以参与逻辑运算符，但是需要注意（除了布尔值以外数据）需要隐式转换为布尔值参与逻辑运算符（通过内置函数Boolean将其他类型数据转换为布尔值）

逻辑与

概述：在JS当中使用两个&&代表逻辑与。两者（A、B）同时为真，返回结果才为真，否则结果为假的。

书写语法格式：A&&B A数值一般需要布尔值 B数值一般需要也是布尔值

<script>
    console.log(true && false); //false
    console.log(false && true); //false
    console.log(false && false); //false
    console.log(true && true); //true
</script>

逻辑或

概述：在JS当中使用两个||代表逻辑或。两者有一个为真即为真，否则为假的

语法格式：A||B

<script>
    console.log(true || false); //true
    console.log(true || true); //true
    console.log(false || true); //true
    console.log(false || false); //false 

</script>

逻辑非

概述：JS当中逻辑非！，它的作用是置反

<script>
    console.log(!true); //false
    console.log(!false); //true
    console.log(!!!true); //false

</script>

JS当中的逻辑非可以同时使用多个

其他类型数据参与逻辑运算

<script>
    //逻辑与
    console.log(1 && 0);
    console.log(66666 && 999999);
    console.log(NaN && 34);
    console.log("张三" && "李四");

    console.log("小明" || "小花花");
    console.log(NaN || 123);
</script>

IF条件语句

概述:在JavaScript脚本语言当中：也有条件语句、也有循环语句；

条件语句基本使用

<script>

  //条件语句基本使用

  if (true) alert("大江东去浪淘尽");

  if (false) alert(123);

  //其他类型数据也可以作为条件语句条件：但是都隐式转换为布尔值

  if (6666) alert(123);

  if (NaN) console.log("我能执行吗");

</script>

条件语句条件：一般需要的是布尔值，但是其他类型数值也可以参与（隐式转换为布尔值）

如果条件语句只有一行代码可以省略大花括号

if结合else关键字一起使用

<script>

  //关键字else【否则】，可以结合if条件语句一起使用

  //else关键字是对于上面条件进行否定

  //小案例:让用户输入一个分数对应弹出这个学生是否及格

  var score = prompt("请你输入你的分数");

  if (score >= 60) {

    //条件：分数大于等于60

    alert("兄弟恭喜你及格啦");

  } else {

    //暗含条件：对于上面条件进行否定（分数是小于60分）

    alert("兄弟不好意思,来年回来继续考试，我等你");

  }

</script>

else关键字可以结合if条件语句一起使用（可以：不是必须）

else这个分支对于上面分支条件进行否定

比如：当前这个案例else这个分支暗含条件是（分数小于60分）

多分支条件语句

概述：javaScript脚本语言：也支持条件语句【多分支条件语句也有的】

案例：比如让学生输入分支对应弹出成绩？

<60	挂科
>=60 且 <70	及格
>=70 且 <80	良好
>=80	优秀

<script>
    //用户输入分数
    var score = prompt("请你输入一个分数");
    if (score < 60) {
        //条件：分数小于60
        alert("兄弟不好意思,来年补考");
    } else if (score < 70) {
        //出现else:暗含条件分数一定是大于等于60
        //完整条件大于等于60 且小于70
        alert("兄弟恭喜你及格");
    } else if (score < 80) {
        //暗含条件：分数大于等于70
        //完整条件：大于等于70 且小于80
        alert("良好");
    } else {
        //暗含条件：分数大于等于80
        alert("优秀");
    }
</script>

嵌套使用

<script>
    var nl = 88;
    var sex = "男";
    if (sex == "女") {

    } else {
        if (nl > 60) {
            alert(123);//弹出结果
        } else {
            alert(456);
        }
    }
</script>

染沁半世苍凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【java学习之路】（javaWeb篇）003.JavaScript part1

JavaScriptJavaScript简介概述：JavaScript在前端中简称【JS】，JavaScript是开发web脚本语言。但是它也被用到了很多非浏览器环境中【比如：node平台】，JavaScript在1995年由Netscape公司的[Brendan Eich](https://baike.baidu.com/item/Brendan Eich)（创始人大概用了十天的时间将这门语言创建出来），JS可以嵌套在静态页面中可以给静态页面添加一些动态效果（脚本语言），不同浏览器厂商（在浏览器中都
复制链接

扫一扫