JavaScript学习笔记1

最新推荐文章于 2024-07-16 16:43:05 发布
最新推荐文章于 2024-07-16 16:43:05 发布
阅读量139 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 开发语言
原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=25&spm_id_from=333.851.header_right.history_list.click&vd_source=720efe45336d5eabd781d1ed31bafef8
版权

目录

计算机语言定义：

计算机语言包含：

机器语言：

汇编语言：

高级语言：

编程语言：

数据存储单位：

程序运行

初识JavaScript

浏览器执行JS简介

JS初体验

1.行内式JS

2.内嵌式JS

3.外部JS文件

JS注释

JavaScript输入输出语句

变量

1.声明变量

2.赋值

变量初始化

变量语法拓展

变量名命名规范：

交换两个变量值

数据类型

简单数据类型

数字型

数字进制

JavaScript中数值的最大值和最小值

数字型三个特殊值

判断非数字

字符串型String

字符串长度

  • 计算机语言定义：

    • 用于人与计算机之间的通讯语言，传递信息的媒介。

  • 计算机语言包含：

    • 机器语言、汇编语言、高级语言

  • 机器语言：

    • 由0和1组成的二进制数，二进制是计算机语言基础。

  • 汇编语言：

    • 直接对硬件操作，指令采取了英文缩写标识符，容易识别和记忆

  • 高级语言：

    • 常用的有C语言、C++、java、C#、Python、PHP、JavaScript、Go语言、Objective-c等

  • 标记语言（HTML）不用于向计算机发出指令，用于格式化链接，标记语言是存在用来被读取，他是被动的。

  • 编程语言：

    • 有很强的的逻辑和行为能力。

  • 数据存储单位：

    • 位（bit）：1bit可以保存一个0或者1；

    • 字节（byte）：1B=8b

    • 千字节（KB）:1KB=1024B

    • 兆字节（MB）：1MB=1024KB

    • 吉字节（GB）：1GB=1024MB

    • 太字节（TB）：1TB=1024GB

  • 程序运行

    • 打开某个程序。先从硬盘中吧程序的代码加载到内存中

    • 再把cpu执行内存代码（因为CPU运行太快）

  • 初识JavaScript

    • 布兰登艾奇

    • JavaScript是运行在客户端的脚本语言

    • 脚本语言：不需要翻译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

    • 现在也可以基于Node.js技术进行服务器端编程

    • 作用：

      • 表单动态校验、网页特效、服务端开发（Node.js）、桌面程序（Electron）、App（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js）

    • 浏览器执行JS简介

      • 浏览器分为两个部分：渲染引擎、JS引擎

      • 渲染引擎：用来解析HTML和CSS俗称内核，比如Chrome浏览器中的blink，老版本的webkit

      • JS引擎：也成为了JS解释器，用于读取网页中的JavaScript代码，对其处理 后运行，比如Chrome浏览器的V8

      • JS引擎执行代码时逐行进行解释，每一句源码（转换为机器语言）然后由计算机去执行，所以JavaScript语言为脚本语言

      • JS组成：ECMAscript、DOM、BOM

        • ECMAScript规定了编程语法和基础核心，是所有浏览器厂商共同遵守的一套JS语法工业标准

        • DOM文档对象模型，可以操作弹出框、控制浏览器跳转、获取分辨率等

    • JS初体验

      • 1.行内式JS

        • 注意双引号使用：在HTML中我们推荐双引号，但是在JS中我们推荐单引号

      • 2.内嵌式JS

        • 将多行JS代码写在 <script>标签中

      • 3.外部JS文件

        • 将大段JS代码独立到HTML中

        • 注意<script src="my.js"></srcipt>标签中间不可以写代码

        • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的JS -->
    <script>
        //alert('沙漠骆驼');
    </script>
    <!-- 3.外部js script双标签 -->
    <script src="my.js">
    </script>
</head>

<body>
    <!-- 1.行内式的JS直接写到元素内部 -->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>

