[JavaScript知识库]JavaScript基础(JS基本语法)

1.JavaScript简介

（1）JavaScript概述

????????JavaScript是一个基于对象的、事件驱动的、解释型的编程语言

? ? ?

（2）JavaScript特点

? ? ? ? JavaScript特点：基于对戏那个、事件驱动、跨平台、解释型

? ? ? ? ·基于对象：JavaScript语言中它提供了大量的对象可以直接使用，提高程序开发效率

? ? ? ? ·事件驱动：可以让项目和用户的操作之间产生一些良好的交互

? ? ? ? ·跨平台：不通过的操作系统上都可以使用

? ? ? ? ·解释型：编程语言可以写多行，逐行解释执行

2.JavaScript初体验

(1)我的第一个JavaScript程序

<button onclick="alert('hello javascript')">点我试试</button>

(2)引入JavaScript

1.行内js代码

使用较少，类似于行内样式

<button onclick="alert('hello javascript')">点我试试</button>

2.内嵌js代码

使用较为频繁，将js代码写在一堆script标签中，类似页面内嵌样式

<script>
       alert('这是一个内嵌的js代码');
   </script> 

3.外链js代码

使用极为频繁，方便后期代码量较多的情况下的代码修改和维护

? one.js

    alert('我是外链js代码');

? demo.html中引入

<script src="one.js"></script>

注:<script src="one.js"></script>标签内部不能包含其他js代码，无效

（3）JavaScript弹窗

? ?弹窗是网页中非常重要的一个功能，JavaScript语法中提供了三种不同星星的浏览器弹窗可以很方便的支持一些简单的应用。

1.警告对话框

       alert('提示信息');

特点：在弹窗之后用户必须点击确定或者关闭按钮，才能继续操作页面其他数据

2.确认对话框

var result = confirm("是否确实操作");
alert(result);

特点：用户可以选择取消或者确定按钮，返回一个布尔值，需要一个变量来接收

3.交互对话框

 var result = prompt("输入的信息","默认值");
 alert(result);

特点：可以接收用户输入的信息

（4）JavaScript调试

若页面显示的效果没有达到预期，可以通过浏览器的检查窗口（控制台=console）来查看代码中是否出现了问题，或者可以通过检查窗口中（源代码-source）调试（打断点）执行代码

var result = confirm("是否确认操作");
alert(result2);

?点击行号可以设置断点，刷新页面从断点位置处准备执行，按下F9逐行往下执行

?3.JavaScript基本语法

（1）注释

//单行注释

/*

* 多行注释

*/

（2）输出

1.信息提示框

     alert("数据");

代码执行的时候会打断浏览器渲染网页，打断执行过程

使用场景：紧急的数据提醒

2.控制台输出

       console.log("数据")

不影响程序执行过程，控制台窗口输出数据

适用场景：任何场景

3.页面输出

       document.write("数据");

直接影响页面布局，如果是临时需要展示的数据尽量避免在网页上输出查看

适用场景：少用

（3）变量

变量是程序代码中临时存储数据的容器

1.为什么使用变量

若某个数据在代码中使用的地方较多，通过变量存储和使用这个数据，便于后期代码的修改和维护

       console.log("某个位置(12行)","数据");
       console.log("某个位置(89行)","数据");
       console.log("某个位置(186行)","数据");
       console.log("某个位置(190行)","数据");
       var datas = "数据2";
       console.log("某个位置(12行)",datas);
       console.log("某个位置(89行)",datas);
       console.log("某个位置(186行)",datas);
       console.log("某个位置(190行)",datas);

2.变量基本语法

注：变量要先声明、再使用

固定语法 var 变量名称 = 要存储的数据

var data = "data1"

变量的扩展声明语法-ES6标准中推荐

let 变量名称 = 要存储的数据

let data = "data2"

变量的扩展声明语法（尽量不使用）

 data = "data3"

使用变量中的数据：直接引入变量名

console.log("数据:"+data);

3.变量的使用与声明

自定义变量名，需要做到以下规则：

变量名称由字母、数字、下划线组成，且数字不能开头

变量尽量使用英文单词且见名思意

变量有一个或者多个英文单词组成，采用驼峰命名法（第一个单词全部小写，后面每个单词首字母大写）

      var name = "zhangsan" //正确、合法
      var userGender = "male" //正确、合法
      var user_name = "lisi" //正确、合法
      var gender@ = "male" //错误、包含特殊字符
      var user sex = "male" //错误、多个字符之间出现空格

变量快捷声明

var name="zhangsan",sex="female",age=19;
var number1=number2=number3=100;

变量赋值

var uname;
uname = "zhansan";

变量中存储的数据可以修改

var  uname = "lisi";
uname = "wangwu";

4.数据类型

基础数据类型

复杂数据类型

（5）基本类型的操作

typeof（）检测变量中存储的数据的具体类型

typeof(100)

Number 住址类型，可以用来描述各种数值

//  正常数值表示方式
var height = 175;
var weight = 55.5;
var money = -3999;
console.log(height,typeof(height));
console.log(weight,typeof(weight));
console.log(money,typeof(money));
// 特殊数值
//NaN Not a Number 不是一个数字，类型是一个数值
var r = 2 - "a";
console.log(r,typeof(r));
// Infinity 无穷
var number = 2 / 0;
console.log(number);

?

String 字符串

var name = "zhangsan";
console.log(name);
// 字符串拼接
console.log("姓名:"+name);
// 字符串长度
console.log(name.leght);
// 获取指定位置的字符(索引号)
console.log(name[0]);
console.log(name.charAt(0));

?

附录：

1.<a id="one">编程语言:</a>

? ? ? ? HTMTL标记语言：使用特定的、固定的标价、标签，包裹或者存储一部分内容

? ? ? ? ? ? ? ? ? ? ? ? ? ? 特征：标记数据

? ? ? ? ?JavaScript编程语言：使用特定的语法、固定的执行逻辑，处理一件事情

·? ? ? ? ? ? ? ? ? ? ? ? ? ?特征：可以执行数据运算

2.<a id="tow">关于解释型语言</a>

? ? ? ? ? 编程语言根据执行过程，区分为编译型、解释型、编译解型

? ? ? ? ? ·编译型：先整体提编译，得到目标文件后直接执行

? ? ? ? ? ? ? ? 编译过程缓慢（不能跨平台），执行速度快

? ? ? ? ? ? ? ? ?主要以C语言为代表

? ? ? ? ? ·解释型：将代码解释一行，执行一行

? ? ? ? ? ? ? ? ? 执行过程较慢，代码中的问题定位准确（开发效率较高）

? ? ? ? ? ? ? ? ? 主要以JavaScript、Python为代表

? ? ? ? ???·编译解释型：先编译得到中间结果，然后解释执行

? ? ? ? ? ? ? ? ? ?结合编译型、解释型语言的优势

? ? ? ? ? ? ? ? ? ? 以Java语言为代表