极其简短的js基础

• 1.网页的组成
  • html（结构）
  • css（表现）
  • javascript（行为）
  • 书写顺序
• 2.JavaScript的作用
• 3.js的引入方式
  • 行内引入：安全性低
  • 内嵌式：写在script标签中
  • 外链式：通过script标签的src属性
• 4.JS中的输出方式
• 5.JS的组成
  • ECMAScript(可以理解为是javascript的一个标准)
  • DOM(document object model 文档对象模型)
  • BOM(browser object model 浏览器对象模型)
• 6.JS的命名规范
  • 严格区分大小写
  • 使用驼峰命名法（匈牙利命名法）
  • 不能使用关键字和保留字
  • 在真实项目中我们一些约定俗称的规范：
  • 命名前缀建议
• 7.JS中的变量
  • 变量
  • 变量的作用
  • 声明一个变量
  • 变量类型
    • 1.JavaScript 拥有动态类型
    • 2.JavaScript 字符串
    • 3.JavaScript 数字
    • 4.JavaScript 布尔
    • 5.JavaScript 数组
    • 6.JavaScript 对象
    • 7.Undefined 和 Null
    • 8.声明变量类型
• 以上为全部内容，极其简短，望见谅！

1.网页的组成

html（结构）

• HTML：超文本标记语言除了可以渲染和容纳文字以外还可以容纳图片、音视频等；
• XHTML：更加严谨的超文本标记语言；
• HTML5：基于HTML的基础上增加许多强大并且非常实用的API；
• DHTML：网页中的内容是通过JS动态绑定的；

css（表现）

• css：层叠样式表
• css3：源于css的基础上增加了一些非常方便我们开发的样式属性，例如：border-radius：20px;可以实现盒子的属性。

javascript（行为）

• 一门轻量级的客户端脚本编程语言，运行在客户端，运行在浏览器上的语言，编程语言，都是面向对象来开发的。

书写顺序

• 先加载css， 再加载html代码，保证页面好看，最后在body的最后面加载js，因为js主要用来操作HTML元素的

---

2.JavaScript的作用

• 1.实现页面产品中的交互效果，例如：我选中那个一个图片，就展示对应的大图（选项卡思想），局部导航定位，轮播图等等，凡是能够操作交互的一般情况都是需要JS处理。

• 2.把数据绑定到一个html页面中，我们通过JS中提供的AJAX、JSONP技术，从后台服务器上获取所需要的数据，并且绑定在页面中呈现给用户，以后只需要后台把数据更改了，前端页面的数据会自动的跟着进行更改

• 3.用JS语言写服务器后台，进行文件处理，数据存储分析，业务逻辑处理等核心的操作（nodeJS）

---

3.js的引入方式

• 行内引入：安全性低

1. <div style="width: 300px;background: red; border-radius: 20px" onclick="alert('OK')">你好</div>

• 内嵌式：写在script标签中

1. [removed]("<p>我的第一段 JavaScript</p>");

• 外链式：通过script标签的src属性

1. [removed]('<script src="js文件的路径"></script>')

• 注意：我们使用外链式引入JS,通过src把外部文件引入到当前的HTML页面,在它的<script>中间,不能在编写任何的JS代码了,即使写了,不会起作用

1. <script src="js/index.js">
2. alert('我是外链式标签块中的代码');
3. //外链式标签块中不要写任何js代码
4. //写了不会报错，但是肯定不执行
5. </script>

---

4.JS中的输出方式

• 1、alert(要输出的内容); 在浏览器中弹出一个框，在框中有我们要输出的内容（不管最后输出什么内容，输出的都是字符串内容）

• 2、confirm：在浏览器中弹出一个提示确认框（confirm(“确定要删除吗?”)）

• 3、console.log(要输出的内容); 按F12在控制台中的console页卡中显示（一般用于调试，不会影响页面中的内容）

• 4、console.dir：他只是比.log输出的内容更加详细一些

• 5、console.table：他能把我们需要查看的数据在控制台中以一个表格的形式展示出来

• 6、removed; 直接显示在页面中，不停的输出

