初识JavaScript
初识JavaScript
1. 初识JavaScript
1.1JavaScript 历史
- 布兰登.艾奇(Brendan Eich,1961年~)。
- 神奇的大哥在1995年利用十天完成JavaScript设计。
- 网景公司最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript.
1.2JavaScript 是什么
- JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script是脚本的意思)
- 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
- 现在也可以基于Node.js技术进行服务器编程
1.3 JavaScript 的作用
- 表单动态校验(密码强度检测)(js产生最初的目的)
- 网页特效
- 服务器端开发(Node.js)、
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网 (Ruff)
- 游戏开发(cocos2d-js)
1.4HTML/CSS/JS的关系
HTML/CSS标记语言--描述类语言
- HTML决定网页结构和内容(决定看到什么),相当于人的身体
- CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆
JS脚本语言--编程类语言
- 实现业务逻辑和页面控制(决定功能),相当于人的各种动作
1.5 浏览器执行JS简介
浏览器分成两部分:渲染引擎和JS引擎
- 渲染引擎:迎来解析HTML与CSS,俗称内核,比如chrome浏览器的bink,老版本的webkit
- JS引擎:也成为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句代码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
1.6 JS的组成
JavaScript:
- ECMAScript:JavaScript语法
- DOM:页面文档对象模型
- BOM:浏览器对象模型
1.ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript:
- JavaScript网景公司
- JScript微软公司
ECMAScript:ECMAScript规定了JS编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
更多参看:http://
developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
2.DOM——文档对象模型
文档对象模型(Document Object Model,简称DOM),是W3c组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3.BOM——浏览器对象模型
BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转,获取分辨率等。
1.7 JS初体验
JS有三种书写位置,分别为行内、内嵌和外部。
1.行内式 JS
<!-- 在body 里面书写 -->
<input type="button" value="点我试试" onclick="alert('Hello World')">
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
- 可读性差,在html中编写大量代码时,不方便阅读;
- 引号易出错,引号多层嵌套匹配时,非常容易弄混;
- 特殊情况下使用
2.内嵌式 JS
<script>
alert('hello world~!')
</script>
- 可以将多行JS代码写到<script>标签中
- 内嵌JS是学习时常用的练习方式
3. 外部JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于JS代码量比较大的情况
2.JS注释
单行注释://注释内容
多行注释:/注释内容/ 默认快捷键 shift+alt+a 可自行修改
3.JavaScript 输入输出语句
为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法 |
说明 |
归属 |
---|---|---|
alert(msg) |
浏览器弹出警示框 |
浏览器 |
console.log(msg) |
浏览器控制台打印输出信息 |
浏览器 |
prompt(info) |
浏览器弹出输入框,用户可以输入 |
浏览器 |
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
- 解决Laravel 使用insert插入数据,字段created_at为0000的问题
- 关于php unset对json_encode的影响详解
- php进行md5加密简单实例方法
- Laravel timestamps 设置为unix时间戳的方法
- php实现每日签到功能
- php+redis实现消息队列功能示例
- php使用curl模拟浏览器表单上传文件或者图片的办法
- laravel框架的安装与路由实例分析
- PHP使用phpunit进行单元测试示例
- PHP+redis实现的限制抢购防止商品超发功能详解
- laravel框架查询数据集转为数组的两种方法
- phpinfo的知识点总结
- php扩展开发入门demo示例
- php使用yield对性能提升的测试实例分析