文档章节

JavaScript基础精讲

sdksdk0
 sdksdk0
发布于 2016/06/14 13:16
字数 2194
阅读 4
收藏 0
点赞 0
评论 0

---------------------------------------------------------------------------------------------------------------
[版权申明:本文系作者原创,转载请注明出处]
文章出处:http://blog.csdn.net/sdksdk0/article/details/51596213
作者:朱培
---------------------------------------------------------------------------------------------------------------

本文主要从javascript简介开始,分享Js语法、JS函数、BOM编程和DOM编程的相关知识。

一、JS简介

1.1 简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

1.2 组成部分

 

核心(ECMAScript) :数据类型、语句、声明等;核心对象

文档对象模型(DOM) :Document Object Model(XML DOM和HTML DOM)

浏览器对象模型(BOM):BrowserObject Model(核心对象:window、location等)

 

1.3 编写方式

 

直接通过事件调用:

onClick="alert('hello');"

内部编写方式:

<script  type="text/javascript" >
    alert("hello good mi");
</script>

外部方式:

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

 

二、JS语法

 

2.1 基本语法

 

 

js的语法很多都与java差不多,但是又有所不同,值得一提的就是java和javascript是完全不同的两个概念,就像雷锋和雷锋塔一样。下面来看看常用的一些变量和数据类型。

·var 合法的变量名;

        变量名不能使用关键字。多个变量可以用逗号分隔。

      ·运算符号与Java中相同

      · if(表达式){}

          else{}

      · for(初始化;条件;增量或减量){}

      ·while(条件){}

      ·switch(表达式)

          {case 常量值1:JavaScript语句;

            case 常量值2:JavaScript语句;

            default:JavaScript语句;}

       •类型:number/null/boolean/string/object/undefinde

       •类型转换:掌握parseFloat()和parseInt()函数。

       •重点定义函数:function 函数名(参数列表){}

              注:也可以没有参数

              调用函数:事件名="函数名()"

               获取表单数据:document.表单名.表单元素名.value

示例:

 

<script type="text/javascript" >                                                                                                                          var v2="abc";
alert(typeof v2);
var v3=100;
alert(typeof v3);  //number类型
var v5=new Date();
alert(typeof v5);  //object类型                                                                                                                          </script>

 

2.2  数据类型

  • 变量、函数、运算符区分大小写。
  • 变量是弱类型的,var a=10;
  • 注释://和/* */
  • 5种原始数据类型:Underfined、Null、Boolean、Number、String

 

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型.

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

 

 

JavaScript中的基本数据类型有数字型、字符串型和布尔值三种,除了基本数据类型之外,JavaScript还支持对象、数组、函数、null和undefined数据类型。JavaScript与其他语言一样,也支持常量与变量,不过JavaScript中的变量是无类型的,即可以存储任何一种数据类型的数据。

JavaScript中的运算符比较多,可以分为算术运算符、关系运算符、字符串运算符、赋值运算符、逻辑运算符、逐位运算符和其他运算符七大类。在使用

JavaScript中的运算符时,要注意不同运算符的优先次序。

 


三、JS函数

 

3.1基本函数

 

 形式参数:定义函数时为函数定义的参数,它代表参数的类型和位置。

        实际参数:调用函数时传递给函数的参数值。

        调用时:把实参的值传递给形参。

        函数名严格区分大小写。

        多个参数用逗号隔开,要调用函数时,必须为逗号隔开的每个参数指定类型兼容的值。

        如果需要返回结果,使用return语句。

 

书写格式:

 

  • 方式1

 

function 函数名([参数]){ 函数体 }

有返回值,直接return

  • 方式2

var 函数名=function([参数]){ 函数体 }

  • 方式3

var 函数名=new function([参数],函数体);

 3.2 常用函数方法

 

  1. Array是可变长数组。
  2. contact();链接多个数组,返回一个新数组
  3. join:链接数组元素,用指定的字符。
  4. pop,push,栈结构
  5. valueOf(),返回数组的原始值
  6. sort(),按字符排序

3.3 示例

var arr1=["a","b","c"];
	alert(arr1.length);
	var arr2=new Array();  //无元素
	alert(arr2.length);
	arr2[0]="a";
	alert(arr2.length);
	*/
	//构建数组是,给定元素
	/*var arr4=new Array("a","b","c");
	for(var i=0;i<arr4.length;i++){
		alert(arr4[i]);
	}
	*/
	//contact();链接多个数组,返回一个新数组
	/*var arr1=["a","b"];
	var arr2=["b","d"];
	var arr3=arr1.concat(arr2);
	for(var i=0;i<arr3.length;i++){
		document.write(arr3[i]+"<br />");
	}
	*/
	//join:链接数组元素,用指定的字符。
	/*var arr1=[2016,6,2];
	var result=arr1.join("-");
	document.write(result);	
	*/
	//pop、push
	//定义了一个比较器
	/*function comp(a,b){
		return a-b;	
	}
	var arr1=[1,3,100,5,4,9,7];
	arr1.sort(comp);
	for(var i=0;i<arr1.length;i++){
		document.write(arr1[i]+"<br />");
	}
	*/
	/*var v1="  ";
	if(v1){
		alert("true");
	}else{
		alert("false");	
	}
	*/
	/*var now=new Date();
	document.write(now.toLocaleDateString()+"<br />");
	document.write(now.getTime());
	*/
	/*for(var i=0;i<100;i++){
		document.write(Math.random());
	}
	*/
	/*var s1="abc"+"ddd";
	document.write(s1.bold());
	*/
	/*var s1="jbjlnxln";
	alert(s1.substr(1,3));
	alert(s1.substring(2,9));
	*/
	//var reg1=new RegExp("^\\d+$");
	/*var s1="1234";
	var s2=s1.match(reg1); //返回s1中符合条件的内容
	alert(s2);
	var reg1=/^\d+$/;
	*/

 

 