</html>

    • JS注释

      • 单行注释：ctrl+/

      • 多行注释：shift+alt+a

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.单行注释  默认快捷键ctrl+/
        /* 2.多行注释  默认快捷键shift+alt+a
        2.多行注释 */
    </script>
</head>

<body>

</body>

</html>

    • JavaScript输入输出语句

      • prompt:浏览器弹出输入框，用户可以输入

      • alert:浏览器弹出警示框

      • console.log浏览器控制台打印输出信息

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 这是一个输入框
        prompt('请输入你的年龄');
        // alert弹出警示框 输出的展示给用户的
        alert('计算的结果是');
        // console控制台输出 给程序员测试使用 F12键可看到
        console.log('我是程序员能看到的');
    </script>
</head>

<body>

</body>

</html>

  • 变量

    • 变量是一个装东西的容器，本质：程序在内存中申请一块用来存放数据的空间

    • 变量使用时步骤：

      • 1.声明变量

        • 声明：var 变量名；

        • var是关键字，计算机自动为我们分配内存空间。

      • 2.赋值

        • 赋值：age= 10；

    • 变量初始化

      • var age = 18；

      • 声明变量然后马上赋值；

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.声明一个age的变量
        var age;
        // 2.赋值 把值存入age中
        age = 18;
        // 3.输出结果
        console.log(age);
        // 4.变量的初始化
        var myname = 'xioaming';
        console.log(myname);
    </script>
</head>

<body>

</body>

</html>
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = 'kakaxi';
        var address = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>

<body>

</body>

</html>
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.用户输入姓名 存储到一个myname的变量里面去
        var myname = prompt('请输入你的名字');
        // 输出这个用户名
        alert(myname);
    </script>
</head>

<body>

</body>

</html>

    • 变量语法拓展

      • 更新变量：一个变量被重新赋值之后，变量以最后一次值为准。

      • 同时声明多个变量：只需要写一个var，多个变量之间使用英文逗号隔开。

      • 语法：var age = 18， address = ‘kakaxi@qq.com’，gz = 2000；

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.更新变量
        var myname = 'xiaoming';
        console.log(myname);
        // 2.最新的变量值会覆盖掉前面的值
        myname = 'dilireba';
        console.log(myname);
        // 3.声明多个变量 简化版
        /* var age = 18;
        var address = 'kakaxi@qq.com';
        var gz = 2000;  */
        var age = 18,
            address = 'kakaxi@qq.com',
            gz = 2000;
        // 4.声明变量的特殊情况
        // 4.1只声明不赋值 结果是undefined（未定义）
        var sex;
        console.log(sex);
        // 4.2不声明直接使用 结果是可以使用
        qq = 110;
        console.log(qq);
        // 4.3不声明不赋值直接使用 结果是会报错
        console.log(tel);

    </script>
</head>

<body>

</body>

</html>

    • 变量名命名规范：

      • 由字母、数字、下划线、美元符号($)组成；

      • 严格区分大小写；中间不能有空格；

      • 不能以数字开头

      • 不能是关键字、保留字

      • 变量名必须有意义

      • 遵守驼峰命名法。首字母小写，其他字母首字母大写。myFirstName

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var app = 10;
        var App = 100;
        console.log(app);
        console.log(App);

    </script>
</head>

<body>

</body>

</html>

    • 交换两个变量值

      • 1.需要一个临时变量

      • 2.把其中一个的值给临时变量

      • 3.把另一个值给空出来的变量

      • 4.再把临时变量给剩余的变量

    • 总结

    • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.我们需要一个临时变量temp
        // 2.把apple1给临时变量temp
        // 3.把apple2给apple1
        // 4.再把临时变量的值给apple2
        var temp;//声明一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>

<body>

</body>

