初识JavaScript

最新推荐文章于 2024-03-23 00:57:32 发布

暮白寒窗雪

最新推荐文章于 2024-03-23 00:57:32 发布

阅读量335

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/tiben/article/details/116613529

版权

初识JavaScript

一、什么是JavaScript

1、JavaScript概述
 (1)JavaScript：是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。
  在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript实现的。
 (2)网页组成：对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，
 三者之间的区别如下:
     HTML：决定网页的结构和内容，相当于人的身体。
     CSS：决定网页呈现给用户的模样，相当于给人穿衣服、化妆。
     JavaScript：实现业务逻辑和页面控制，相当于人的各种动作。
 (3)JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，
    把一个原本只用来显示的页面转变成支持用户交互的页面程序。 
    浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在浏览器中的。
 (4)常见浏览器及特点：
     Internet Explorer：Windows操作系统的内置浏览器，用户数量较多
     Microsoft Edge：Windows10操作系统提供的浏览器，速度较快、功能较多
     Google Chrome：目前市场占有率较高的浏览器，具有简洁、快速的特点
     Mozilla Firefox：一款优秀的浏览器，市场占有率低于Google Chrome
     Safari：主要应用在苹果iOS、macOS操作系统中的浏览器
 (5)浏览器内核的分类
      渲染引擎（也称为排版引擎）：负责解析HTML与CSS，如Chrome浏览器的Blink。
      JavaScript引擎：是JavaScript语言的解释器，用于读取网页中的JavaScript代码，
      对其处理后执行，如Chrome浏览器的V8引擎

JavaScript代码的执行特点：逐行执行

2、JavaScript的诞生与发展
  (1)诞生： 在1995年时，Netscape（网景）公司（现在的Mozilla）的布兰登·爱奇（Brendan Eich）
  在网景导航者浏览器上首次设计出了JavaScript。Netscape最初将这个脚本语言命名为LiveScript，
  后来Netscape公司与Sun公司合作之后将其改名为JavaScript。
  (2)发展： 在设计之初，JavaScript是一种可以嵌入到网页中的编程语言，
用来控制浏览器的行为。例如，直接在浏览器中进行表单验证，用户只有填写格式正确的内容
后才能够提交表单，这样避免了用户因表单填写错误导致的反复提交，节省了时间和网络资源，

3、JavaScript的用途：可以嵌入到网页中的编程语言，用来控制浏览器的行为。
   案例应用如下：
    利用前后端分离模式进行开发，基于React技术栈开发的移动Web项目
    基于Angular构建的响应式移动Web项目
    使用WePY框架并结合ES 6语法开发小程序电商项目
    基于Vue.js全套技术栈开发出来的网页端后台管理系统
4、JavaScript的特点：
   ①、JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，
     能够快速完成程序的编写工作
   ②、JavaScript可以跨平台，它不依赖操作系统，仅需要浏览器的支持
   ③、JavaScript支持面向对象，可以使JavaScript开发变得快捷和高效，降低开发成本
5、JavaScript的组成
     JavaScript由ECMAScript、DOM、BOM三部分组成。

在这里插入图片描述

(1)ECMAScript：是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容，是所
               有浏览器厂商共同遵守的一套JavaScript语法工业标准
(2)DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供
        的接口，可以对页面上的各种元素进行操作
(3)BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
        通过BOM，可以对浏览器窗口进行操作
        
 /*Web前端中常用的开发工具有很多，例如Visual Studio Code、Sublime Text、Hbuilder、Adobe Dreamweaver、WebStorm*/

二、JavaScript的使用方法

 1、行内式：是将单行或少量的JavaScript代码写在HTML标签的事件属性中
           事件名="JavaScript代码"
 2、内嵌式（嵌入式）：使用<script>标签包裹JavaScript代码，
                    <script>标签可以写在<head>或  <body>标签中

<script>JavaScript代码</script>

3、外部式（外链式）：将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件
   的扩展名，在HTML页面中使用<script>标签进行引入，适合JavaScript代码量比较多的
   情况。注意外部式的<script>标签内不可以编写JavaScript代码（推荐使用）
   (1)先创建.js文件
   (2)通过<script src="js文件名"></script>标签将外部的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/3.js" type="text/javascript"></script>
    <title>Document</title>
</head>

三、JavaScript的语法规则

