JavaScript简介---JS基础

JavaScript简介

JavaScript起源

早年间,人们上网都是使用速度很 🐌 的”猫“(调制调解器)上网。想象一下这样一个场景:你好不容易填写完了注册表单,点击【提交】按钮,然后等待 30 秒,最终服务器返回的消息说密码的长度不能少于 6 位,让你重新填写整个表单,这时你是不是很想 😭,这该是多么糟糕的用户体验呀。

为了解决此类问题,当时走在技术革新最前沿的网景(Netscape)公司,决定着手开发一种客户端语言,用来处理这种简单的表单验证。

当时就职于网景公司的 布兰登.艾奇 负责该项目的实施,开始着手为计划于1995年2月发布的Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript 的开发,Netscape 与 Sun 公司建立了一个开发联盟,共同开发 LiveScript。在 NetScape Navigator 2 发布前夕,网景为了更好地推广这个脚本语言(利用 Java 语言的知名度),临时把 LiveScript 改名为 JavaScript,实际上两者没有任何关系。
浏览器战争
JavaScript 1.0 发布之后获得了巨大的成功,Netscape 随即在 Netscape Navigator 3 中又发布了JavaScript 1.1。与此同时,微软公司在推出 IE 3 的时候也发布了自己的脚本语言,JScript。JScript 和 JavaScript 差异很大,互不兼容,编程人员不得不痛苦地为两种浏览器分别编写脚本。 例如,你想获得 id 属性值为 myid 元素的 left 位置,并把它赋值给变量 xpos ,那么在 Netscape Navigator 4 浏览器里必须这样写:

        var xpos = document.layers['myid'].left;

而在 IE 4 浏览器中,需要这样写:

        var xpos = document.all['myid'].leftpos;

制定标准

1997年,网景公司给欧洲计算机制造商协会(ECMA, European Computer Manufacturers Association)提了一个建议,以 JavaScript 1.1 为蓝本,由该协会主导制定了一套 JavaScript 语言开发规范。于是 ECMAScript 诞生了,这是一个国际标准化的 JavaScript 开发标准,所有浏览器厂商在开发浏览器脚本语言时,都要准守这套规范。这样的话,编程人员在写代码时只要写一次,就可以在所有的浏览器上执行了。在新的规范下,操作DOM元素的的语法就可以统一写成这样:

        var xpos = document.getElementById('myid').style.left;

使用JavaScript行内代码

使用 javascript: 前缀构建执行 JavaScript 代码的URL.

    <a href="javascript:alert('Hello JavaScript')">点我</a>

所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL,当用户触发该 URL 时,javascript: 之后的 JS 代码就会获得执行。

将 JS 代码写到元素的事件属性值中

<div onclick="window.alert('Hello JavaScript!')"></div>

这两种方式只适用于代码量比较少的时候,如果代码比较多,建议使用内部代码或写到单独的 JS 文件中。

内部代码
如果页面需要中包含大量的 JavaScript 代码,则建议将这些JavaScript脚本放在 <script>标签中。<script> 元素即可作为 <head>的子元素,也可作为 <body> 的子元素,通常位于<body>元素闭合标签的前面。

<script type="text/javascript">
    alert('Hello JavaScript')
</script>

外部代码
为了让 HTML 页面和 JavaScript 脚本更好地分离,我们可以将 JavaScript 脚本单独保存在一个.js 文件中,HTML 页面导入该 .js 文件即可。

<script src="test.js" type="text/javascript"></script>

理解Window对象
在页签浏览器(比如 Chrome)中,每个页签具有自己的 window 对象。也就是说,同一个窗口的页签之间不会共享一个 window 对象。window 对象给我们提供了一些方法、属性和事件。

Window对象的方法
window 提供的几个关于对话框的方法。

    // 警告框
    window.alert('哈哈');

    // 确认框
    window.confirm('确认退出该应用吗?');

    // 输入框
    window.prompt('请输入密码?');

window对象的属性

window对象的console属性也是一个对象,它提供了几个可以在控制台输出信息的方法。

    // 日志信息
    window.console.log('日志信息');

    // 错误信息
    window.console.error('错误信息');

    // 警告信息
    window.console.warn('警告信息');

    // 普通信息
    window.console.info('普通信息');

    // 调试信息
    window.console.debug('调试信息');

JavaScript语法

标识符
所谓标识符,就是指变量、函数、属性,或者函数参数的名字。

标识符的组合规则:

第一个字符必须是一个字母、下划线(_)或一个美元符号($)
其他字符可以是字母、下划线、美元符号或数字。

只能由英文字母、数字、下划线(_)、美元符号($)构成,并且不能以数字开头,不能使用 ECMAScript 的关键字和保留字。

命名书写规范:

推荐采用第一个单词的首字母小写,其余单词首字母大写的方式,例如:firstNamegetUserInfo

大小写敏感

JS 中的标识符是区分大小写的,也就是说变量 nameName 是两个不同的标识符。

注释

// 单行注释

/* 

    这是内容比较多的,

    多行注释。
*/

/* 多行注释 /* 不能嵌套使用, */ 否则会导致语法错误! */
关键字
这些标识符已经被 ECMAScript 收录(使用)了,它们被赋予特殊的意义(功能)了,所有我们不能使用它们作为标识符。

break               export              super
case                extends             switch
catch               finally             this
class               for                 throw
const               function            try
continue            if                  typeof
debugger            import              var
default             in                  void
delete              instanceof          while
do                  new                 with
else                return              yield

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值