当前位置:首页>技术分享>JS分享>JS基础知识整合
JS基础知识整合
LayGung 2019/06/26 11:40:39

一、网页的组成

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

  书写顺序:先加载css, 再加载html代码,保证页面好看,最后在body的最后面加载js,因为js主要用来操作HTML元素的


二、javascript的作用

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

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

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


三、js的引入方式

  • 行内引入:安全性低 
  • 内嵌式:写在script标签中
  • 外链式:通过script标签的src属性

四、JS中的输出方式

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

  2、confirm:在浏览器中弹出一个提示确认框(confirm("确定要删除吗?"))

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

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

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

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

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


五、JS的组成

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


六、JS的命名规范

  • 严格区分大小写
  • 使用驼峰命名法(匈牙利命名法)
    • 第一个单词的首字母小写,其余每一个有意义的单词的首字母都要大写
    • 只能使用数字、字母、下划线命名
    • 数字不能作为名字的第一位

 

  • 不能使用关键字和保留字(关键字就是在JS中有特殊含义的;保留字是未来可能会成为关键字的;)

 

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

    [后缀]
    Info 信息
    Import 重要

七、JS中的变量

  变量:可变的量,js中的变量是松散型的

  变量的作用:存储值和代表值

  声明一个变量:var 变量名 = 变量值 (:通过var可以声明任何类型的变量,只声明不赋值,不知道这个变量是什么类型的;变量名不能用中文)

文章主题词 »»»
发表您的观点
添加表情去登陆
评论列表
暂无评论
工信部备案编号:渝ICP备17004482号-3 渝公网安备 50011702500387号