JS学习519~534（初始+变量）

最新推荐文章于 2024-08-06 12:58:11 发布

前进的北极熊

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量135

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_57809042/article/details/126875821

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 初始JavaScript

1.1 JavaScript历史

布兰登·艾奇(BrendanEich, 1961年~ )。
神奇的大哥在1995年利用10天完成JavaScript设计。
网景公司最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript.

1.2 JavaScript是什么

JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程

为了阅读方便，我们后面把JavaScript简称为JS

1.3 JavaScript的作用

表单动态校验(密码强度检测)(JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

1.4 HTML/CSS/JS的关系

HTML/CSS标记语言--描述类语言

HTML决定网页结构和内容(决定看到什么),相当于人的身体
CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆

JS脚本语言--编程类语言

实现业务逻辑和页面控制(决定功能),相当于人的各种动作

1.5 浏览器执行JS简介

浏览器分成两部分:渲染引擎和JS引擎

渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言) ,然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

1.6 JS的组成

在这里插入图片描述

ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript ,但实际上后两者是ECMAScript语言的实现和扩展。

在这里插入图片描述
ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM----文档对象模型

文档对象模型(Document Object Model，简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

BOM----浏览器对象模型

BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

1.7 JS 初体验

JS有3种书写位置,分别为行内、内嵌和外部。

行内式JS

<input type= “button” value=“点我试试” οnclick=“alert (‘Hello world’)” />

可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如: onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差,在html中编写JS大量代码时,不方便阅读;
引号易错，引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用

内嵌JS

<script>
    alert('Hel1o World~!');
</script>

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

外部JS文件

利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

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>JS初体验</title>
    <!-- 2.内嵌式的js -->
    <script>
        // alert('沙漠骆驼');
    </script>
    <!-- 3.外部js写法 双标签 -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 1.行内式的js 直接写到元素的内部-->
    <!-- <input type="button" value="唐伯虎" οnclick="alert('秋香姐')"> -->
</body>
</html>

js文件

alert('如果我是DJ，啦啦啦');

2 JavaScript注释

<!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 + ailt + a
        2.多行注释 vscode 中修改多行注释的快捷键 ctrl + shift + /
        */
    </script>
</head>
<body>
    
</body>
</html>

3 JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

在这里插入图片描述

eg:

<!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>JS输入输出语句</title>
    <script>
        // 这是一个输入框
        prompt('请输入您的年龄');
        // alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        // console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
    
</body>
</html>

1 变量

1.1 变量概述

1.1.1 什么是变量

白话：变量就是一个装东西的盒子。

通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至可以修改。

1.1.2 变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间。

类似我们酒店的房间,一个房间就可以看做是一个变量。

变量在使用时分为两步: 1.声明变量 2.赋值

声明变量

//声明变量
var age; //声明一个名称为age的变量

var是一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
age是程序员定义的变量名, 我们要通过变量名来访问内存中分配的空间

赋值

age = 10; //给age这个变量赋值为10

=用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

变量的初始化

var age = 18; //声明变量同时赋值为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>变量</title>
</head>
<body>
    <script>
        // 1.声明了一个age的变量
        var age;
        // 2. 赋值 把值存入这个变量中
        age = 18;
        // 3. 输出结果
        console.log(age);
        // 4. 变量的初始化
        var myname = '丫丫';
        console.log(myname);
    </script>
</body>
</html>

1.2 变量的使用

案例1

<!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 = '旗木卡卡西';
        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>

案例2

弹出一个输入框，提示用户输入姓名
弹出一个对话框，输出用户刚才输入的姓名。

<!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('请输入您的名字');
        // 2. 输出这个用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

1.3 变量语法扩展

更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18;
age = 81;  //最后的结果就是81因为18被覆盖掉了

同时声明多个变量

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

var age = 10, name = ‘zs’, sex = 2;

声明变量特殊情况

在这里插入图片描述

<!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 = 'pink老师';
        console.log(myname);
        myname = 'Yaya';
        console.log(myname);
        // 2. 声明多个变量
        /* var age = 18;
        var address = '火影村';
        var gz = 5000; */
        var age = 18,
            address = '火影村',
            gz = 5000;
        // 3. 声明变量的特殊情况
        // 3.1 只声明不复制 结果是？  程序也不知道存的是啥 所以结果是undefined 未定义的
        var sex;
        console.log(sex);  //undefined
        // 3.2 不声明 不赋值 直接使用某个变量会报错
        // console.log(tel);
        // 3.3 不声明直接赋值使用
        qq = 110;
        console.log(qq);
    </script>
</head>
<body>
    
</body>
</html>

1.4 变量命名规范

由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成,如: usrAge,num01, _name
严格区分大小写。var app;和var App;是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如: var、for、while
变量名必须有意义。MMD BBD nl → age
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。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);
      //var var;   因为var有特殊意义了，这个叫做关键字 不能作为变量名的 for while if
      // name 我们尽量不要直接使用name 作为变量名
      // console.log(tel);
      console.log(name);
    </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>
        // js 是编程语言有很强的逻辑性在里面：实现这个要求的思路 先怎么做再怎么做
        // 1. 我们需要一个临时变量帮助我们
        // 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>

1.5 变量总结

为什么需要变量?
因为我们一些数据需要保存,所以需要变量
变量是什么?
变量就是一个容器,用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?
变量是内存里的一块空间,用来存储数据。
变量怎么使用的?
我们使用变量的时候, 一定要声明变量,然后赋值
声明变量本质是去内存申请空间。
什么是变量的初始化?
声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些?
变量名尽量要规范,见名知意—驼峰命名法
交换2个变量值的思路?
区分哪些变量名不合法
学会交换2个变量

前进的北极熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习519~534（初始+变量）

浏览器分成两部分:渲染引擎和JS引擎渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkitJS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言) ,然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
复制链接

扫一扫

专栏目录