四、BOM基础

 

4.1 Bom简介

  • BOM是browser object model的缩写,简称浏览器对象模型
  • BOM提供了独立于内容而与浏览器窗口进行交互的对象
  • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
  • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
  • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
  • BOM最初是Netscape浏览器标准的一部分

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象


由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象。

4.2 示例1:通过点击按钮有弹窗操作

 

在demo4.html中

 

<script type="text/javascript">
	/*function chose(){
		var rtValue=window.showModalDialog("demo3.html","","dialogHeight:100px,dialogwidth:100px");
		document.getElementById("name").value=rtValue;
		
	}*/
	function chose(){
		window.showModalDialog("demo3.html",window,"dialogHeight:100px,dialogwidth:100px");
	}
	

</script>

<body>

<input type="text" id="name" name="name"  value="" />
    <input type="button" value="选择"  onclick="chose()" />


</body>

在demo3.html中:

 

 

<script type="text/javascript">
  	function rtValue(inputObj){
		/*var v=inputObj.value;
		window.opener.document.getElementById("name").value=v;
		window.close();
		*/
		
		/*window.returnValue=inputObj.value;
		window.close();
		*/
		
		var rtValue=inputObj.value;
		window.dialogArguments.document.getElementById("name").value=rtValue;
		window.close();
	}
  </script>
  
<body>
    <input type="radio" name="type"  value="金牌会员"  
    onclick="rtValue(this)" />金牌会员<br />
    <input type="radio" name="type"  value="铜牌会员" 
    onclick="rtValue(this)"/>铜牌会员<br />
    <input type="radio" name="type"  value="钻石会员" 
    onclick="rtValue(this)"/>钻石会员<br />
    <input type="radio" name="type"  value="白金会员" 
    onclick="rtValue(this)"/>白金会员<br />

</body>

 

4.3 示例2:网页时间的动态显示

 

 

<script type="text/javascript">
  	/*function showTime(){
		var date=new Date();
		document.getElementById("time").innerHTML=date.toLocaleString();	
		window.setTimeout("showTime()",1000);
	}
	window.setTimeout("showTime()",1000);
		*/
		
	function showTime(){
		var date=new Date();
		document.getElementById("time").innerHTML=date.toLocaleString();	
	}
	var i1=window.setInterval("showTime()",1000);	
	
	function stop(){
		window.clearInterval(i1);	
	}
	function start(){
		i1=	window.setInterval("showTime()",1000);
	}
		
  </script>
  
<body>
    当前时间是:<span id="time" ></span>
    <input type="button" value="停止"  onclick="stop()" />
    <input type="button" value="开始"  onclick="start()" />

</body>

 

 

 

 

 

 

 

4.4 history对象

 

即网页中的下一步,或者返回到上一个网页的内容。

<script type="text/javascript">

function jump(){
	window.location.href="http://www.tianfang1314.cn";	
}
</script>

<body>

<a href="javascript:window.history.back()" >返回</a>
<a href=" javascript:window.history.forward()">前进</a>   
<input type="button" value="跳转" onclick="jump()" />

 

 

五、DOM基础

 

 

5.1 Dom的结构

 

DOM(Document Object Model)标准是W3C。把文档当做一个树状结构

 

 

 

 

Node:DOM中一切都是节点。

Element:元素节点

Attr:属性节点

Text:文本节点

document:文档节点

5.2 Node中的常用属性和方法

 

 

示例:网页中的全选和反选

 

 

<script  type="text/javascript">
	window.onload=function(){
		document.getElementById("b1").onclick=function(){
			//根据name获取checkbox对象
			//XMLDOM方法
			/*var hobbyNodes=document.getElementsByName("hobby");
			for(var i=0;i<hobbyNodes.length;i++){
				hobbyNodes[i].setAttribute("checked","checked");
			}*/
			
			//HTML DOM
			var hobbyNodes=document.getElementsByName("hobby");
			for(var i=0;i<hobbyNodes.length;i++){
				hobbyNodes[i].checked=true;
			}
		}
		document.getElementById("b2").onclick=function(){
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=false;
				}	
		}
			document.getElementById("b3").onclick=function(){
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=!hobbyNodes[i].checked;
				}	
			}
			document.getElementById("c1").onclick=function(){
				
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=this.checked;
				}	
			}
		
	}

