JavaScript简介
什么是JavaScript(了解)
全称叫做JavaScript,简称叫做JS
由NetScape(网景)公司提供,是一门专门嵌入在浏览器中执行的脚本语言
LiveScript JavaScript
JS运行在浏览器中,负责实现网页中的动画效果
或者是实现表单校验等功能
JS特点和优势(了解)
1、特点:**
(1)JS是一门直译式的语言(边解释边执行,没有编译的过程)
java–> 编写时 xx.java —>编译成 xx.class --> 运行class文件
js —> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型的语言(Java:强类型)
//在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
//在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc"; //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型)
2、优势:
(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS 浏览器)
( JS语言是跨平台的,是因为有浏览器,但浏览器不跨平台
Java语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台 )
在HTML书写JS的方式
1、在script标签内部可以书写JS代码:
在head或者body标签内部可以添加一个script标签,在script标签内部可以直接书写JS代码!
<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
//JS的单行注释
/* JS的多行注释 */
alert( "在html中引入JS的第一种方式..." );
</script>
2、通过script标签引入外部的JS文件
在head或body标签内部,可以通过script标签引入外部的JS文件。例如:
<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>
注意:(1)在引入js文件的script标签内部不要书写JS代码,例如:
<script src="demo.js">
alert( 111 ); //这里的代码不会执行
</script>
(2)不要将引入JS文件的script标签自闭,因为可能会导致文件引入失败,如下:
<script src="demo.js" />
扩展内容:也可以直接在元素上书写JS代码
<!-- 直接在元素上书写JS代码:
onclick属性用于给当前元素绑定点击事件:点击元素就会触发事件,执行相应函数
-->
<input type="button" value="点我~" onclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我" onclick="console.log( new Date() )"/>
JavaScript语法
注释格式
JS的注释符号和Java的注释符号相同,如下:
// 单行注释内容
/* 多行注释内容 */
数据类型
1、基本数据类型
(1)数值类型(number)
在JS中,所有的数值在底层都是浮点型,但是在处理和显示的过程中会自动的和整型进行转换。
例如:2.4+3.6=6
特殊值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)
(2)字符串类型(string)
在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者使用双引号引起来。例如:
var s1 = "Hello JS";
var s2 = 'Hello JS';
另外,JS中字符串类型有对应的包装对象(String),在需要时会自动的和包装对象进行转换。
var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );
(3)布尔类型(boolean)
布尔类型的值有两个,分别为true和false。
(4)undefined类型
undefined类型的值只有一个,就是undefined,表示变量未定义(但不是指变量没有声明)。
是指声明了变量,但没有为变量赋值,该变量的值就是undefined。
/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常
(5)null类型
null类型的值也只有一个,就是null,表示空值。
可以作为函数的返回值,表示函数返回的是一个空的对象。
注意:null和undefined类型的变量是不能调用函数或属性的,会抛异常!
2、复杂数据类型
主要指对象(JS的内置对象、自定义的对象、函数、数组)
变量声明
JS中是通过
var
关键字声明变量,声明的变量是不区分类型,可以指向任意的数据。例如:
var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};
另外,JS中多次声明同名的变量不会出现语法错误,JS是严格区分大小写的!例如:
/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123
JS运算符
JS和Java中的运算符大致相同,例如:
算术运算符: +,-,*,/,%,++,--
赋值运算符: =,+=,-=,*=,/=,%=
比较运算符: ==,!=,>,>=,<,<=
位运算符: & , |
逻辑运算符: && ,|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。
JS语句
JS中的语句和Java中的语句也大致相同
1、if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下:
if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
2、switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下:
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}
执行原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。
3、for循环语句 – 循环代码块一定的次数
for 循环的语法结构如下:
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
4、while循环 – 在指定条件为真时循环执行代码块
JS中while循环也分为while和do/while循环,下面为while循环语法结构:
while (条件){
需要执行的代码
}
while 循环会在指定条件为真时循环执行代码块。
案例1:if分支案例: 接收用户输入的成绩,判断成绩所属的等级
80~100(包括80,也包括100) 优秀
60~80(包括60,但不包括80) 中等
0~60(包括0,但不包括60) 不及格
其他值 输入有误
代码实现如下:
propmt( 参数1, 参数2 )函数:在页面上弹出一个消息输入框,接收的参数1是在弹框中显示的提示内容,用户输入的内容,会作为函数的返回值直接返回。
参数2, 是输入框中的默认值, 可以修改
var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
alert("您的成绩属于: 不及格!");
}else{
alert("您的输入有误, 请重新输入!");
}
案例2:switch语句案例—实现一个简易的计算器:
可以接收用户输入的两个数值和一个运算符(+、-、*、/),根据运算符号的不同,对两个数值执行不同的运算。
代码实现如下:
//1.接收用户输入的数值和运算符, 中间用空格分隔
var str = prompt("请输入数值1、运算符、数值2,中间用空格分隔:"); //"10 + 5"
//2.对用户输入的内容进行切割(以空格作为分隔符切割)
var arr = str.split(" "); // ["10", "+", "5"]
var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
case "+":
alert( "两个数的和为: "+( num1+num2 ) );
break;
case "-":
alert( "两个数的差为: "+( num1-num2 ) );
break;
case "*":
alert( "两个数的乘积为: "+( num1*num2 ) );
break;
case "/":
alert( "两个数的商为: "+( num1/num2 ) );
break;
default:
alert( "您输入的运算符有误, 请重新输入!" );
}
案例3:for循环语句案例
遍历1~100之间的所有整数,求1~100之间所有整数的和,并输出到控制台;
代码实现如下:
//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
sum += i;
i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
案例4:while循环语句案例
遍历下面数组中的元素,将元素输出到控制台。
var arr = [123, "abc", false, new Object() ];
代码实现如下:
var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
console.log( arr[index] );
index++;
}
for( var i=0; i<arr.length; i++ ){
console.log( arr[i] );
}
JS数组
Array 对象用于在单个的变量中存储多个值。
JS数组的声明方式一:
//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组,并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];
JS数组的声明方式二:
//声明一个空数组,长度为零
var arr3 = new Array();
//声明一个数组,并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());
数组中的细节问题:
(1)JS中的数组可以存储任意类型的数据
(2)JS中的数组长度是可以被任意改变的
var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100
JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块,前面使用了关键词 function。
JS中声明函数的方式为:
function 函数名称([参数列表]){
函数体
}
或者:
var 变量名/函数名 = function([参数列表]){
函数体
}
综合练习
(自己完成)声明一个函数fn,在函数中实现:遍历指定的两个数值(例如1和100)之间的整数,将是3的倍数的数值存入到一个数组中,并将数组返回。
1、声明fn函数
//声明一个fn函数,接收两个参数
function fn(x,y){
//声明一个数组,用于存储是3的倍数的数值
var arr = [];
//循环x到y之间的所有整数
for(var i=x,j=0;i<y;i++){
//判断i(当前正在遍历的整数)是否为3的倍数
if(i%3==0){
arr[j] = i; //如果是,则将i存入arr数组中
j++; //j自增
}
}
return arr; //返回arr数组
}
2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组
var arr = fn(1,100);
3、遍历数组中的元素, 输出在网页上(提示: document.write(“输出的内容”) )
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}
DOM操作
DOM: Document Object Model,文档对象模型,其实就是JS专门为访问html元素提供的一套API。
案例:电灯开关
点击电灯可以实现开/关灯,代码实现如下:
var flag = "off"; //标记灯的状态, off表示灯是关闭的!
function changeImg(){
//获取img元素,返回的是一个JS对象
var oImg = document.getElementById("img1");
if( flag == "off" ){ //表示灯之前是关闭状态,点击之后则需要打开
oImg.src = "imgs/on.gif"; //灯打开了
flag = "on"; //更新灯的状态为on,表示灯打开了
}else{ //on,表示灯之前是打开状态,点击之后则需要关闭
oImg.src = "imgs/off.gif"; //灯关闭了
flag = "off"; //更新灯的状态为off,表示灯关闭了
}
}
案例:二级联动下拉框
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* 练习2: 实现二级联动下拉框 */
function selectCity(thisobj){
//1.获取用户选中的省份
var prov = thisobj.value;
//2.根据省份获取该省份下所有的城市列表 北京市
var arrCity = data[prov];
//console.log(arrCity);
//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
//>>获取第二个select
var oCity = document.getElementById("city");
//>>先清空上个省份对应的城市列表
//方式一
//oCity.innerHTML = "<option>--选择城市--</option>";
//方式二 JS中的数组的特点
var opts = oCity.getElementsByTagName("option");
//循环遍历, 挨个删除每一个option
var len = opts.length;
for(var i=0; i<len-1; i++){
oCity.removeChild(opts[1]);
}
//海淀区 --> <option>海淀区</option>
for(var i = 0; i<arrCity.length; i++){
var oOpt = document.createElement("option");
oOpt.innerHTML = arrCity[i];
oCity.appendChild(oOpt);
}
}
案例:网页换皮肤
/** 练习1:执行下面的函数,切换字体大小 */
function resize( selector ){
//获取id为newstext元素
var div = document.getElementById("newstext");
//将id为newstext元素的class属性值设置为 selector
div.className = selector;
}
/** 练习2:执行下面的函数,为页面切换不同的皮肤
点击换肤链接时,执行changeStyle函数,将link标签的href属性值指向
不同的css文件的路径,就会使用不同的css文件中的样式 */
//定义数组,存放不同的皮肤(css文件的路径)
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){
//获取head中的link标签(id=link)
var link = document.getElementById("link");
// 将link标签的href属性值指向css文件的路径
link.href = styleArr[index];
index++;
if( index == styleArr.length ){ //如果下标等于数组长度
index = 0; //则将下标重置为0
}
}
总结:JS获取元素
document
是一个js对象,用于表示当前html网页。当浏览器加载完整个html网页后,会用document对象表示整个html网页!
document.getElementById( id值 )
– 通过元素的id值,获取一个元素。返回的是表示该元素的js对象。
<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素
document.getElementsByTagName( 元素名 )
– 通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。
document.body
– 获取当前文档中的body元素
element.parentNode
– 获取当前元素的父元素。element表示当前元素
总结:JS增删改元素
document.createElement( 元素名称 )
– 根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象
parent.appendChild( child )
– 通过父元素添加子元素,其中parent表示父元素,child表示子元素
parent.removeChild( child )
– 通过父元素删除子元素,其中parent表示父元素,child表示子元素
element.innerHTML
– 获取当前元素的html内容(从开始标签到结束标签之间的所有内容),还可以设置当前元素的html内容(如果元素内部有内容,将会覆盖原有内容)
<div id="div1">
这是一个div元素...
<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容