在线视频课程地址:http://edu.51cto.com/course/15019.html
1、Javascript简介
1.1、为什么要学习Javascript
1、可以实现网页的动态效果
2、js可以做验证操作,是为了减轻服务器端的压力
3、js可以提升用户的体验
4、百度地图
5、现在js可以充当服务器,比如现在node.js技术,还可以通过js来写游戏
1.2、javascript的历史介绍
布兰登•艾奇(Brendan Eich),1995年在网景公司,发明的JavaScript。一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了能火起来索性就改名JavaScript。同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。
1.3、JavaScript与ECMAScript的关系
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association,制定的标准。
JavaScript是由公司开发而成的,公司开发而成的一定是有一些问题,不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。
简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。
1.4、javascript语言
JavaScript一门脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
2、编写javascript的方式
2.1、行内js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
</head>
<body>
<input type="button" onclick="javascript:alert('这是行内js')" value="测试">
</body>
</html>
html关注的页面的骨架
css关注的页面的美观
js关注的是页面的行为、动作
2.2、内部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
<script type="text/javascript">
alert("helloworld");
alert("挂机");
</script>
</head>
<body>
<input type="button" value="测试">
</body>
</html>
2.3、外部js
首先定义个js文件(index.js)
alert("helloworld");
alert("挂机");
然后在html页面中进行引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
<!--引入外部js文件-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
//继续在这里去写
</script>
</head>
<body>
<input type="button" value="测试">
</body>
</html>
3、js的基本语法
3.1、定义变量
在js中,定义变量统一采用var关键字进行声明,它后面赋予值,决定了这个变量的数据类型
<script type="text/javascript">
// 定义变量
var num = 10;
console.log(num)
var str = 'helloworld';
console.log(str);
</script>
3.2、js中的数据类型
在js中,我们可以通过typeof关键字来检测一个变量的数据类型
<script type="text/javascript">
var num=10;
console.log(typeof num);
num="helloworld";
console.log(typeof num);
num=false;
console.log(typeof num);
var flag;
console.log(typeof flag);
num = new Date();
console.log(num);
console.log(typeof num);
num=null;
console.log(typeof num);
num=new Array();
console.log(num);
</script>
运行结果图
总结一下:typeof关键字检测类型:
number:表示数值型(整型和浮点型)
string:字符串,在js中我们可以通过“”或者''来定义一个字符串
boolean:布尔型,true,false
undefined:变量定义,但是未赋值
object:对象类型 (null值它的typeof也是object)
function:它表示函数类型
3.3、js中的注释
注释分为2种,和java基本上一样
单行注释:// 注释的内容
多行注释:/ 注释的内容/
//定义一个函数
var myFun=function(){
/*
* 这个表示多行注释
* */
}
3.4、运算符
算术运算符:+ - * / %
关系运算符: == > >= < <=
逻辑运算符:&& || !
赋值运算符: =
3.5、选择结构
3.5.1、基本if
var num = 10 ;
if(num>=10) {
alert('num的值大于10');
}
注意在js中,if后面的表达式可以是很多类型
var num=0;
if(num) {
console.log("************")
}else{
console.log("==========")
}
总结:if表达式如果变量为0,相当于一个false情况
var flag ;
if(flag) {
console.log("***********")
}else{
console.log("==========")
}
总结2:if表达式如果变量为undefined,相当于一个false情况
var flag2 =null;
if(flag2) {
console.log("***********")
}else{
console.log("==========")
}
总结3:if表达式如果变量 的值为null,相当于一个false情况
3.5.2、if...else结构
if(num) {
console.log("************")
}else{
console.log("==========")
}
3.5.3、多重if结构
var score = 91 ;
if(score>90) {
console.log("成绩大于90分")
}else if(score>80) {
console.log("成绩大于80分")
}else{
console.log("其他")
}
3.5.4、switch
var num = 1 ;
switch (num){
case 1:
alert('星期一');
break;
case 2:
alert('星期二');
break;
default:
alert('其他');
}
3.6、循环结构
3.6.1、while循环
var i = 1 ;
while (i<=10) {
console.log(i);
i = i+1;
}
3.6.2、do...while循环
var i =1 ;
do{
console.log(i);
i++;
}while(i<=10)
3.6.3、for循环
var i ;
for(i=1;i<=10;i++) {
console.log(i);
}
3.6.4、break,continue
break:是跳出循环结构
continue:是跳出本次循环,执行循环的下一次
3.7、相关语句
alert:弹出对话框
prompt:提示框
如果选择确定:typeof-->string类型
如果选择取消:typeof-->object
document.write():向页面写一段文本
<script type="text/javascript">
//alert("hello");
var str = prompt("请输入一个数字","5");
console.log(typeof str);
//将字符串转换成整数
//parseInt("字符串")
//字符串 52a -->52
//字符串 a123 -->NaN(not a number)
//将字符串转成小数 parseFloat(),用法和parseInt一样
var num = parseInt(str);
alert(typeof num);
document.write(num);
</script>
4、函数初步介绍
函数就类似于java中的方法,回顾一下java中方法定义
访问修饰符 返回值类型 方法名(参数列表) {
//方法体
return 返回值;
}
在js中函数是这样定义的
function functionName(形参1,...){
//函数的主题
[return value;]
}
4.1、函数调用
手动调用
<script type="text/javascript">
//无参函数
function myFun(){
for(var i = 0 ;i<10;i++) {
document.write(i+"<br/>")
}
}
//调用函数
myFun();
myFun();
myFun();
</script>
一般情况下,函数要结合事件一起使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//无参函数
function myFun(){
for(var i = 0 ;i<5;i++) {
document.write("helloworld"+"<br/>")
}
}
</script>
</head>
<body>
<input type="button" onclick="myFun()" value = "循环输出5次hello"/>
</body>
</html>
案例:编写一个函数,要求用户输入2个数字,实现2个数字的相加
<script type="text/javascript">
//无参函数
function getSum(){
var str1 = prompt("请输入第一个数字",5);
var num1 = parseInt(str1);
if(isNaN(num1)) {
alert("对不起,你的输入的数字不合法!!")
return ;
}
var str2 = prompt("请输入第二个数字",10);
var num2 = parseInt(str2);
if(isNaN(num2)) {
alert("对不起,你的输入的数字不合法!!")
return;
}
var result = num1+num2 ;
document.write("结果为:"+result);
}
</script>
isNaN:is not a number? --->非数字的时候返回true
4.2、js中的函数分类
系统函数:alert,prompt,document.write....
自定义函数:自己编写函数
4.3、变量的作用域
<script type="text/javascript">
//全局
var num =10 ;
function myFun1(){
//局部的变量
//如果在函数中,变量未采用var关键字进行声明,那么这个变量为全局变量
num2 =20 ;
console.log(num);
}
function myFun2(){
//在函数2中不能访问到函数1的变量
console.log(num);
console.log(num2)
}
myFun1();
myFun2();
</script>
总结一下:
定义在函数的外的变量为全局变量,定义在函数内的变量为局部变量,但是如果这个变量未采用var声明,则提升了全局变量
4.4、函数的编写方式(了解一下)
<script type="text/javascript">
function myFun(){
alert("myFun");
}
var myFun2=function(){
alert("myFun2");
}
myFun();
myFun2();
//匿名函数
(function(){
alert("hehe");
})();
</script>
练习:输出99乘法表
<script type="text/javascript">
function createTable(){
document.write("<table border='1' width='100%'>");
//外层控制一共输出多少行
for(var i =1 ;i<=9;i++) {
document.write("<tr>");
for(var j = 1 ;j<=i;j++) {
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
}
document.write("</tr>")
}
document.write("</table>");
}
createTable();
</script>
转载于:https://blog.51cto.com/11230344/2175427