</html>

  • 数据类型

    • 不同的数据所占用的存储空间不同

    • JavaScript是一种弱类型的动态语言

    • JS数据类型是根据= 号右边 的变量值的数据类型来判断的

    • var age = 10；//这是一个数字型

    • var name = ‘蛋蛋’；//这是一个字符串

    • JavaScript拥有动态类型，同时意味着变量可用作不同的类型，数据类型是可以变化的

    • var x = 6；//x为数字

    • var x =‘bill’//x为字符串

    • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num;//不确定是哪种数据类型
        var num = 10;//现在确定num是数字型的
        //js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的；

    </script>
</head>

<body>

</body>

</html>

  • 简单数据类型

    • 数字型

      • JavaScript数字类型既包含整数也可以包含小数或者浮点数

      • var age = 21；//整数

      • var Age = 21.11；//浮点型 

      • 数字进制

        • 数字前面加 0 是八进制

        • 数字前面加 0x 是十六进制

        • var num1= 019；

        • var num2 = 0xf；

      • JavaScript中数值的最大值和最小值

        • alert(Number.MAX_VALUE);//全体数字型的最大值

        • alert(Number,MIN_VALUE);//全体数字型的最小值

      • 数字型三个特殊值

        • Infinity,代表无穷大，大于任何值

        • -Infinity，代表无穷小，小于任何值

        • NaN，Not a number，代表一个非数值

        • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;//num数字型
        var PI = 3.14;//PI数字型
        // 1.八进制 0~7 数字前面加0表示八进制
        var num1 = 017;//010是八进制  转换为十进制就是15
        console.log(num1);
        var num2 = 012;//012是八进制  转换为十进制是10
        console.log(num2);
        //2.十六进制 0~9 a~f  
        var num3 = 0xff;//0x是十六进制  转换为十六进制是255
        console.log(num3);
        //3.全体数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4.全体数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5.无穷大
        console.log(Number.MAX_VALUE * 2);//Infinity无穷大
        // 6.无穷小
        console.log(Number.MIN_VALUE * 2);//-Infinity无穷小
        // 7.非数字
        console.log('字符型' - 100);//NaN非数字
    </script>
</head>

<body>

</body>

</html>

      • 判断非数字

        • isNaN(x);

          • 若x是数字则返回false

          • 若x不是数字则返回true

          • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //isNaN()这个方法用来判断非数字  是数字返回一个false
        console.log(isNaN(12));//12是数字返回一个false
        console.log(isNaN('dandan'));//dandan非数字返回一个true
    </script>
</head>

<body>

</body>

</html>

    • 字符串型String

      • JS可以用单引号或者双引号

      • 嵌套：外双内单，或者外单内双

      • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '蛋蛋"程序员"';
        console.log(str);
        var str1 = "蛋蛋'\n程序员'";//\n是转义符表示换行
        console.log(str1);
    </script>
</head>

<body>

</body>

</html>l

      • 字符串的转义符

        • 以\开头，且要写在引号里面

        • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('酷热难耐，火辣太阳底下，\n我环顾四周，\n大喊我一句"收破烂啦~"');
    </script>
</head>

<body>

</body>

</html>

      • 字符串长度

        • 语法：字符串名.length   如str.length

JavaScript基础语法