在编写JavaScript代码时，需要注意基本的语法规则：
 1、JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性
 2、JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写
 3、如果一条语句结束后，换行书写下一条语句，后面的分号可以省略
 4、单行注释：以“//”开始，到该行结束或<script>标签结束之前的内容都是注释。
             快捷键：ctrl + /
 5、多行注释：以“ /*”开始，以 “*/”结束。需要注意的是，多行注释中可以嵌套单行注释，
             但不能再嵌套多行注释。快捷键：shift + alt + a

四、JavaScript的输入输出

JavaScript代码中提供了输入和输出语句，可以在网页中实现用户交互效果。常用的输入和输出语句如下所示：

1、消息框：alert(字符串)  浏览器弹出警告框

2、确认消息框：confirm(字符串);

3、控制台输出：console.log(字符串)  浏览器控制台输出信息

4、输入消息框：prompt("字符串")  浏览器弹出输入框，用户可以输入内容

5、在页面内创建一个按钮

<input type="button" value="取消" onclick="alert('这是一个按钮')">  <!--创建按钮的第一种方式 -->
<button type="button" onclick="confirm('确定删除吗？')">删除</button>   <!-- 创建按钮的第二种方式，建议使用 -->

使用方法案例：
①alert()方法的使用

<script>
   alert('这是一个警告框');
</script>

在这里插入图片描述
②console.log()方法的使用

<script>
   console.log('在控制台输出信息');	
</script>

在这里插入图片描述
③prompt()方法的使用

<script>	
   prompt('这是一个输入框');
</script>

在这里插入图片描述

<input type="button" value="取消" onclick="alert('这是一个按钮')">  <!--创建按钮的第一种方式 -->
<br><br>
<button type="button" onclick="confirm('确定删除吗？')">删除</button>   <!-- 创建按钮的第二种方式，建议使用 -->

5、控制台的使用
浏览器的控制台中也可以直接输入JavaScript代码中来执行语句，这为初学者提供了很大的便利。

五、JavaScript中的变量

1、变量：是内存中一块存储空间，是程序在内存中申请的一块用来存放数据的空间。例如，程序在内存中保存字符串“小明”和“小张”
2、变量的使用：声明变量和变量赋值。
①声明变量
var 变量名 —>在内存中分配一块存储区

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

②变量赋值变量名 = 数据

var age
age = 10           // 为age变量赋值

③变量初始化声明变量的同时赋值

var age = 18    //  声明变量的同时赋值

注：’+'的作用

   (1)算术运算的加法：运算对象必须是数值型数据
   (2)连接符：可以将变量和字符串进行连接，连接的结果是一个字符串
	  var age = 25
	  var str = "年龄："+age

变量的应用案例
①使用变量保存个人信息，示例

var myName = '小明';
var address = 'XX市XX区';	
var age = 18;		
var email = 'xiaoming@localhost'; console.log(myName); // 输出myName的值
console.log(address);   // 输出address的值
console.log(age);	         // 输出age的值
console.log(email);       // 输出email的值

②使用变量保存用户输入的值

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

③更新变量的值

var myName = '小明';
console.log(myName);	// 输出结果：小明
myName = '小红';		// 更新变量的值
console.log(myName);	// 输出结果：小红

④同时声明多个变量

var myName, age, email;
var myName = '小明',
     age = 18,
     email = 'xiaoming@localhost';

⑤声明变量的特殊情况
a、只声明变量，但不赋值

var age;
console.log(age);	/*控制台输出undefined*/

b、不声明变量，直接输出变量的值

console.log(age);	/*控制台会报错*/

c、不声明变量，只进行赋值

age1 = 10;
console.log(age1);

注意：直接赋值一个未声明的变量，也可以正确输出变量的值。这个情况是JavaScript语言的特性

3、变量的命名规范

由字母、数字、下划线和美元符号（$）组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
要尽量做到“见其名知其意”
建议遵循驼峰命名法，首字母小写，后面的单词首字母大写

案例：交换两个变量的值

var temp
var apple1 = "青果"
var apple2 = "红果"

console.log("交换前的值：")
console.log("apple1:"+apple1)
console.log("apple2:"+apple2)

console.log("-------------------")

//交换两个变量的值
temp = apple1
apple1 = apple2
apple2 = temp

console.log("交换后的值：")
console.log("apple1:"+apple1)
console.log("apple2:"+apple2)