目录
JavaScript
JavaScript简介
1、什么是JavaScript
- JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript
引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML (标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。 - JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
- JavaScript和Java没有任何关系！！！
- JavaScript和Java没有任何关系！！！
- JavaScript和Java没有任何关系！！！
2、主要功能
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。 控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
JavaScript基本语法
- JavaScript文件引入html中加入：
<script type="text/javascript" src="xxx/xxx.js"></script>
然后在xxx/xxx.js里面写JavaScript的代码即可
- JavaScript注释
单行注释：//
多行注释：/。。。。。/
- JavaScript变量
JavaScript是弱类型语言，即没有严格意思上的类型。定义变量用var关键字。
*** JavaScript基本数据类型**
数值类型、字符串类型、布尔类型、undefined（变量不含有值），null（变量值为空）
- JavaScript运算符
算数运算符：+、-、*、/、%、++、--
比较运算符：==，===，!=,!==、>、<、>=、<=
逻辑运算符：&&、||、！
三元表达式：表达式？True值：false值
赋值运算符：=,+=,-=,*=,/=,%=
- JavaScript选择语句
If..else ,switch...case
- JavaScript循环语句
利用for,foreach
for (var i=0;i<=10;i++)
{
document.write("i="+a+"<br>");
}
JavaScript中的break和continue
- JavaScript函数
function hanshu(canshu)
{
document.write(canshu+"<br>");
}
hanshu("我是函数");
注意：JavaScript里面的函数不支持多态
JavaScript操作DOM节点
首先，在head标签里面引入JavaScript
<script type="text/javascript" src="js/demo.js"></script>
- JavaScript处理事件
在标签中，添加“onclick”任务，对应到js的函数， - JavaScript操作节点
- JavaScript操作节点样式
<!DOCTYPE html>
<html>
<head>
<title>JavaScript操作DOM节点</title>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<button onclick="func()">点我</button>
<button onclick="a()">点我2</button>
<button onclick="b()">在parent尾部添加dom节点</button>
<button onclick="c()">在node节点前添加dom节点</button>
<button onclick="d()">删除node节点</button>
<button onclick="e()">改变node节点样式</button>
<div id="parent">
<div id="node">
<p>Java1010</p>
</div>
</div>
</body>
</html>
function func(){
alert("点击了一下");
}
function a(){
var node=document.getElementById("node");
var htm=node.innerHTML;
alert(htm);
node.innerHTML="<p>修改后的内容</p>";
}
//在parent节点尾部添加节点
function b(){
var parent=document.getElementById("parent");//获取当前文档中指定id的元素
var p=document.createElement("p");//创建一个元素结点
var content=document.createTextNode("添加的内容");//添加一个带有文本节点的元素节点
p.appendChild(content);//向节点的子节点列表的末尾添加新的子节点
parent.appendChild(p);//向节点的子节点列表的末尾添加新的子节点
}
//在node节点前添加节点
function c(){
var parent=document.getElementById("parent");
var node=document.getElementById("node");
var p=document.createElement("p");
var content=document.createTextNode("在node前添加的内容");
p.appendChild(content);
parent.insertBefore(p,node);
}
//删除node结点
function d(){
var parent=document.getElementById("parent");
var node=document.getElementById("node");
parent.removeChild(node);
}
//改变node的字体样式
function e(){
var node=document.getElementById("node");
node.style.color="red";
}
JavaScript的类
- 这里摘自： https://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
- Javascript语言不支持"类"，但是可以用一些变通的方法，模拟出"类"。
1、构造函数法
构造函数法这是经典方法，也是教科书必教的方法。**它用构造函数模拟"类"，**在其内部用this关键字指代实例对象。
function Cat() {
this.name = "大毛";
}
生成实例的时候，使用new关键字。
var cat1 = new Cat();
alert(cat1.name); // 大毛
类的属性和方法，还可以定义在构造函数的prototype对象之上。
Cat.prototype.makeSound = function(){
alert("喵喵喵");
}
关于这种方法的详细介绍，请看我写的系列文章《Javascript 面向对象编程》，这里就不多说了。它的主要缺点是，比较复杂，用到了this和prototype，编写和阅读都很费力。
2、Object.create()法
为了解决"构造函数法"的缺点，更方便地生成对象，Javascript的国际标准ECMAScript第五版（目前通行的是第三版），提出了一个新的方法Object.create()。
用这个方法，"类"就是一个对象，不是函数。
var Cat = {
name: "大毛",
makeSound: function(){
alert("喵喵喵");
}
};
然后，直接用Object.create()生成实例，不需要用到new。
var cat1 = Object.create(Cat);
alert(cat1.name); // 大毛
cat1.makeSound(); // 喵喵喵
目前，各大浏览器的最新版本（包括IE9）都部署了这个方法。如果遇到老式浏览器，可以用下面的代码自行部署。
if (!Object.create)
{
Object.create = function (o)
{
function F() {}
F.prototype = o;
return new F();
};
}
这种方法比"构造函数法"简单，但是不能实现私有属性和私有方法，实例对象之间也不能共享数据，对"类"的模拟不够全面。
3、”极简主义法”（minimalist approach）
这也是我推荐的方法。
- 封装这种方法不使用this和prototype，代码部署起来非常简单，这大概也是它被叫做"极简主义法"的原因。首先，它也是用一个对象模拟"类"。在这个类里面，定义一个构造函数createNew()，用来生成实例。
var Cat = {
createNew: function(){
// some code here
}
};
然后，在createNew()里面，定义一个实例对象，把这个实例对象作为返回值。
var Cat = {
createNew: function(){
var cat = {};
cat.name = "大毛";
cat.makeSound = function(){
alert("喵喵喵");
};
return cat;
}
};
使用的时候，调用createNew()方法，就可以得到实例对象。
var cat1 = Cat.createNew();
cat1.makeSound(); // 喵喵喵
这种方法的好处是，容易理解，结构清晰优雅，符合传统的"面向对象编程"的构造，因此可以方便地部署下面的特性。
- 继承让一个类继承另一个类，实现起来很方便。只要在前者的createNew()方法中，调用后者的createNew()方法即可。先定义一个Animal类。
var Animal = {
createNew: function(){
var animal = {};
animal.sleep = function()
{
alert("睡懒觉");
};
return animal;
}
};
然后，在Cat的createNew()方法中，调用Animal的createNew()方法。
var Cat = {
createNew: function(){
var cat = Animal.createNew();
cat.name = "大毛";
cat.makeSound = function(){ alert("喵喵喵"); };
return cat;
}
};
这样得到的Cat实例，就会同时继承Cat类和Animal类。
var cat1 = Cat.createNew();
cat1.sleep(); // 睡懒觉
- 私有属性和私有方法在createNew()方法中，只要不是定义在cat对象上的方法和属性，都是私有的。
var Cat = {
createNew: function(){
var cat = {};
var sound = "喵喵喵";
cat.makeSound = function(){ alert(sound);
};
return cat;
}
};
上例的内部变量sound，外部无法读取，只有通过cat的公有方法makeSound()来读取。
var cat1 = Cat.createNew();
alert(cat1.sound); // undefined
- 数据共享有时候，我们需要所有实例对象，能够读写同一项内部数据。这个时候，只要把这个内部数据，封装在类对象的里面、
createNew()方法的外面即可。
var Cat = {
sound : "喵喵喵",
createNew: function(){
var cat = {};
cat.makeSound = function(){ alert(Cat.sound); };
cat.changeSound = function(x){ Cat.sound = x; };
return cat;
}
};
然后，生成两个实例对象：
var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // 喵喵喵
这时，如果有一个实例对象，修改了共享的数据，另一个实例对象也会受到影响。
cat2.changeSound("啦啦啦");
cat1.makeSound(); // 啦啦啦
JavaScript常用函数
1、JavaScript全局函数
不属于任何一个内置对象的函数
decodeURI() 解码某个编码的URI
decodeURIComponent() 解码一个编码的URI组件
encodeURI() 把字符串编码为URI
encodeURIComponent() 把字符串编码为URI组件
escape() 对字符串进行编码
eval() 计算js字符串，并把它作为脚本代码来执行
isFinite() 检查某个值是否为有穷大的数
isNaN() 检查某个值是否为非数字
Number() 把对象值转换为数字
parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
String() 把对象的值转换为字符串
unescape() 对由escapse()编码的字符串进行解码
2、JavaScript中Window对象常用方法
弹框：alert()、confirm()、prompt()
定时函数：setTimeout() 执行一次；setInterval() 执行多次
打开页面函数：open()
JavaScript中Window对象常用事件
Window.onload();文档加载完毕时
Window.onresize();窗口大小变化时
Comments | NOTHING