正在加载jjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于学习JavaScript的学习笔记（二）
m0_54879764的博客
01-31 167
一、变量的使用 1.弹出一个对话框，提示输入姓名 2.弹出一个对话框，输出用户刚才输入的姓名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>变量的使用</title>
JavaScript笔记（一）
weixin_60220765的博客
12-08 441
一 . 引入js 1.内部标签样式 <body> <script>这是内部样式</script> </body> 2.外部样式 <head> <script src="./01.js"></script> </head> 二 . 常用的客户端输出方法 （有四种） 1. 弹出一个输入框，让用户来输入内容。 window.prompt('请输入内容'); //页面中弹出一个对话...
JS基础第一课
申小兮和林小兮的博客宝
07-13 2825
js流程控制（顺序结构、分支结构、循环结构）、运算符及优先级、js书写位置、输入输出语言、变量、数据类型的分类、转换
自学JavaScript|基础篇01|输入与输出|变量与常量|如何赋值|声明变量|标识符|命名规范|六种数据类型
染落林间色的博客
12-25 319
写在开头的话：题主是正在自学JavaScript的一名学生，跟着网上的主流视频边敲边练。技术水平不高，如有错漏，还请担待。以下内容大多取材于免费视频教程，没有多少原创性，我就是归纳总结了一下（但是有我自己的一些心得体会和搞怪案例），都属于很简单很基础的内容，主要目的是给我自己梳理一下知识点，加强记忆，也方便其他和我同样在自学JavaScript的小伙伴借鉴学习。
Chrome的控制台（Console）的用法（超详细，还未细看）
热门推荐
小枯林的博客
06-12 3万+
为什么写了本篇博客： （1）在https://blog.csdn.net/csucsgoat/article/details/117811466中，遇到了Chrome的控制台（Console）；本篇博客就是详细介绍Console的。 本篇博客转载自： （1）Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦） 说明： （1）这篇博客并没有看，当前也没必要看~~，以后有需要了再看也不迟啦 Chrome 控制台console的用法（学了之后对于调试js可是...
JavaScript代码输出结果-变量提升问题(答案和知识点详解)
卷尾巴
04-21 569
1.下面代码的输出是什么 function sayHi() { console.log(name) console.log(age) var name = "zhangsan" let age = 24 } sayHi() A：zhangsan 和 undefined B：zhangsan 和 ReferenceError C：ReferenceEr...
javascript学习笔记1
07-29
ｊａｖａｓｃｒｉｐｔ　数组　ＤＯＭ　ＢＯＭ简单学习总结
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
Javascript学习笔记1 数据类型
01-19
代码类型只有一种形式就是function。 undefined：未定义，我们也可称之为不存在，typeof(undefined)=undefined. null:为空。undefined是不存在，而null是存在，但却无。typeof(null)=object,但null又不是object，这...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JS基础知识
qq_43714708的博客
03-23 324
JavaScript基础知识点
Web前端----JavaScript的基础学习
软件测试的坑，让我来踩吧
07-25 390
本篇文章就是简单的写了一下JS的语法，用来对JS进行基础的学习，JS是一种编程语言，主要生成一些特效，完成用户和页面的交互，Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译。JavaScript以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据。...
js基础学习1
qq_44969215的博客
07-17 102
什么是javascript以及它的作用？ 1、javascript是一种弱语言，编写部分类型，但是运行分类型。 2、主要应用：   2.1、改变页面的DOM元素   2.2、ajax的应用，无刷新异步获取后端服务器的数据 如何使用javascript? 1、在head或body结束的前面使用<script></script>划出脚本区域。 2、在事件驱动中使用，如 onclick=" "事件驱动需要用户来触发驱动后才能才能执行。 <but
前端JavaScript
weixin_30822451的博客
12-26 90
js是一种轻量级的脚本语言，它可以部署在多种环境，最常见的部署环境就是浏览器。 所谓的脚本语言，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的操作方法 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM） Document object model (整合js，css，html) ...
初识JavaScript
小王的博客
05-14 324
初识JavaScript 一、什么是JavaScript 二、JavaScript的使用方法 三、JavaScript的语法规则 四、JavaScript的输入输出 五、JavaScript中的变量
更新商品前端接口编写
weixin_55639995的博客
07-12 403
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 753
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
最新发布
uu0216的博客
07-16 512
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 222
vue 自定义滚动条同步拖动（移动端）
JavaScript-学习笔记.pdf
08-04
"JavaScript-学习笔记涵盖了JavaScript的基础和进阶知识，包括语言构成、语法要点以及实际应用中的关键概念。从JavaScript的起源和组成开始，介绍了JS书写的位置，强调了在HTML中嵌入脚本的重要性。接下来，详细讲解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值