JS基础知识整合

时间 2019-12-12

标签基础知识整合栏目 JavaScript 繁體版

原文原文链接

1、网页的组成javascript

html（结构）
- HTML：超文本标记语言除了能够渲染和容纳文字之外还能够容纳图片、音视频等；
- XHTML：更加严谨的超文本标记语言；
- HTML5：基于HTML的基础上增长许多强大而且很是实用的API；
- DHTML：网页中的内容是经过JS动态绑定的；
css（表现）
- css：层叠样式表
- css3：源于css的基础上增长了一些很是方便咱们开发的样式属性，例如：border-radius：20px;能够实现盒子的属性。
javascript（行为）
- 一门轻量级的客户端脚本编程语言，运行在客户端，运行在浏览器上的语言，编程语言，都是面向对象来开发的。

　　书写顺序：先加载css，再加载html代码，保证页面好看，最后在body的最后面加载js，由于js主要用来操做HTML元素的css

2、javascript的做用html

　　1.实现页面产品中的交互效果，例如：我选中那个一个图片，就展现对应的大图（选项卡思想），局部导航定位，轮播图等等，凡是可以操做交互的通常状况都是须要JS处理。前端

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

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

3、js的引入方式css3

行内引入：安全性低

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

内嵌式：写在script标签中
外链式：经过script标签的src属性
```
1 document.write('<script src="js文件的路径"></script>')
```
注意：咱们使用外链式引入JS,经过src把外部文件引入到当前的HTML页面,在它的<script>中间,不能在编写任何的JS代码了,即便写了,不会起做用编程

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

4、JS中的输出方式浏览器

　　一、alert(要输出的内容); 在浏览器中弹出一个框，在框中有咱们要输出的内容（无论最后输出什么内容，输出的都是字符串内容）安全

　　二、confirm：在浏览器中弹出一个提示确认框（confirm("肯定要删除吗?")）

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

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

　　五、console.table：他能把咱们须要查看的数据在控制台中以一个表格的形式展现出来

　　六、document.write(咱们要输出的内容); 直接显示在页面中，不停的输出

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

5、JS的组成

ECMAScript(定义了JS的基本语法,命名规范,操做语句,变量,数据类型等最基础最核心的知识)
DOM(document object model 文档对象模型) 提供了JS操做页面上元素的经常使用属性和方法
BOM(browser object model 浏览器对象模型) 提供了JS操做浏览器的经常使用属性和方法

6、JS的命名规范

严格区分大小写

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

使用驼峰命名法（匈牙利命名法）
- 第一个单词的首字母小写，其他每个有意义的单词的首字母都要大写
- 只能使用数字、字母、下划线命名
- 数字不能做为名字的第一位

不能使用关键字和保留字（关键字就是在JS中有特殊含义的；保留字是将来可能会成为关键字的；）

在真实项目中咱们一些约定俗称的规范：
    命名不要用拼音,不要缩减的过短,由于这两类名字别人是很难看懂的
    对于复杂的名字建议使用多个英文单词拼接的方式
    [前缀]
    get/query 获取
    set/insert/add 增长插入
    update/replace 修改替换
    remove/del 删除

    [后缀]
    Info 信息
    Import 重要

7、JS中的变量

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

　　变量的做用：存储值和表明值

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