javaScript 基础知识
2019-02-21 本文已影响0人
紫陌红尘Oo
javaScript 基础知识
一 JavaScript概述
JavaScript概述
- JavaScript是客户端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。
- JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算
JavaScript的基本特点：
- 脚本语言
- 基于对象
- 简单性
- 动态性
- 跨平台性
JavaScript与Java的区别
-
JavaScript和Java是两个公司开发的不同产品
-
Java是SUN公司推出的新一代面向对象的程序设计语言
-
而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能
-
现在JavaScript已被标准化为ECMAScript，主流的浏览器都支持
认识javascript
<html>
<head>
<script language="JavaScript">
function sum(){
var s1 = document.f1.s1.value;
var s2 = document.f1.s2.value;
var s3 = Number(s1)+Number(s2);
document.f1.s3.value=s3;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="s1">+
<input type="text" name="s2">=
<input type="text" name="s3">
<input type="button" value="计算结果" onclick="sum()">
</form>
</body>
</html>
示例说明
-
在标识<script>标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。
-
JavaScript可以直接嵌入到html中通过浏览器直接运行的。
Html中嵌入JavaScript代码的方式：
- 放在<head>标签中（推荐使用）
- 放在<body>标签中
JavaScript中的注释
- JavaScript中的注释和Java基本一致，也分为单行和多行注释。
- 注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。
- 单行注释：使用//符号对单行信息进行注释
- 多行注释：使用/…../对多行信息进行注释
例子
<html>
<head>
<script Language ="JavaScript">
//下面的alert()是弹出一个对话框
/*
下面的alert()是弹出一个对话框
*/
alert("这是第一个JavaScript例子!");
</script>
</Head>
</Html>
二 基本语法
数据类型
- 字符串："abc" 'hello' "你好"
- 数字：包括整数数字和浮点型数字
- 布尔值：true 和 false
- 空值：null
- 未定义值：undefined
- 特殊字符：又叫转义字符
- \b 表示退格
- \n 表示换页
- \t 表示Tab符号
- \r 表示回车符
- " 表示双引号本身
- ' 表示单引号本身
- \ 表示反斜线
变量及类型转换
- 变量的声明：使用 var来声明变量
var str = "你好";
- 类型转换：
//字符--〉数字 Number()
var x=Number("1");
//数字--〉字符 String()
var y=String(1);
表达式和运算符
- 算术运算符：+ - * / % ++ --
var x=10;
var y=20;
var z= x+y;
console.log(z);
- 比较运算符：< > <= >= == !=
var x=10;
var y=20;
var z= x>y;
console.log(z);
- 逻辑运算符 && || !
var x=10;
var y=20;
var z= (x>y && x<y);
console.log(z);
- 赋值运算符 = += -= *= /= %=
var x=10;
var y=20;
x+=y;
console.log(x);
- 条件选择符 条件表达式？A：B
var co=(age>=18)?”成人”:”孩子”;
console.log(co);
数组
数组声明：
- var 数组变量名 = new Array()
var week = new Arrary();
- 数组的长度：使用数组的length属性来获得数组的长度
var week = new Arrary();
var len=week.length;
- 页面完成示例
<html>
<head>
<script language="JavaScript">
var week = new Array();//创建数组
week[4] = “Thursday”;//给数组赋值
week[6] = "Saturday"; //给数组赋值
document.write("today is "+ week[4]+"<br>");
document.write("the day after tomorrow is "+week[6]+"<br>");
document.write("一个星期有"+week.length+"天");
</script>
</head>
</html>
//声明和定义一个 数组
var array =new Array();
//console.log(array.length);
// 给数组添加内容
array[0]="礼拜日";
array[1]="星期一";
array[2]="星期二";
array[3]="星期三";
array[4]="星期四";
array[5]="星期五";
array[6]="星期六";
// 修改数组的内容
array[0]="星期日";
//获取数组中的内容
alert(array[6]);
//显示数组的长度
alert(array.length);
//遍历 数组中的内容
for(var i=0;i<array.length;i++){
alert(array[i]);
}
三 流程控制
顺序执行
- 按照程序编写的顺序来执行
console.log("星期一");
console.log("星期二");
console.log("星期三");
console.log("星期四");
console.log("星期五");
console.log("星期六");
条件执行
- if if else switch 条件语句
//例子 数字
var x=100;
if(x>10){
console.log("x的值是大于10的");
}else{
console.log("x的值是不大于10的");
}
//例子 成绩
var score=85;
if(score>90){
console.log("该学生的成绩优秀");
}else if(score>80){
console.log("该学生的成绩良好");
}else if(score>70){
console.log("该学生的成绩中等");
}else if(score>60){
console.log("该学生的成绩中等");
}else{
console.log("该学生的成绩不及格");
}
//switch
var y=7;
switch(y-6){
case 1:
console.log("今天星期一");
break;
case 2:
console.log("今天星期二");
break;
default:
console.log("不知道星期了");
}
循环语句
- for while do while
// for 循环语句
for(var i=0;i<10;i++){
console.log(i);
}
// while 循环语句
var flag=true;
while(true){
console.log(1);
}
// do while
//条件一样的情况下 do while 比 wihle循环 要多执行一次 ✖
var d=10;
while(d>1){
console.log(d);
d--;
}
console.log("================================================");
var dd=10;
do{
console.log(dd);
dd--;
}while(dd>1);
//证明：do while 并不必while循环多执行一次 而是 dowhile循环必定执行一次
四 函数和事件
函数：
- 在JavaScript中的函数可以简单理解为一组语句，用来完成一系列工作
创建函数：
- 创建函数的三种方式
- 第一张方式
var aaa=new Function("alert(2);"); //不推荐
- 第二种方式
var abb=function(){
console.log("你好");
}
- 第三种方式
function abc(a){ //推荐写法
console.log("你好"+a);
}
函数调用
aaa();
abb();
abc(110); //如果函数中有参数 ，在调用的时候 必须要传递参数，否则就会出现undefined
函数的返回值
- 使用return 来终止函数 并返回需要的值
function max(x,y){
var z=x+y;
// 如果需要一个方法有返回值 ， 那么直接返回即可
return z;
}
匿名函数
- 没有名字的函数 只能调用一次
(function(a){
console.log(a);
})("你好");
回调函数
- 一个方法的参数是一个方法
function abc (){
console.log("你好");
}
function aaa(x){
x();
}
aaa(abc); //调用aaa方法的时候 传入参数为 abc的方法
五 内置对象
Math 数学对象
- Math对象常用方法和属性
var e=Math.E; //常数
var pi=Math.PI; //圆周率
var r=Math.round(3.3); //四舍五入
var s=Math.random(); // 随机数 0-1
//要求大家随机 1-100 之间的 随机整数 包含 1 和包含100
var sum=Math.floor((Math.random()*6))+1;
// 获取 大于参数的 最小整数
var mx=Math.ceil(5.1);
//获取 小于参数的 最大整数
var mi=Math.floor(5.9);
// 指定 次幂
var mp=Math.pow(5,3);
Date日期对象
- 日期对象常用方法
<html>
<head>
<meta charset="UTF-8">
<title>时间对象例子</title>
<script language="JavaScript">
function time(){
var day=new Date(); //获取日期对象
var y=day.getFullYear(); //获取年 //getYear(); 过时的方法
var m=day.getMonth()+1; //获取月份 从0 开始 到 11结束
var r=day.getDate(); //获取日 月中第几天
var h=day.getHours(); //获取小时
var f=day.getMinutes(); //获取分钟
var s=day.getSeconds(); //获取秒
//获取毫秒数
var ss=day.getMilliseconds(); //毫秒和秒的转换单位 1000
var da="北京时间"+y+"年"+m+"月"+r+"日"+" "+h+":"+f+":"+s;
//将时间显示到 h1标签中
document.getElementById("time").innerHTML=da;
}
</script>
</head>
<body>
<input type="button" value="显示时间" onclick="time()" />
<h1 id="time"></h1>
</body>
</html>
String对象
var str="美丽的风景.jpg";
//获取 字符串中指定位置的 字符
var t=str.charAt(1);
//大小写的转换
var a="abcd";
var b=a.toUpperCase();
//获取指定字符在字符串的 位置
var n=str.indexOf("郑");
// 按照参数 将字符串分割
var sz=str.split(".");
//截取字符串
var s1=str.substr(1,4); // 开始位置 ，截取长度
var s2=str.substring(1,4); // 开始位置 ，结果位置
Array对象
var a=new Array();
//给数组添加值
a.push("北京");
a.push("上海");
a.push("郑州");
var b=new Array();
b.push("张学友");
b.push("刘德华");
//删除数组的值 ---删除最后一个
a.pop();
// 反转
a.reverse();
//合并数组 将一个或者多个数组合并成一个，参数也可以为字符串
a.concat(b);
六 文档对象模型
Window 窗口对象
window.open("http://www.baidu.comt");//打开一个新的窗口
window.open("url","windowName","windowFeatrue",); //三个参数的方法
/*
功能：打开一个新的窗口
参数说明：
url:要打开窗口的url地址
Window name是新打开窗口的名称
Window features 是新窗口的实际特性（窗口的外观）可选项
Window features的可能参数：
height 窗口的高度
width 窗口的宽度
menubar是否有菜单
scrollbars 是否有滚动条
resizable 窗口大小是否可以改变
*/
//示例
window.open("1.html","mywindow","menubar=no,height=200,width=300");
window.close(); //关闭浏览器的方法
Location 位置对象
//Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象
location.href="http://www.baidu.ctom";
History 历史对象
//History对象提供了与历史清单有关的信息
history.back(); //后退的方法
Document 文档对象
- 获取页面元素的方式
document.getElementById(“idName”); //通过id获取到唯一的一个元素
document.getElementsByName(“Name”); //通过名字属性获取到一组元素
document.getElementsByClassName(“className”); //通过class属性获取到一组元素
document.getElementsByTagName(“tagName”); //通过标签名字获取到一组元素
- 通过节点来寻找元素
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<div id="d2">我是div</div>
<h1 id="d3">标题</h1>
<p id="d4">这是一个p标签</p>
<input type="text" id="d5" value="你好" />
</div>
<script language="JavaScript">
// 节点的访问关系 建议使用元素节点
var n1=document.getElementById("d3");
//父节点
console.log(n1.parentElement);
//兄弟节点
console.log(n1.previousElementSibling);
//儿子节点
var nod=document.getElementById("d1");
console.log(nod.child);
//创建一个节点
var h=document.createElement("h1");
//h.innerHTML="今天天气不错";
//h.innerText="今天阳光";
var s=document.createTextNode("光明万丈");
h.appendChild(s);
//把h1 添加到 一个 节点中
document.getElementById("d2").appendChild(h);
// 删除节点
document.getElementById("d2").removeChild(h);
</script>
</body>
</html>