• 7、innerHTML/innerText 动态的向指定的元素中添加内容

---

5.JS的组成

• ECMAScript(可以理解为是javascript的一个标准)

  定义了JS的基本语法,命名规范,操作语句,变量,数据类型等最基础最核心的知识

• DOM(document object model 文档对象模型)

  提供了JS操作页面上元素的常用属性和方法

• BOM(browser object model 浏览器对象模型)

  提供了JS操作浏览器的常用属性和方法

---

6.JS的命名规范

• 严格区分大小写

1. var test = "hello";
2. console.log(test);
3. console.log(Test);
4. //Uncaught ReferenceError: Test is not defined

• 使用驼峰命名法（匈牙利命名法）

  1.第一个单词的首字母小写，其余每一个有意义的单词的首字母都要大写
  2.只能使用数字、字母、下划线命名
  3.数字不能作为名字的第一位

• 不能使用关键字和保留字

  关键字就是在JS中有特殊含义的；保留字是未来可能会成为关键字的

• 在真实项目中我们一些约定俗称的规范：

  1.命名不要用拼音,不要缩减的太短,因为这两类名字别人是很难看懂的
  2 对于复杂的名字建议使用多个英文单词拼接的方式

• 命名前缀建议

  get/query 获取
  set/insert/add 增加插入
  update/replace 修改替换
  remove/del 删除
  jnxxhzz/自己的姓名作为前缀防止大项目函数冲突

---

7.JS中的变量

• 变量

  可变的量，js中的变量是松散型的

• 变量的作用

  存储值和代表值

• 声明一个变量

  var 变量名 = 变量值 （注：通过var可以声明任何类型的变量，只声明不赋值，不知道这个变量是什么类型的；变量名不能用中文）

• 变量类型

  JavaScript里面包含的数据类型为：字符串、数字、布尔、数组、对象、Null、Undefined

• 1.JavaScript 拥有动态类型

  JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

  1. var x // x 为 undefined
  2. var x = 1; // x 为数字
  3. var x = "Little"; // x 为字符串

• 2.JavaScript 字符串

  字符串是存储字符（比如 “Little”）的变量。
  字符串可以是引号中的任意文本。您可以使用单引号或双引号：
  1. var name="Little";
  2. var name='Little';
  同时，也可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
  1. var answer="Hello!";
  2. var answer="He is called 'Little'";
  3. var answer='He is called "Little"';

• 3.JavaScript 数字

  JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
  1. var x1=34.00; //使用小数点来写
  2. var x2=34; //不使用小数点来写
  极大或极小的数字可以通过科学（指数）计数法来书写：
  1. var y=123e5; // 12300000
  2. var z=123e-5; // 0.00123

• 4.JavaScript 布尔

  布尔（逻辑）只能有两个值：true 或 false。
  1. var x=true
  2. var y=false

• 5.JavaScript 数组

  下面的代码创建名为 cars 的数组：

  1. var cars=new Array();
  2. cars[0]="Audi";
  3. cars[1]="BMW";
  4. cars[2]="Volvo";

  或者 (condensed array):

  1. var cars=new Array("Audi","BMW","Volvo");

  或者 (literal array):

  1. var cars=["Audi","BMW","Volvo"];

• 6.JavaScript 对象

  对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

  1. var person={firstname:"Bill", lastname:"Gates", id:5566};

  上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
  空格和折行无关紧要。声明可横跨多行：

  1. var person={
  2. firstname : "Bill",
  3. lastname : "Gates",
  4. id : 5566
  5. };

  对象属性有两种寻址方式：

  1. name=person.lastname;
  2. name=person["lastname"];

• 7.Undefined 和 Null

  Undefined 这个值表示变量不含有值。
  可以通过将变量的值设置为 null 来清空变量。
  1. cars=null;
  2. person=null;

• 8.声明变量类型

  当声明新变量时，可以使用关键词 “new” 来声明其类型：
  1. var carname=new String;
  2. var x= new Number;
  3. var y= new Boolean;
  4. var cars= new Array;
  5. var person= new Object;
  JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

以上为全部内容，极其简短，望见谅！