专栏首页IT 指南者专栏前端系列之JavaScript基础知识概述

前端系列之JavaScript基础知识概述

微信公众号:compassblog 欢迎关注、转发,互相学习,共同进步! 有任何问题,请后台留言联系!

1、什么是JavaScript

(1)、JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
(2)、JavaScript被设计用来向HTML页面添加交互行为。
(3)、JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
(4)、JavaScript由数行可执行计算机代码组成。
(5)、JavaScript通常被直接嵌入HTML页面。
(6)、JavaScript是一种解释性语言(就是说,代码执行不进行预编译)。
(7)、JavaScript的组成:核心ECMAScript、文档象模型 DOM、浏览器对象模型BOM

2、JavaScript的作用

使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

3、JavaScript的引入

在HTML文件中引入JavaScript有两种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是链接外部JavaScript脚本文件,称为外联式。对他们的具体讲解如下:

(1)、内嵌式:在HTML文档中,通过方式一标签引入如下:

<script type="text/javascript">
//此处为JavaScript代码
</script>

(2)、外联式:在HTML文档中,通过方式二标签引入 .js文件如下:

<script src=demo.js" type="text/javascript" charset="utf-8"></script>

4、JavaScript变量

(1)、在使用JavaScript时,需要遵循以下命名规范:

1)、必须以字母或下划线开头,中间可以是数字、字符或下划线
2)、变量名不能包含空格等符号
3)、不能使用JavaScript 关键字作为变量名,如:function
4)、JavaScript严格区分大小写

(2)、变量的声明:

var 变量名;
//JavaScript变量可以不声明,直接使用。默认值:undefined

(3)、 变量的赋值:

var 变量名 = 值;
//JavaScript变量是弱类型,同一个变量可以存放不同类型的值。也就是说,赋给变量的值是什么类型,它就是什么类型

5、JavaScript数据类型

(1)、基本类型:

1)、Undefined:Undefined类型只有一个值,即undefinedo当声2)、明的变量未初始化时,该变量的默认值是undefined
2)、null:只有一个专用值null,表示空,一个占位符。值undefined实际上是从值null派生来的,因此ECMAScript把它们定义为相等的
3)、Boolean,有两个值true和false
4)、Number,表示任意数字
5)、string,字符串由双引号("")或单引号('')声明的。JavaScript没有字符类型
特别注意:
    alert(null == undefined);
    //输出结果为"true",尽管这两个值相等,但它们的含义不同

(2)、引用类型:

1)、引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象
2)、JavaScript是基于对象而不是面向对象。对象类型的默认值是null
3)、Javascript提供众多预定义引用类型(内置对象)

6、JavaScript运算符

JavaScript运算符与Java运算符基本一致。

7、JavaScript基本操作

(1)、alert():向页面中弹出一个提示框
(2)、innerHTML:向页面的某个元素中写一段内容,将原有的东西覆盖
(3)、document.write():向页面中写内容

8、JavaScript中常用的正则匹配方式

(1)、使用正则对象中的test方法:test()方法返回一个布尔值表示是否可以找到匹配项,例如:

//匹配字符串所有'kt'的实例
<script type="text/javascript">
    var p = /kth/p;//g:表示全局(global)匹配模式,即模式将被应用于所有字符串
    console.log(p.test('kthz'));//true
    console.log(p.test('kbhh'));//false
</script>

(2)、使用string对象中的match方法:match()方法匹配正则表达式,并且以数组的形式返回匹配的选项,例如:

<script type="text/javascript">
    var num = /\d+/g;//g表示全局匹配
    var str = "a3 sdf 45 df";
    str.match(num);//返回["3", "45"]
</script>

9、JavaScript中函数编写方式

使用关键字function来定义函数,函数名自定义,例如:

<script type="text/javascript">
    function demo(){
        alert("这是JavaScript函数!");
    }
</script>

同步更新:(链接不支持直接点击跳转,访问需复制链接到浏览器)

http://120.79.207.130/blog/8

http://blog.csdn.net/leonard_kongtanhuo/article/details/79330782

http://www.cnblogs.com/compassblog/p/8450413.html

注:由于排版原因,以上仅仅为JS的一部分知识。后台回复 “ 前端 ”二字获取一份包括但不限于JS的前端知识学习手册,更多精彩内容后期会持续更新,欢迎关注!

如果你喜欢这篇文章,欢迎转发分享给你的好友!

本号文章可以任意转载,转载请注明出处!

您可能还关注:

每一步成长,都想记录与分享

本文分享自微信公众号 - compassblog(gh_7303ea249902)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js时间格式化通用方法

    /** * 时间工具类 */ /** * 获取现在的时间戳(精确到s) * 使用:new Date().nowTimestamp * @type {...

    王磊的博客
  • iOS与JS的交互

    iOS和JS的交互看似两个问题,其实要解决的问题只有一个,那就是JS如何调用native方法。因为查询文档我们就可以发现,在UIWebView中,native有...

    梧雨北辰
  • javascript基础知识点1.0

    知识点综述: ---- 在复习JavaScript语法,主要看的是w3cschool的教程。 用法: 1.0必须位于<script></s...

    东风冷雪
  • js堆栈溢出的问题

        js是最令程序员头疼的问题了,不是语法也不是使用头疼,而是调试头疼,虽然有很方便的各种各样的调试工具,但经管这样有时候一个疏忽的小问题,会导致各种各样的...

    王磊的博客
  • javascript 复制功能 兼容所有浏览器的解决方案

    代码如下: // 兼容所有浏览器 function copyUrl(url) { if (navigator.userAgent.toLowerCase...

    王磊的博客
  • 走近 Python (类比 JS)

    Python 是一门运用很广泛的语言,自动化脚本、爬虫,甚至在深度学习领域也都有 Python 的身影。作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 ...

    小莹莹
  • 几款浏览器JavaScript调试工具

         WEB开发工具的使用已经非常普及,如果想要更方便于开发的话,不妨看看本文介绍的15款基于浏览器扩展的WEB开发工具。 1.Firebug   Fir...

    王磊的博客
  • js 创建快捷方式

    <script type="text/javascript" language="javascript"> // 创建快捷方式[浏览器设置要低,ff不支...

    王磊的博客
  • 【笔记】实现一个简易的Promise

    const PENDING_STATE = "pending"; const FULLFILL_STATE = "fullfilled"; const REJE...

    SmileSmith
  • TensorFlow AI 新品更易用!联手NVIDIA,支持Swift和JavaScript

    整理 | 费棋 天体物理学家使用 TensorFlow 分析开普勒任务中的大量数据,以发现新的行星; 医学研究人员利用 TensorFlow 机器学习技术来评估...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券