01 js基本介绍

1.课程介绍

2.Javascript介绍

3.Javascript开发工具的介绍

4.第一个javascript程序(hello!)

5.Javascript的基本语法(1)

为什么要学习javascript

Javascript是实现网页动态效果的基石,在web开发中扮演重要的角色,被广泛的应用到各个领域

①网页游戏(qq偷菜)

②地图搜索 (百度地图放大放小)

③股市信息(更新股市曲线)

④web聊天(旺旺网页版)

鼠标的响应,键盘的监听都需要用javascript

校验输入的用户名是否正确需要用javascript

在web开发中,js是必不可少的技术,同时js也是Ajax/jquery/extjs等框架的基础

Javascrip基本语法

Javascrip面向对象编程

bom与dom编程

正则表达式

Javascript 介绍

Javascript是一种广泛用于客户端web开发的脚本语言,常用来给html网页添加动态功能,比如响应用户的各种操作。

什么是脚本语言

①脚本语言介于html和c,c++,java,C#等编程语言之间(往往不能独立使用,需要配合其他语言来使用,它和html/jsp/php/asp/asp.net配合使用)

②脚本语言有自己的变量,函数,控制语句(顺序、分支、循环),与编程语言最大的区别是编程语言的语法和规则更为严格和复杂一些。

③脚本语言是一种解释性语言(即在执行的时候,直接对源码进行执行)例如Python、vbscript、javascript等等都是脚本语言,它不像c\c++等可以编译成二进制代码,以可执行文件的形式存在。

④脚本语言一般都有相应的脚本引擎来解释执行,javascript 的脚本引擎就是浏览器。

Java程序: java-> .class->jvm         js->浏览器(js引擎来解释执行)

Js最新版本是1.8

Js的绝大部分在客户端执行。【原理图】

通过httpwatch在IE浏览器抓包获得的信息:

html文本代码:

<html>
<head>
<!-- <script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。 -->
<script type="text/javascript">
 function test() {
    window.alert("Hello world!");
 }
</script>
</head>
<body>
<input type="button" onclick="test()" value="点击">
</body>
</html>

运行浏览器效果:

第一次访问:

296 bytes sent to 127.0.0.1:8080

GET /ustc/js18-1.html HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
X-HttpWatch-RID: 18929-10010
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:8080
DNT: 1
Connection: Keep-Alive

670 bytes received by 127.0.0.1:1817

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Accept-Ranges: bytes
ETag: W/"444-1431921729532"
Last-Modified: Mon, 18 May 2015 04:02:09 GMT
Content-Type: text/html
Content-Length: 444
Date: Mon, 18 May 2015 11:09:02 GMT

<html>
<head>
<!-- <script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。 -->
<script type="text/javascript">
 function test() {
    window.alert("Hello world!");
 }
</script>
</head>
<body>
<input type="button" onclick="test()" value="点击">
</body>
</html>

 二次刷新的时候http请求和server返回的信息(即本地已有缓存):

383 bytes sent to 127.0.0.1:8080

GET /ustc/js18-1.html HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
X-HttpWatch-RID: 3307-10051
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:8080
If-Modified-Since: Mon, 18 May 2015 04:02:09 GMT
If-None-Match: W/"444-1431921729532"
DNT: 1
Connection: Keep-Alive

122 bytes received by 127.0.0.1:2125

HTTP/1.1 304 Not Modified
Server: Apache-Coyote/1.1
ETag: W/"444-1431921729532"
Date: Mon, 18 May 2015 11:25:43 GMT

注意此段:

HTTP/1.1 304 Not Modified

点击按钮的时候就不再会向服务器发送请求:

Js代码从服务器返回到客户端,在本地客户端执行js脚本。

Javascript历史

Netscape于1996年开发的livescript,后来和sun公司合作,将livescript更名为Javascript.

Javascript和java语言没有一点关系,和java公司有关系。

微软开发jscript语言,和Javascript相似度达99%。

浏览器发展历史:

1993 NCSA开发Mosaic

NETscape开源,创造Mozilla;

浏览器:

①广告

②所有的信息都经过浏览器经过。

时间: 2024-11-21 03:40:51

01 js基本介绍的相关文章

Web3D编程入门总结——WebGL与Three.js基础介绍

1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ 2 /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ 3 //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 4 //简单例程: 5 //根据To

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2

sea.js的介绍和使用

之前有一篇博客非常详细的介绍了sea.js的加载流程,以及源代码实现,链接地址:http://www.cnblogs.com/chaojidan/p/4123980.html 这篇博客我主要讲下sea.js的介绍和使用. 首先,先介绍下sea.js的CMD规范,以及跟其他规范的区别. CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践. 09年下半年这帮充满干劲的小伙子们想把 ServerJS 的成功经验进一步推广到浏

Atitit.软件GUI按钮与仪表盘(01)--js区-----js格式化的使用

Atitit.软件GUI按钮与仪表盘(01)--js区-----js格式化的使用 1. Chrome36( recomm) DEV TOOL>SOURCE> DSWEIHAMYAR  " PRETTY PRINT.."...ICON dakwahaor.. 作者::老哇的爪子Attilax艾龙,EMAIL:[email protected] 转载请注明来源: http://blog.csdn.net/attilax 2. APTNA paip.JS格式化时提示不能格式化时的

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph

doT.js详细介绍

doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{{ }} for evaluation{{~ }} for array iteration{{? }} for conditionals{{! }} for interpolation with encoding{{# }} for compile-time evaluation/includes

01、Scala介绍与安装

01.Scala介绍与安装 1.1 Scala介绍 Scala是对java语言脚本化,特点是就是使不具备脚本化的java语言能够采用脚本化方式来使用,使其具有脚本语言简单.所见即所得的特点,并且编程效率高,实现速度快等特点.在大数据领域中,Spark和Kafka这些著名的框架都是采用scala语言编写,但由于Scala的语法比较诡异,所以最开始接触scala的人会有些不适应,但是熟练之后就会感受到他的好了. 1.2 Scala安装 1.2.1 下载Scala安装包 scala安装下载地址: ht

JS总体介绍

一. 总体介绍 结合近半年来前端的项目的经验,这里梳理一下JS常用知识,方便自己日后温习查找,同时给广大JS入门者提供一些帮助,文章中如有错误,欢迎指出. 这里从JS常用事件.Dom方法.数组.Dom操作.offset专题.event家族.Scroll家族.动画.闭包.面向对象基础等方面着重介绍一套JS相对完善的前端JS体系.