JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM
Posted LRcoding
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM相关的知识,希望对你有一定的参考价值。
1. javascript入门
静态网页技术
-
html:超文本标记语言 显示内容
-
CSS:层叠样式表 美化页面
-
JavaScript:页面动态交互和特效
DHTML = HTML + CSS + JavaScript,动态HTML,只是动态效果,不是动态数据
-
jQuery:对 JavaScript 的封装
-
EasyUI:在 jQuery 基础上对 HTML 和 CSS 的封装
对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置页面交互和特效。
1.1 JavaScript 定义和特点
JavaScript 是一种基于对象 (object-based) 和事件驱动 (Event Driven)的简单的并具有安全性能的脚本语言
- ECMAScript:JavaScript的核心
- DOM:文档对象模型,是 HTML 和 XML 的应用程序接口(API)。把整个页面规划成由节点层级构成的文档
- BOM:浏览器对象模型,对浏览器窗口进行访问和操作
JavaScript特点:
- 脚本语言:不需要事先编译,只要有一个与其相适应的解释器就可以执行
- 基于对象的语言:只是使用对象,相当于只有封装,没有继承和多态
- 事件驱动:事件(Event)发生后(按下鼠标、移动窗口等),可能会引起相应的事件响应
- 简单性:变量类型为弱类型
- 安全性:只能通过浏览器实现信息浏览或动态交互
- 跨平台性:依赖于浏览器本身,与操作平台无关
- 缺点:各种浏览器对JavaScript的支持可能不同,显示效果可能不同
1.2 JavaScript的初步使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识JavaScript</title>
<script type="text/javascript">
//在浏览器写入内容
document.write("这就是JavaScript1<br>")
document.write("这就是JavaScript2<br>")
</script>
</head>
<body>
这就是HTML;
</body>
</html>
<script>
alert("你好呀")
</script>
1.3 数据类型
常量是存在数据类型的,变量直接用 var 声明即可
- 数值型:整数(85) 和 浮点数(3.14)统称为数值
- 字符串型:用 ‘’ 或者 “” 括起来的内容
- 布尔型:true 或 false
- 空值:null,表示没有值,用于定义空的或不存在的引用
- 未定义值:
undefined
,表示变量虽然已经声明,但是还没有赋值 - 复合数据类型:对象、数组
2. 基本语法
2.1 变量
JavaScript 中的变量是没有类型(弱类型)的
var int = 3;
2.2 运算符
类型 | 运算符 |
---|---|
算术运算符 | + - * / % ++ -- |
赋值运算符 | = |
比较运算符 | > < >= <= == === != |
逻辑运算符 | && || ! |
注意: == 和 === 的区别
- == 等值判断:先判断类型,类型一致则比较内容, 如果类型不一致,则先用 Number 转换为一致的类型后再比较内容
- === 等同判断:先判断类型,类型不一致则直接 false, 类型一致则再比较内容
2.3 流程控制
-
分支语句:if、switch
-
循环语句:while循环、do-while循环、for循环、for-each循环
-
跳转语句:break、continue、return
需要注意 for-each 循环,使用 in
2.4 引入外部文件
<script type="text/javascript" src="外部文件路径"></script>
2.5 综合代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript基本语法</title>
<!-- 引入外部的JS文件 -->
<script type="text/javascript" src="js/myJs.js"></script>
<script type="text/javascript">
document.write("<h3>认识数据类型和变量</h3>")
var x;
document.write("x = " + x + " " + typeof (x) + "<br>"); // 没有赋值,就是undefined
x = null;
document.write("x = " + x + " " + typeof (x) + "<br>");
x = 123;
document.write("x = " + x + " " + typeof (x) + "<br>");
x = "lwclick"; // 单引号双引号都可以
document.write("x = " + x + " " + typeof (x) + "<br>");
x = true; // 区分大小写, TRUE 则是变量名
// x = TRUE; // 此时TRUE被理解成一个变量
document.write("x = " + x + " " + typeof (x) + "<br>");
document.write("<h3>区分==和===</h3>");
var a = '5';
var b = 5;
var c = 5;
document.write((b == c) + "<br>");
document.write((a == b) + "<br>"); // 自动类型转换
document.write((b === c) + "<br>"); //
document.write((a === b) + "<br>"); // 先判断类型,不一致则false
console.info("for-each循环");
var fruits = ["apple", 'banana', 'orange', 'pear', 'peach'];
/**
for ( var i = 0; i < fruits.length; i++ )
console.log(fruits[i]);
*/
// for-each 循环数组
for (var index in fruits) //!!!!
console.warn(index + " " + fruits[index]);
// for-each 循环对象
// for (var elem in window)
// console.info(elem);
//
</script>
</head>
<body>
</body>
</html>
3. 函数
-
类似Java中的方法,是完成特定任务的代码语句块
-
不用定义属于某个类,直接使用
-
JavaScript的函数分为系统函数和自定义函数
-
系统函数
parseInt()
:字符串值转换为数字parseFloat()
:字符串值转换成浮点数isNaN()
:判断是否是数字,不是数字返回 trueeval()
:字符串表达式转为数字(运算字符串内的表达式) -
自定义函数
// 没有参数,没有返回值 function func1() // 有参数,没有返回值 function func2(num1) alert(num1) // 有参数,有返回值 function func3(num1, num2) // 返回值也为 var,则直接不写 return num1 + num2; // 类似于 Java 的匿名函数式定义 var func4 = function() alert('world!'); ; // 调用时 func2(); // 实参个数 < 形参个数 num1 为 undefined func2(123); // 实参个数 = 形参个数 正常使用 func2(123, 'lwclick'); // 实参个数 > 形参个数 只用第一个参数 var res = func3(123, 456);
注意:如果有重名的函数,会调用
最近的那一个
-
实例:计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
</head>
<script>
function calc()
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (isNaN(num1) || isNaN(num2))
alert("请输入数字");
// innerHTML:往元素的【中间】写内容
document.getElementById("res").innerHTML = "结果:";
return;
var oper = document.getElementById("oper").value;
if (num2 == 0 && oper == '/')
document.getElementById("res").innerHTML = "<span style='color: red'>除数不能为0</span>";
return;
var result;
switch (oper)
case '+' : result = parseInt(num1) + parseInt(num2); break;
case '-' : result = num1 - num2; break;
case '*' : result = num1 * num2; break;
case '/' : result = num1 / num2; break;
document.getElementById("res").innerHTML = result;
</script>
<body>
<form action="">
第一个数:<input type="text" id="num1" name="num1" value="123"><br>
第二个数:<input type="text" id="num2" name="num2"><br>
运算符:<select id="oper" name="oper">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select><br>
<input type="button" value="计算" onclick="calc()">
</form>
<div id="res">结果:</div>
</body>
</html>
4. 对象
JavaScript 提供了很多对象,比如 String、Math、Date 等,和Java中的使用基本相同,后续还有 BOM对象和 DOM对象
<script>
document.write("------------String--------------<br>")
var str = new String("lwclick");
document.write(str.length + "<br>")
document.write(str.charAt(2) + "<br>")
document.write(str.indexOf('s') + "<br>")
document.write(str.substr(2, 3) + "<br>") // 从索引为2的开始截,截3位
document.write(str.substring(2, 3) + "<br>") // 截取2 到 3中间的
document.write("------------Date--------------<br>")
var now = new Date();
document.write(now.toLocaleString()+"<br>")
document.write(now.getFullYear()+"<br>")
document.write((now.getMonth() + 1) + "<br>") // 0 - 11!!!!!!!
document.write(now.getDate()+"<br>")
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
document.write(arr[now.getDay()] + "<br>")
document.write("------------Math--------------<br>")
document.write('' + Math.random())
</script>
5. 时钟效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟效果</title>
<script>
function showTime()
// 获取当前时间
var now = new Date();
// 写到指定位置
document.getElementById("time").innerHTML = now.toLocaleString();
// 第一种方式:放在自身函数里面,就会自己调用自己,需要结合 window.onload
// window.setTimeout(showTime, 1000) // setTimeout:多长时间后调用指定的函数【一次】
window.onload = showTime; // 不能写 ()
// 第二种方式:在自身函数外面设置 setInterval(showTime, 1000) 【每隔】多长时间调用一次函数
var myClock = setInterval(showTime, 1000);
function pauseClock()
window.clearInterval(myClock); // 清除计时
function continueClock()
myClock = setInterval(showTime, 1000);
</script>
</head>
<body>
<div id="time"></div>
<input type="button" value="暂停" onclick="pauseClock()" />
<input type="button" value="继续" onclick="continueClock()" />
</body>
</html>
6. 数组
JavaScript 中也有一维数组和二维数组的概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组 array</title>
<script>
document.write("<h3>一维数组,第一种声明方式</h3>");
var arr = ["apple", "banana", "orange", "pear", "peach"];
document.write("<h3>一维数组,第二种声明方式</h3>");
var arr = new Array("apple", "banana", "orange", "pear", "peach")
document.write("<h3>一维数组,第三种声明方式</h3>");
var arr = new Array(5);
arr[0] = "apple";
arr[1] = "banana";
arr[2] = "orange";
arr.length = 2; // 只要前两个
document.write("<h3>一维数组,第四种声明方式</h3>");
var arr = new Array(5)以上是关于JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM的主要内容,如果未能解决你的问题,请参考以下文章
JavaLearn#(22)jQuery介绍选择器事件动画DOM编程操作CSS表单验证
JavaLearn#(22)jQuery介绍选择器事件动画DOM编程操作CSS表单验证
JavaLearn#(25)Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述