JavaScript基础------入门基础
JavaScript他是一种描述性语言,使用JavaScript就是为了能和网页有更好的交互,下面切入主题进行讲解。
一.JavaScript
1.什么是JavaScript
JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言。
2.JavaScript的特点总结
JavaScript主要用来向HTML页面添加交互行为。
JavaScript是一种脚本语言,语法和Java类似。
javaScript一般用来编写客户端的脚本。
JavaScript是一种解释性语言。
3.JavaScript的组成(我们先在这里了解一下,在以后如果你深入了解js你会接触到)
ECMScript标准(规定所有属性,方法和对象的标准)
BOM浏览器对象模型(Browser Object Model):与HTML交互
DOM文档对象模型(Document Object Model):访问和操纵HTML文档
4.JavaScript基本结构
<script language=”javascript” type=”text/javascript”>
<!--Language=”javascript”用来表示使用的语言是javascript->
</script>
5.JavaScript执行原理(请求/响应原理)
1. 浏览器客户端向服务器端发送请求。(用户在浏览器地址栏中输入的地址)
2.数据处理:服务器端将某个包含javaScript的页面进行处理。
3.发送响应:服务器端将含有javascript的HTML文件进行处理页面发送到浏览器客户端,然后由浏览器客户端从上直下逐条解析HTML标签和JavaScript标签,将页面效果呈给用户。
二.在网页中引入JavaScript的方式
1.使用<script>标签。
2.使用外部JavaScript文件。
希望多个页面中运行JavaScript实现相同效果,通常使用外部文件为.js的文件。
在文件引用.js为扩展名的文件:
<script src=”../1.js”></script>
3.直接在HTML标签中
<input name=’btn’ type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>
三.JavaScript核心语法
1.变量的声明和赋值
变量的声明只有用var,变量的命名规范和Java类似。Var num=1;
在JavaScript中变量可以不用声明就可以直接使用,但是不推荐这种用法。
2.数据类型
Undefined(未定义类型)
Null(空类型)
Number(数字类型)
String(字符串类型)
Boolean(布尔类型)
3.undefined和null的区别
null 表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
Object.getPrototypeOf (Object.prototype)// null
undefined 表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于 undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于 undefined。
(3)对象没有赋值的属性,该属性的值为 undefined。
(4)函数没有返回值时,默认返回 undefined。
4.只有6种情况,判定结果为假。
null,false,undefined,0,"",NaN
5.字符串的一些常用方法
toString();返回字符串
toLowerCasee();把字符串装换为小写。
toUpperCase();把字符串转换成大写
charAt(index);返回在指定位置的字符串
indexOf(str,index);查找某个指定的字符串在字符串中首次出现的位置
Substring(index,index);返回位于指定索引index1和index2之间的字符串(包括index1不包括index2)
Split(str);将字符串分割为字符数组
6.创建数组并为数组赋值的三种方式
01. Var num=(‘1’,’2’);
02.var num=new Array(2);
Num[0]=1;
Num[1]=2;
03.var num=[‘1’,’2’];
数组的常用方法和属性
Length:设置或返回数组中元素的数目
Join():把数组的所有语速放入一个字符串,通过分割符进行分割。
Sort():对数组进行排序
Push():向数组末尾添加一个或更多元素,并放回新的长度。
<script type="text/javascript">
//01.方式一:创建数组,并给数组赋值
// var fruit = new Array('apple', 'orange', 'peach', 'bananer');
//02.方式二:先创建数组,后通过下标给数组赋值
var fruits = new Array();
fruits[] = 'apple';
fruits[] = 'orange';
fruits[] = 'peach';
fruits[] = 'bananer';
//03方式三:和方式一类似只不过改变了符号
//var fruitss = new Array['apple', 'orange', 'peach', 'bananer'];
//04.访问数组中下标为3的数据
document.write(fruits[]);
//05通过数组的join方法把元素放到字符串中并用指定分隔符进行分割
var result = fruits.join(',');
//06通过sort方法对数组进行排序
fruits.sort();
//06.向末尾添加一个或多个元素,最后返回该数组的新长度
var length= fruits.push('wert','foot');
document.write('\n' + length);
//07.遍历数组
for(var item in fruits)
{
alert(fruits[item]);
}
</script>
7程序调试
方案一:在VS中调试
步骤:01.将要调试的页面设置成起始页
02.设置断点
03.按F5启动调试
方案二:chrome浏览器调试
步骤:01.点击F12,将工具调出
02.设置断点
03.刷新页面
方案三:IE浏览器
步骤:01.F12,开发人员工具
02.切到脚本选项卡
03.设置断点
04.启动调试
05.刷新
四.JavaScript中的函数
1.常用的系统函数
01. parseInt(“字符串”);
parseInt()函数首先查看位置为0处的字符,判断他是否为一个有效数字,如果不是则返回NaN,不在执行其他操作,但如果该字符是有效参数,则该函数将查看位置为1处的字符,进行同样的测试,这一过程将持续到发现该字符是有效字符为止,此时该字符将之前的字符串转换成数字。
eg:
var num1=parseInt(“78.9”)//返回值为78
var num2=parseInt(“afa78.9”)//返回值为NaN
02.parseFloat(“字符串”);
他的用法和parseInt类似,只不过字符串中出现的第一个点将被认为是有效字符.
eg:
var num1=parseInt(“78.9”)//返回值为78
var num2=parseInt(“afa78.9”)//返回值为NaN
2.自定义函数
在JavaScript中,自定义函数是由function,函数名,一组以参数以及置于括号中待执行的JavaScript语句组成。
下面来看一看语法:
function 函数名(参数1,参数2,..)
{
//JavaScript语句
[return 返回值]
}
function是定义函数的关键字,必须有。
参数1,和参数2是该函数的参数,因为JavaScritp他本省的类型是弱类型,所有在给定参数时没有必要提供类型
{}定义的函数的开始和结尾.
return 语句用来规定函数返回的值.
2.调用函数
对像名.方法名
3.匿名函数
匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解。这里就来分析一下。
function 函数名(参数列表){函数体;}
如果是创建匿名函数,那就应该是: function(){函数体;}
因为是匿名函数,所以一般也不会有参数传给他。
为什么要创建匿名函数呢?在什么情况下会使用到匿名函数。匿名函数主要有两种常用的场景,一是回调函数,二是直接执行函数。
<script language="javascript">
var a = "a";
(function(){
var a="b";
alert(a);
})();
alert(a);
</script>
输出结果:1先输出b
2输出a
原因:以为该Script标签中有一个匿名方法时自调用的
JavaScript基础------入门基础的更多相关文章
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- 从零基础入门JavaScript(1)
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- JavaScript 基础入门
JavaScript 基础入门 JavaScript 的组成 JS 由三部分组成,它们分别是:ECMAScript.DOM.BOM. ECMAScript 因为网景开发了JavaScrip ...
- JavaScript基础入门10
目录 JavaScript 基础入门10 正则表达式 为什么使用正则表达式? 正则表达式的应用场景 如何创建一个正则表达式 基础语法 具有特殊意义的转义字符 量词 字符类 贪婪模式 练习 邮箱验证 中 ...
- JavaScript基础入门09
目录 JavaScript 基础入门09 Event 自定义右键菜单 获取鼠标按键 获取鼠标坐标 获取键盘按键 页面中位置的获取 浏览器的默认行为 冒泡 什么是冒泡 小练习 JavaScript 基础 ...
- JavaScript基础入门08
目录 JavaScript 基础入门08 DOM 介绍 绑定事件 给一组元素绑定事件 节点 节点树 节点类型 选取文档内容 通过id选取元素 通过指定的标签名选取元素 用指定的css类来选取元素 通过 ...
- JavaScript基础入门07
目录 JavaScript 基础入门07 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门07 BOM ...
- JavaScript基础入门06
目录 JavaScript 基础入门06 Math 对象 Math对象的静态属性 Math对象的静态方法 指定范围的随机数 返回随机字符 三角函数 Date对象 基础知识 日期对象具体API 构造函数 ...
随机推荐
- 如何使用ITEXTSHARP将HTML代码字符串写进PDF
原文 如何使用ITEXTSHARP将HTML代码字符串写进PDF itextsharp包括一个简单的类,可以用来根据html代码或字符串创建pdf文件.使用此类,你可以使用短短几行代码,就将 HTML ...
- jQuery_02之元素操作及事件绑定
1.操作元素之属性: ①attr读:$("selector").attr("属性名"):=>getAttribute("属性名"):改 ...
- 快速入门系列--WCF--04元数据和异常处理
本章节将进行元数据和异常处理的介绍,这部分内容概念型比较强,可以快速浏览一下就好. 客户端和服务器借助于终结点进行通信,服务的提供者通过一个或者多个终结点将服务发布出来,服务的消费者则通过创建与之匹配 ...
- angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...
- css 用direction来改变元素水平方向,价值研究。
"direction"有两个值:ltr | rtl ltr:从左往右 rtl:从右往左 默认:ltr 一起看个效果就懂了. <style> div{ direction ...
- JavaScript与有限状态机
有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物. 简单说,它有三个特征: * 状态总数(state)是有限的. * 任一时刻,只处在一种状态之中. ...
- c#用socket异步传输字符串
再次特别感谢张子阳老师的文章,是我深感益处. 在前一篇文章中可以看到,尽管消息分成了三条单独发送,但是服务端却将后两条合并成了一条.对于这些情况,我们可以这样处理:就好像HTTP协议一样,在实际的请求 ...
- 使用Unity3D Asset Server进行联合开发和版本控制
前言:感觉在功能方面,其实Github更加强大易用,但是鉴于网络延迟问题,学一下AssetServer也是不错的.关于Asset Server的搭建步骤,其实官网论坛上已经有了解释得比较详细明了,在这 ...
- HTML5移动Web开发(九)——优化浏览器视口宽度设置
每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...
- Bootstrap Magic – 轻松创建自己的 Bootstrap 主题
Bootstrap Magic 是一款基于 Bootstrap 和 AngularJS 的主题创建工具.您可以轻松地创建您自己的 Twitter Bootstrap 主题,可以立即看到你的内容变化.您 ...