1 JavaScript简介
1.1 什么是JavaScript(了解)
全称: JavaScript, 简称JS
JavaScript是由NetScape(网景公司)提供的一门嵌入在网页中执行的脚本语言。
JS常被用于嵌入在网页中实现一些动画效果
或者实现一些表单校验(比如检查用户名和密码输入是否规范, 两次密码是否一致, 邮箱格式是否正确等)
现在JS已经被广泛的应用在web开发中,主要应用在浏览器客户端。
1.2 JS特点和优势(了解)
1.2.1 特点
直译式(没有编译的过程, 是边解释边执行)
基于对象(js内部提供了一些对象, 可以通过函数创建对象)
弱类型
Java声明变量
String str = "hello";
int num = 100;
JS声明变量
var x = 100;
x = true;
x = [];
var y = "abc";
1.2.2 优势
良好的交互性
一定的安全性(只能访问浏览器内部的东西)
跨平台性(基于浏览器实现跨平台)
1.3 在HTML引入JS的方式
1.3.1 第一种方式
可以在head或body或其他位置添加一个script标签, 在script标签内部可以直接书写JS代码, 例如:
<script type="text/javascript">
/* 书写JS代码和JS注释 */
alert("引入JS的第一种方式...");
</script>
1.3.2 第二种方式
当JS代码特别多时,或者当JS代码需要在多个网页中使用时, 可以将JS代码单独的抽取到一个JS文件中。
demo.js文件内容:
html文件的内容:
<!-- 引入外部的JS文件 -->
<script src="demo.js"></script>
需要注意的是:
(1)通过script引入JS文件时,标签中即使没有内容,也不要将script标签写成自闭标签, 因为会导致引入失败!
(2)在引入JS文件的script标签内部, 不要书写JS代码, 即使写了也不会执行!
<!-- 引入外部的JS文件 -->
<script src="demo.js">
alert(333); //这里面的代码不会执行
</script>
2 JavaScript语法
2.1 数据类型
2.1.1 基本数据类型
1、数值类型(number)
在JS中,所有的数值在底层都是浮点型
只是在处理或显示的过程中, 会和整型进行自动的转换
2.4+3.6=6; //不是6.0
Infinity
-Infinity
NaN
2、字符串类型（string）
在JS中, 字符串属于基本数据类型
字符串常量/值可以使用双引号或单引号引起来.
var str1 = "Hello JS";
var str2 = 'Hello JS';
JS中为字符串提供了对应的包装对象
var str3 = new String("Hello JS");//object
3、布尔类型（boolean）
布尔类型的值只有两个, true和false
4、undefined
undefined类型的值只有一个, 就是undefined
表示声明了变量但没有为变量赋值,此时变量的值就是undefined。例如:
var x;
alert(x); //undefined
提示: 如果直接使用一个没有声明的变量, 会抛出异常!
5、null
null类型的值也只有一个, 就是null, 表示空值
常被用于函数的返回值, 表示函数返回的是一个空的对象.
2.1.2 复杂数据类型
js中的复杂数据类型主要是对象
数组、函数也是对象的一种
var arr = []; //数组, object
function fn(){} //函数, object
var obj = {}; //对象, object
2.2 变量和运算符
2.2.1 变量的定义
(1)在JS中是通过var关键字声明一个变量, 例如:
var n = 100;
var s = "abc";
var b = true;
var arr = [88,"hello",false];
var fn2 = function(){}
var p = {}
(2)JS中的变量不区分类型, 可以指向任意的数据。
var x = 100; //数值类型
x = "aaaa"; //字符串类型
x = true; //布尔类型
...
(3)JS重复声明同一个变量也不会报错. 值会产生覆盖.
var x = 123;
var x = 999;
//上面的过程可以解析为:
var x; x = 123;
var x; x = 999;
2.2.2 运算符
JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。
2.3 JS语句
2.3.1 if分支
练习: 接收用户输入的成绩, 对成绩进行评级.
/* 1、if分支练习：接收用户输入的成绩, 对成绩进行评级 */
var score = prompt("请输入您的成绩：");
score = parseFloat( score ); //转成浮点型
//score = score - 0; //转成数值
if( score <=100 && score > 90 ){
console.log("您的成绩属于: 优秀!");
}else if( score <=90 && score > 80 ){
console.log("您的成绩属于: 良好!");
}else if( score <=80 && score > 70 ){
console.log("您的成绩属于: 中等!");
}else if( score <=70 && score >= 60 ){
console.log("您的成绩属于: 及格!");
}else if( score < 60 && score >= 0 ){
console.log("您的成绩属于: 不及格!");
}else{
console.log("您的输入不合法!");
}
var age = 45;
if(age > 20){
console.log("青年人");
}else if(age > 40 && age < 60){
console.log("中年人");
}else if(age >= 60){
console.log("老年人");
}//输出结果是 "青年人"
2.3.2 switch分支
练习: 接收用户输入的两个数值 和 一个运算符(+、-、*、/)，根据用户输入的运算符, 对两个数值进行运算。
var num1 = prompt("请输入数值1：") - 0;
var opt = prompt("请输入运算符：") ;
var num2 = prompt("请输入数值2：") - 0;
switch( opt ){
case "+":
console.log("两个数的和为: "+ ( num1+num2 ) );
break;
case "-":
console.log("两个数的差为: "+ ( num1-num2 ) );
break;
case "*":
console.log("两个数的积为: "+ ( num1*num2 ) );
break;
case "/":
console.log("两个数的商为: "+ ( num1/num2 ) );
break;
default:
console.log("您的输入有误!");
}
2.3.3 循环结构
while循环: 根据布尔值决定是否执行其中的循环体
do while循环: 先执行一次循环体, 再根据判断条件决定是否执行循环体
for循环: 在大多数情况下可以替代while循环和do while循环
练习: 求1~50之间所有整数的和
var sum = 0;
for( var i=1; i<=50;i++){
sum += i; //sum = sum+i;
}
alert( "1~50之间所有整数的和为: "+sum );
练习: 遍历数组中的所有元素.
var arr = [100, "hello", true, new Object()];
for( var i=0; i<arr.length; i++ ){
alert( "第"+(i+1)+"个元素为: "+arr[i] );
}
2.4 JS数组
数组的声明方式:
方式一:
var arr1 = [];//声明一个空数组, 长度为零
var arr2 = [123,"abc",false];//声明一个具有初始值的数组
方式二:
var arr3 = new Array();//声明一个空数组, 长度为零
var arr4 = new Array(123,"abc",false); //声明一个具有初始值的数组
关于JS中的数组:
(1)Js中的数组可以存放任意类型的数据
(2)JS中的数组的长度可以通过length属性获取, 并且可以通过length属性改变数组的长度.
arr1.length = 100;
(3)JS中数组的长度可以随时被改变
var arr1 = [];//长度为0
arr1[9] = "abc";//长度为10
arr1[99] = "aaa";//长度为100
2.5 JS函数
JS中的函数是一个具有功能的代码块, 可以反复调用
JS中的函数类似于Java的方法
声明方式一:
function 函数名(参数...){
函数体...
}
调用函数: 函数名(参数...);
声明方式二:
var 变量/函数名 = function (参数...){
函数体...
}
调用函数: 函数名(参数...);
2.6 综合案例
练习: 声明一个函数, 在函数执行时接收两个数值在函数中遍历两个数值之间所有的整数, 将是3的倍数数值存入到一个数值中, 并返回这个数组
function fn(n1, n2){
var arr = [];
j = 0;
for(var i=n1; i<n2; i++){
if( i % 3 == 0 ){ // i是3的倍数
arr[j] = i;
j++;
}
}
return arr;
}
var arr = fn(1, 100);
alert( arr );
2.7 DOM操作
DOM: Document Object Model 文档对象模型，用于操作页面元素所提供的一套API。
2.7.1 电灯开关
<script>
/** 练习：点击按钮，开灯或关灯 */
var flag = "off"; //off表示灯是关闭状态
function changeImg(){
//通过id获取一个表示img元素的JS对象
var img = document.getElementById("img1");
if( flag == "off" ){ //灯是关闭状态
img.src = "imgs/on.gif";
flag = "on";
}else{ //灯是打开状态
img.src = "imgs/off.gif";
flag = "off";
}
}
</script>
<body>
<input type="button" value="开/关灯"
onclick="changeImg()" /> <br/><br/>
<img id="img1" src="imgs/off.gif" />
</body>
2.7.2 元素的dom操作
练习1、添加元素:添加一个div元素到body中
function addNode(){
//创建一个新的div元素(子元素)
var div = document.createElement("div");
div.innerHTML = "我是新来的...";
//获取body元素(父元素)
var body = document.body;
//将div元素添加到body内部
body.appendChild( div );
}
练习2、删除元素: 删除id为div_2的元素
//parentNode
function deleteNode(){
//获取将要被删除的元素(div_2)
var div2 = document.getElementById("div_2");
//获取id为div_2元素的父元素
var parent = div2.parentNode;
//通过父元素删除子元素(div_2)
parent.removeChild( div2 );
}
练习3、更新元素内容：将div_3的内容更新为当前时间
function updateNode(){
//获取id为div_3的元素
var div3 = document.getElementById("div_3");
//获取表示当前时间的字符串
var dateStr = new Date().toLocaleString();
//将字符串设置给div_3的内容
div3.innerHTML = dateStr;
}
2.7.3 网页换肤
1、切换字号
/** 练习1：执行下面的函数，切换字体大小 */
function resize( size ){
//size是选择器的名字,直接赋值给div的class属性
//获取id为 newstext 的div元素
var div = document.getElementById("newstext");
//将 size 选择器的名字设置给div的class属性
div.className = size;
}
2、网页换肤
//定义数组，存放不同的皮肤（css文件的路径）
var styleArr = ["css/red.css", "css/green.css", "css/blue.css" ];
var i = 0;
/** 练习2：执行下面的函数，为页面切换不同的皮肤 */
function changeStyle(){
//获取id为link的元素
var link = document.getElementById("link");
//修改link标签的href属性值
link.href = styleArr[i];
i++;
if( i >= styleArr.length ){
i = 0;
}
}
2.7.4 总结：获取元素
document.getElementById( 元素的id值 )
-- 通过元素的id值获取指定id的元素，返回的是一个js对象，表示当前这个元素
document.body
-- 获取当前网页中的body元素，返回的是一个js对象，表示body元素
element.parentNode
-- 获取当前元素的父元素，返回的是一个js对象
document.getElementsByTagName( 元素名称 )
-- 根据元素名称获取指定名称的所有元素，返回是一个该名称的所有元素组成的数组，可以通过下标获取指定下标的元素。
2.7.5 总结：增删改元素
document.createElement( 元素名称 )
-- 创建指定名称的元素，返回是一个表示新创建元素的js对象
parent.appendChild( child )
-- 父元素调用appendChild方法添加子元素
parent.removeChild( child )
-- 父元素调用removeChild方法删除指定子元素
innerHTML属性
-- 可以获取当前元素的所有内容
element.innerHTML
-- 可以设置当前元素的内容，如果元素内部有内容，将会产生覆盖
element.innerHTML = "xxx";