JavaScript 是一种专门与网页交互设计轻量级的编程语言，由三部分组成：
ECMAScript 提供核心语言功能。
文档对象模型(DOM)提供访问和操作网页内容的方法和接口。
浏览器对象模型(BOM)提供与浏览器交互的方法和接口
Java web项目，编码格式统一设置为UTF-8
设置项目的编码：右击项目，设置为UTF-8
设置所有的新建项目编码：window->Preferences->General->WorkSpace->Text File Encoding->UTF-8
设置HTML页面字符编码：windows->Preferences->HTML
内容辅助快捷键：window->Preferences->General->Keys->Content Assist
一、在网页中引用JavaScript的三种方式
1、使用Script标签，将JavaScript代码加入到HTML代码中。
<script type="text/javascript">
document.write("")
</script>
2、使用外部的Js文件
<script src="hello.js" type="text/javascript"></script>
3、直接在HTML标签中
<input name="btn" type="button" value="弹出消息框" onclike="javascript:alert('欢迎你');">
JavaScript变量声明
由数字、字母、下划线、$符号组成，但首字母不能是数字，且不能使用关键字
var x,y,z=20;
i=88;
二、
JS是一种弱类型语言，它随着不同的赋值类型而改变，而java是强类型语言，它预先定义好了字段的类型，不允许赋值为其他类型的值。
JavaScript数据类型:
1.undefined(未定义类型,比如 var width;声明了变量,且此变量没有初始值,将被赋予undefined)
2.null(赋值为null)
3.number(当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。)
4.String(也是一个对象,字符串.length,indexOf,split等函数)
5.boolean
typeof(变量或值)来获取数据类型,null,对象，函数，数组则返回object类型。
数组类型的定义
var 数组名称= new Array(size);
var fruit = new Array("apple","orange","peach","bananer");
var fruit = ["apple","orange","peach","bananer"];
数组常用方法:
length
join():将数组所有元素放入一个字符串，通过一个分隔符进行分割。
sort(): 排序
push():向尾部增加一个或多个元素.
pop():从数组的尾部移除一个元素
shift():把数组元素头部移除一个元素
unshift():从数组头部插入一个元素
//splice: (截取的方法)
//第一个参数：起始位置
//第二个参数：表示截取的个数
//第三个参数：表示追加的新元素个数
变量的作用域：
全局变量为，是在所有函数之外的脚本声明的变量，作用范围是该变量定义后的所有语句。注意方法内部，没有加var关键字声明的变量也为全局变量。
局部变量，是在函数内声明的变量，只能在该函数内使用。
三、逻辑控制语句
if(表达式){
//
}else{
//
}
switch(表达式){
case 值1:
break;
case 值2:
break;
case 值3:
break;
default:
break;
}
for(;;;){
}
for(变量 in 数组){
//语句
}
do{
}while(条件);
//break,continue语句
break 为跳出此循环
continue为跳过这次循环，继续下次循环
四、约定
变量及关键字都是区分大小写的。
每行是否以分号来结尾，如果没有分号，JavaScript就将行代码尾部看做该语句的结尾。
五、常用函数
var num1 = parseInt("78.89");//返回为78
var num2 = parseFloat("79.88");
isNaN(),检查其参数是否为非数字，如果是非数字，则返回值为true，否者为false。
自定义函数
function 函数名(参数1，参数2...){}
var showFun = function(){}//匿名函数
在您仅仅希望退出函数时 ，可使用 "return;" 语句.
六、window对象、history对象、location对象
window常用方法：
alert()
confirm():显示一个带有提示信息和一个"确定"按钮的警示对话框.
close():关闭浏览器窗口
open():打开一个新的浏览器窗口，加载给定URL。
示例:
var flag = confirm("确认要删除此条信息吗?");
if(flag==true){
}else{
}
window.open("弹出窗口的URL","窗口名称","窗口特征")
history常用方法：
back();加载hitory对象列表中前一个URL
forward():加载history对象列表中后一个URL
示例：
//加载历史列表中的前一个 URL
window.history.back()
//方法加载历史列表中的下一个 URL。
window.history.forward()
location常用方法:
reload():重新加载当前文档
replace():用新的文档替代当前文档
location.assign("http://www.w3school.com.cn") 方法加载新的文档。
示例：
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
七、常用事件
onload:一个页面或一副图像完成加载。
onmouseover:鼠标指针移动到某个元素
onclick:单机某个对象。
onkeydown: 某个键盘被按下
onchange:域内容被改变。
//onload 和 onunload 事件会在用户进入或离开页面时被触发。
<body onload="checkCookies()">
//onchange 事件,onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="fname" onchange="upperCase()">
//onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
//onmousedown、onmouseup 以及 onclick 事件
//鼠标点击下，鼠标弹起，完成点击事件
八、document对象
document.referrer: 返回载入当前文档的URL
document.URL: 返回当前文档的URL。
document.getElementById(): 返回对拥有指定ID的第一个对象的引用。
document.getElementByName(): 返回对拥有指定名称的对象的集合。
document.getElementByTagName(): 返回指定标签名的对象的集合。
docment.write(): 向文档写文本、HTML表达式或JavaScript代码。
示例：
写入 HTML 输出
document.write("<h1>This is a heading</h1>");
将input文本框的value值设置到s对象中。
function all_input(){
var aInput = document.getElementsByTagName("input");
var sStr = "":
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
复选框设置
<input id="all" type="checkbox" value="全选" onclick="check();"/>
function check(){
var oInput = document.getElementsByName("product");
for(var i=0;i<oInput.length;i++){
oInput[i].checked = document.getElementById("all").checked;
}
}
JavaScript 改变 HTML 元素的内容。
document.getElementById(id).attribute=new value
//本例改变了 <img> 元素的 src 属性：
document.getElementById("image").src="landscape.jpg";
//本例改变了 <h1> 元素的内容：
var element=document.getElementById("header");
element.innerHTML="New Header";
//修改css样式
document.getElementById("p2").style.color="blue";
//隐藏文本与现实文本
document.getElementById('p1').style.visibility='hidden'
document.getElementById('p1').style.visibility='visible'
Date对象
var today = new Date();//将当前日期和时间存储在变量today中。
getDate():返回1-31
getMonth(); 返回0-11
getFullYear(): 返回具体年份，其值为4位数。
Math对象
ceil(): 对数进行上舍入(Math.ceil(25.5)返回26)
floor(): 对数进行下舍入(Math.ceil(25.5)返回25)
round(): 四舍五入
random(): 返回0-1的随机数。
比如选择1-100的整数
var iNum = Math.floor(Math.random()*100+1);
//九. JavaScript 对象
//Object每个实例都具有下列属性和方法：
//Constructor:保存用于创建当前对象的函数(构造函数)
//hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在
//isPrototypeOf(Object):用于检查传入的对象是否是另外一个对象的原型
//propertyisEnumerable(propertyName):用于检查给定的属性是否能够使用for-in来枚举
//toLocaleString():返回对象的字符串表示。给字符串与执行环境的地区对应。
//toString():返回对象的字符串表示。
//valueof():返回对象的字符串，数值或布尔表示。
//== 比较表示经过自动转换，比较的是数值
//=== 比较表示经过自动转换，先比较值，再比较数据类型
var obj = {} //创建对象var obj = new Object();
//给对象设置属性
obj.name = '张三';
obj.age = 20;
obj["lastname"]="李四";
//对象的方法
obj.say = function(){
alert('hello world!');
}
//访问对象的属性和方法
alert(obj.name);
alert(obj.age);
obj.say();
//另外一种方便的创建对象的方式:
var person={
firstname:"Bill",
lastname:"Gates",
id:5566,
say:function(){
alert("早上好");
}
};
//如何去遍历一个对象的属性和属性值，在遍历对象时必须要用[]括起来
for(var atr in person){
alert(atr+" : "+person[atr]);//atr输出的是对象的key值
}
//访问对象方式
name=person.lastname;
name=person["lastname"];
//十.添加和删除节点（HTML 元素）。
//添加节点
var para=document.createElement("p"); //创建节点p，并将文字附加此节点
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//删除节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
//统计字符串中出现最多的字符
var str = 'abcdefa1231a1231231', obj = [];
for ( var i = 0; i < str.length; i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
var max = -1;
var max_key = '';
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
console.log(max_key + "为最多出现字符，出现的次数为" + max);
//Email 验证例子
//form 中的onsubmit在点submit按钮时被触发，如果return false;则结果不会被提交到action中去，如果不返回或者返回true，则执行提交动作。
//有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
分享到：
相关推荐
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
《javascript基础教程(第8版)》循序渐进地讲述了javascript 及相关的css、dom、ajax、jquery 等技术。书中从javascript 语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并...
本教程旨在为初学者提供一个全面的JavaScript基础知识学习平台，帮助理解并掌握这种强大的脚本语言。 《JavaScript基础教程》首先会介绍JavaScript的历史背景和基本语法，包括变量、数据类型、操作符、流程控制...
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
总的来说，这个压缩包提供了一个全面的JavaScript基础知识教程，涵盖了数据类型、Object、内置对象和变量等核心概念，对于初学者或者需要巩固基础的开发者来说，是一份非常有价值的参考资料。通过学习这些内容，可以...
《JavaScript基础与案例开发详解》根据JavaScript在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况，有针对性地安排了丰富的案例，从基本的表格操作、表单操作，到构建浏览器端的富文本编辑器，再到实现像Windows...
JavaScript 基础教程 JavaScript 是一种广泛应用于网页和网络应用的轻量级编程语言，它主要用于增强网页的交互性和动态功能。JavaScript 能够直接嵌入 HTML 页面中，为设计师提供了一种无需深入编程就能实现动态...
资源名称：Javaｓｃｒｉｐｔ基础与案例开发详解内容简介：《Java ｓｃｒｉｐｔ基础与案例开发详解》根据Javaｓｃｒｉｐｔ在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况，有针对性地安排了丰富的案例，从基本的...
二、JavaScript基础语法 1. 变量：JavaScript中的变量使用var、let或const关键字声明。var适用于全局或函数作用域，let和const则属于块级作用域。const声明的变量不可重新赋值，但其引用的对象属性仍可修改。 2. ...
javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript ...
JavaScript基础三天总结
本“JavaScript基础手册”旨在帮助初学者全面掌握JavaScript的核心概念和技术。 JavaScript语法基于ECMAScript规范，它包括变量、数据类型（如字符串、数字、布尔值、null、undefined、对象和数组）、运算符（算术...
这个"Javascript基础教程版"涵盖了JavaScript的核心概念，旨在为初学者提供一个清晰的学习路径。 在JavaScript的基础教程中，你将首先了解它的历史背景和应用领域，然后深入到语法层面。JavaScript语法基于...
这个名为"JavaScript基础大全 (1－4) 学习必备珍藏品"的资源显然是一个系列教程，包含了从初级到进阶的JavaScript基础知识。让我们深入探讨一下JavaScript的核心概念和技术。 1. **基础语法**：JavaScript是一种...
本资源“javascript基础视频80集11”包含了80个视频教程，覆盖了JavaScript的基础概念到高级特性，适合初学者进行系统学习。 在JavaScript的基础阶段，通常会涉及以下知识点： 1. **变量与数据类型**：JavaScript...
### JavaScript基础教程核心知识点概述 #### 一、JavaScript简介与特性 - **JavaScript的作用**：JavaScript主要用于增强网页的交互性和动态效果，使网页能够实时响应用户的操作，提高用户体验。 - **减少HTML重复*...
本套“JavaScript基础视频80集8”将深入浅出地介绍这一语言的基础知识，帮助初学者建立坚实的编程基础。 视频内容可能涵盖以下几个方面： 1. **变量与数据类型**：JavaScript支持多种数据类型，包括基本类型（如...
本教程“JavaScript基础与实例教程”由中国电力出版社出版，旨在为初学者和有经验的开发者提供一个深入理解JavaScript核心概念和实践技巧的平台。 首先，JavaScript的核心概念包括变量、数据类型和操作符。变量是...
这个“JavaScript基础教程”PDF文件是初学者掌握JavaScript语法和概念的理想资源。下面，我们将深入探讨JavaScript的核心知识，包括变量、数据类型、控制流、函数、对象、数组、DOM操作以及事件处理等。 1. **变量...