</script>
<body>
	请选择您的爱好:<br />
    <input type="checkbox" id="c1" />全选/全不选<br />
    <input type="checkbox" name="hobby" value="fb" checked="checked"/>足球
    <input type="checkbox" name="hobby" value="bb" />篮球
 	<input type="checkbox" name="hobby" value="ppb" />乒乓球
  	<input type="checkbox" name="hobby" value="ymb" />羽毛球
	<br />
    <input  type="button" id="b1" value="全选"  />
    <input  type="button" id="b2" value="全不选"  />
    <input  type="button" id="b3" value="反选"  />
    
</body>

 

 

 

 

 

总结:整个javascript的知识比较琐碎也比较精彩,官方文档其实是我们必不可少的工具,学会查看文档并正确使用文档是一个开发者必备的技能!想进一步学习的可以关注我的博客,同时也可以查阅下列推荐的好书:《JavaScript权威指南》、《JavaScript DOM编程艺术》、《锋利的JQuery》、《深入浅出Node.js》。

 

 

© 著作权归作者所有

共有 人打赏支持
sdksdk0
粉丝 1
博文 105
码字总数 73456
作品 0
衡阳
程序员
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
05/02
0
0
开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream
06/04
0
0
JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放
05/28
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa
06/25
0
0
《javascript DOM编程艺术》读后

先把自己做的例子传上http://wjfdwr.svfree.net/ 话说,今年7月开始的实训,一直在做关于前台方面的事,当时听到要用javascript就在想,遭了完全不会啊,然后没办法,就只有一边学习,一边试...

jeffywon
2012/11/09
0
0
【JavaScript基础系列】决定你的人生能走多远的,是基础。

前言    javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点...

grootzhang
2017/09/12
0
0
《javascript语言精粹》学习笔记1

作为一个前端的学习者,之前由于时间赶且懒的特性,没有好好的学习一下js的特性,只看了w3cschool的基础教程,知道语法后就用起了jQuery框架,js的很多基础完全没有接触理解。这段时间了解到...

高霸天
2013/03/17
0
0
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0
说说掌握JavaScript语言的思想前提

无论是公司的同事还是外界的程序员朋友们,大部分人对JavaScript的高级应用不甚了解,已有的知识架构里会认为JavaScript仅仅是一门脚本语言,其作用是给页面做一些锦上添花的效果,比如表单验...

bosscheng
2013/08/07
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

nodejs安装以及环境配置(很好的node安装和配置文章,少走很多弯路)

一、安装环境 1、本机系统:Windows 10 Pro(64位) 2、Node.js:v6.9.2LTS(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2、选安装目录进...

sprouting
21分钟前
0
0
Redisson

了解了Redisson,发现使用挺简单的,接下来准备深入学习一下。 Redisson介绍 Redisson是架设于Redis基础之上的一个Java驻内存数据网格(In-Memory Data Grid) Redisson在基于NIO的Netty框架上...

to_ln
21分钟前
0
0
python有哪些好玩的应用实现,用python爬虫做一个二维码生成器

python爬虫不止可以批量下载数据,还可以有很多有趣的应用,之前也发过很多,比如天气预报实时查询、cmd版的实时翻译、快速浏览论坛热门帖等等,这些都可以算是爬虫的另一个应用方向! 今天给...

python玩家
21分钟前
0
0
jq 判断复选框是否被选中,复选框后台接收

1. 效果 2. 代码 html部分: JS部分: var rememberLogin = $("#rememberLoginId").is(':checked')//获取复选框是否被选中 var rememberLoginval = $("#rememberLoginId").attr('value')//拿......

Lucky_Me
28分钟前
0
0
python爬虫日志(3)-爬去异步加载网页

在浏览器检查元素页面中,选取Network中的XHR选项即可观察每次加载页面,网页发出的请求,观察url的规律即可利用封装的函数对每一页进行爬取。

茫羽行
29分钟前
0
0
《趣谈网络协议》之为什么要学习网络协议?

一、协议 1.协议的定义 简单说协议就是一个规则,保证沟通交流双方可以互相听懂、理解或者可以双方合作可以顺利进行的一个约定和规则。 2.生活中例子 (1)有一种叫“程序猿”的物种,敲着一种...

aibinxiao
30分钟前
1
0
Python数据分析numpy基础-维度的认识

什么是多维数组? 核心对象是同型的多维数组(简单理解就是一个表格,通常内容都是些数字),具有相同的数据类型。 概念: 1. axes(轴):数组的维度统称为轴。 2. rank:轴的数量称为rank。...

十年磨一剑3344
34分钟前
0
0
Java 正则表达式相关资料

1.java正则表达式过滤html标签

IT追寻者
38分钟前
0
0
点赞出现数字变大效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; } ......

南桥北木
56分钟前
0
0
anroid中批量将px转换成dp

package com.qu;import java.io.File;import java.io.FileWriter;import java.io.IOException;public class Aaaa {public static void main(String[] args) {String fi......

android-key
57分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部