第一章 初识 JavaScript

第一章 初识 JavaScript

1.1 什么是JavaScrip

1.1.1 JavaScript 概述

1、JavaScript 是Web开发领域中的一种强大的编程语言,主要用于交互式的Web页面。对于制作一个网页而言,HTML、CSS 和 JavaScript 分别代表了结构,样式和行为。结构是网页的骨架,样式是网页的外观,行为是网页的交互逻辑。

2、JavaScript 是运行在浏览器中的(浏览器的内核分为两部分:渲染引擎和 JavaScript 引擎[是 JavaScript 语言的解释器])

1.1.2 JavaScript 的特点

1、JavaScript 是一种脚本语言,简单的说是一条条的命令,这些命令按照流程一步步的执行。常见的脚本语言有 JavaScript 、TypeScript 、PHP 、Python 等。非脚本语言(如C、C++)一般需要编译、链接、生成独立的可执行文件后才能运行。

2、JavaScript 可跨平台。JavaScript 不依赖于操作系,仅需要浏览器的支持。在移动端互联网时代,利用手机等各类移动设备上网的用户越来越多,JavaScript 的跨平台使用承担了重要的职责。

3、JavaScript 支持面向对象。面向对象是软件开发中的重要的编程思想,其优点非常之多。基于面向对象产生了很多优秀的框架(如 jQuery ),可以使 JavaScript 开发变得快捷和高校,降低了开发成本。

1.1.3JavaScript 的组成

JavaScript 是由 ECMAScript(基本语法) 、DOM(文档队形模型)、BOM(浏览器对象模型) 三部分组成

1、ECMAScript : 是JavaScript 的核心。ECMAScript 规定了 JavaScript 的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套 JavaScript 语法工业标准。

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

3、BOM :浏览器对象模型,它提供了独立于内容,可以与浏览器窗口进行互动的对象结构。通过 BOM ,可以对浏览器窗口进行操作(如弹出框、控制浏览器导航跳转等)。

1.2JavaScript 入门

本节会对代码的书写位置,注释,以及常用的输入,输出语句进行详细讲解

1.2.1代码书写位置

1、行内式。行内式是指将 JS 代码写在 HTML 标签的时间属性中(也就是以 on 开头的属性,如 onclick )

<body>
    <input type="button" value="点击试试" onclick="alert'这是行内式写 JS 代码'">
</body>

在上述代码中,写在 onclick 属性里的代码就是 JavaScript 代码

2、内嵌式(嵌入式)。内嵌式是指使用

3、外部式(外链式)。外部式是指将 JavaScript 代码写在一个单独的文件中,一般用 js 作为扩展名。

<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">
    <script src="./JS/Sakura.js"></script>
    <title> JS </title>
</head>

创建一个 Sakura 的 js 文件在文件 Sakura.js 中编写 JavaScript 代码

1.2.2注释

1、单行注释 “//”

2、多行注释“/* */”。

1.2.3输入和输出语句

JavaScript 是一门编程语言,可以在网页中实现用户的交互效果。例如,在网页打开后,自动弹出一个输入框,让用户输入内容,输入后,由程序内部进行处理,处理完成后,再把结果返回给用户。这整个过程分为输入、处理和输出3个步骤。

常用的输入和输出语句
语句说明
aler(‘msg’)浏览器弹出警告框
console.log(‘msg’)浏览器控制台输出信息
prompt(‘msg’)浏览器中弹出输入框,用户可以输入内容
prompt('浏览器中弹出输入框,用户可以输入内容');
console.log('在浏览器的控制台输出');
alert('这是一个警告框');

1.2.4控制台的使用

1、在浏览器的控制台中可以直接输入 JavaScript 代码来执行。

2、在控制台中还可以用 "Ctrl+ 鼠标滚轮"进行放大或缩小,用快捷键【Shift+Enter】在输入的代码中进行换行

1.3 JavaScript 变量

1.3.1变量的使用

1、声明变量。 JavaScript 中变量通常使用 var 关键字声明。

var age;

如上代码就是声明了一个 age 的变量

2、变量的赋值。变量声明出来之后没有赋值,所以接下来要给他赋值。

var age;
age = 10;

在上述代码中,将 10 这个值存入 age 变量中。

在赋值结束之后,我们可以用输出语句进行输出。

alert( age );          //使用 alert() 警告框输出 age 的值
console.log( age );    //将 age 的值在控制台输出

上述代码执行后,即可看到 age 的值为 10 。

3、变量的初始化。声明变量时就给它赋值,这个过程就是初始化变量。

var age = 16;         //声明变量时赋值为 16 。

此时打印出来时 16 .

1.3.2变量的应用案例

1、使用变量保存个人信息。使用变量可以保存各种各样的信息,例如,保存一个人的个人信息,代码如下

var myName = 'Sakura';   //名称
var address = '重庆';     //地址
var age = 20;            //年龄
var emial = 'Sakura0121@qq.com'; //邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(emial);

上述就是用变量来保存个人信息

2、使用变量保存用户输入的值。

var myName = prompt('请输入您的名字')
alert(myName);

当用户在 prompt 输入名字之后会在 alert 中显示出来

1.3.3变量的语法细节

1、更新变量的值。当我们对一个变量的值进行更新时,之前变量的值会被覆盖

var myName = 'Sakura';
myName = 'Summer';     更新变量的值
console.log(myName);

此时输出的值为 Summer 而不是 Sakura .

2、同时声明多个变量。同时声明多个变量时,多个变量之间使用英文逗号隔开

//同时声明多个变量不赋值时
var myName, adress, email;
//同时声明多个变量并且赋值,并且同时打印多个变量
var myName = 'Sakura',
    adress = '重庆',
    email = 'Sakura0121';
console.log(myName,adress,email);

如上代码,同时声明和打印多个变量

3、声明变量的特殊情况

(1)只声明变量不赋值时,打印出来是 undefind

(2)不声明变量,而直接打印变量的值时会报错。

(3)不声明变量,直接给变量赋值时也能打印出正确的变量值,这是 JavaScript 语言的特性。

1.3.4变量的命名规范

1、由字母,数字,下划线,和美元符号组成,如 age 、num

2、严格区分大小写,例如: age 和 Age 是两个变量。

3、不能以数字开头

4、不能是关键字、保留字,如 var 、for 、while 等是错误的变量名

5、要尽量见其名知其意

6、建议驼峰命名法,首字母小写,后面的单词首字母大写。

1.3.5【案例】交换两个变量的值

var jiaohuan;
var apple1 = '青苹果';
var apple2 = '红苹果';
jiaohuan = apple1;
apple1 = apple2;
apple2 = jiaohuan;
console.log(apple1);
console.log(apple2);

注意在 标签中 async 表示异步加载,在加载的时候异步,在执行的时候不异步。

今天就更新到这了,未完待续。

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值