概述
JavaScript是运行在浏览器上的脚本语言，简称JS。
在HTML嵌入JavaScript的三种方式
第一种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一种方式</title>
</head>
<body>
<!--
1.要实现的功能：
用户点击按钮，弹出消息框
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序，在JS中有很多事件，
其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。
【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。】而事件句柄是以HTML标签的
属性存在的。
3.onclick = "JS代码"，执行原理：
页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上了。
等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4.如何使用js代码弹出消息框
在js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
window对象有一个函数叫做：alert，用法是：window.alert（"消息"）；这样就可以弹窗了。
5.js中的字符串可以使用双引号，也可以使用单引号。
6.js中的一条语句结束之后可以使用分号";"，也可以不用。
-->
<input type="button" value="hello" onclick="window.alert('hello.js')"/>
<input type="button" value="hello" onclick='window.alert("hello.jscode")'/>
<!--弹出多个窗口-->
<input type="button" value="hello" onclick="window.alert('hello zhangsan')
window.alert('hello lisi')
window.alert('hello wangwu')"/>
<!--window. 可以省略-->
<input type="button" value="hello" onclick="alert('hello zhangsan')
alert('hello lisi')
alert('hello wangwu')"/>
</body>
</html>
第二种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种方式</title>
</head>
<body>
<!-- 脚本快的方式 -->
<script type="text/javascript">
//单行注释
/* 多行注释
暴露在脚本快当中的程序，在页面打开的时候执行
并且遵守自上而下的顺序一次逐行执行（这个代码的执行不需要事件）。
JavaScript的脚本快在一个页面当中可以出现多次，没有要求
JavaScript的脚本快的出现位置也没有要求，随意
*/
window.alert("Hello World!");//alert函数会阻塞整个HTML页面的加载，直到点击确定按钮
window.alert("Hello JavaScript!");
</script>
<input type="button" value="我是一个按钮对象" />
</body>
</html>
第三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三种方式</title>
</head>
<body>
<!-- 在需要的位置引入js脚本文件 -->
<!-- 引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。 -->
<!-- 同一个js文件可以被引入多次，但实际开发中很少用 -->
<script type="text/javascript" src="JavaScript/1.js"></script>
<!--
<script type="text/javascript" src="JavaScript/1.js"/>
这种方式不行，结束的script标签必须要有
-->
<script type="text/javascript" src="JavaScript/1.js">
<!--
这里写的代码不会执行
window.alert("haha");
-->
</script>
<!-- 这种方式可以 -->
<script type="text/javascript" src="JavaScript/1.js" alert("hehe");></script>
</body>
</html>
window.alert("Hello JS0!");
window.alert("Hello JS1!");
window.alert("Hello JS2!");
window.alert("Hello JS3!");
window.alert("Hello JS4!");
js的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于js中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
1.java中定义/声明变量
数据类型 变量名
int i;
double d;
2.java中的变量赋值
使用“=”运算符进行赋值运算（等号右边先执行，将右边执行的结果赋值给左边的变量）
变量名 = 值;
i = 10;
d = 3.14;
3.java语言是一种强类型语言
变量在编译阶段确定是什么类型以后永远就是什么类型，不能变成其他类型。编译期强行固定变量的数据类型。
JavaScript当中的变量
如何声明
var 变量名;
如何赋值
变量名 = 值;
JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值。赋什么类型的值都行。
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
*/
var i;
undefined在js当中是一个具体存在值
alert("i = " + i);//i = undefined
var k = undefined;
alert("k = " + k);
//一个变量没有声明/定义，直接访问会怎样？
alert(age);//语法错误：age is not defined,变量age不存在
//注意：这里出错，下面的不会执行
var a,b,c = 200;
alert("a = " + a);
alert("b = " + b);
alert("c = " + c);
a = false;
alert(a);
a = "abc";
alert(a);
a = 1.2;
alert(a);
</script>
</body>
</html>
js的函数初步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
js中的函数：
等同于Java语言中的方法，函数也是一段可以被重复利用的代码片段
函数一般都是可以完成某个特定功能的
语法格式：
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名 = function(形式参数列表){
函数体;
}
js中的函数不需要指定返回值类型，返回什么类型都行
*/
function sum(a,b){
//a和b都是局部变量，他们都是形参,a和b都是变量名，随意
alert(a + b);
}
//函数必须调用才能执行
//sum(10,20);//30
//定义函数sayHello
sayHello = function(username){
alert("hello" + username)
}
//调用函数
//sayHello("张三");//hello张三
</script>
<!-- 需要点击按钮才会调用 -->
<input type="button" value="hello" onclick="sayHello('jack');" /><!-- hellojack -->
<input type="button" value="计算10和20的和" onclick="sum(10,20);" /><!-- 30 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
java中的方法有重载机制，js的函数能重载吗？
重载的含义：方法名或者函数名一样，形参不同（个数、类型、顺序）
*/
function suma(a,b){
return a + b;
}
//调用函数sum
var retValue = sum(1,2);
alert(retValue);
var retValue2 = sum("jack");//jack赋值给a变量，b变量没有赋值，系统默认undefined
alert(retValue2);//jackdefined
var retValue3 = sum();
alert(retValue3);//NaN (NaN是一个具体的值，该值表示不是数字，Not a Number)
var retValue4 = sum(1,2,3);//没赋值上3，结果3是1+2的结果，参数3废了
alert("结果：" + retValue4);//结果：3
/*
在js中，函数名字不能重名，当函数重名的时候，后声明的函数会将之前的同名函数覆盖
*/
function test1(username){
alert("test1");
}
function test1(){
alert("test1 test1");
}
test1("lisi");//test1 test1
//这里调用的是第二个test1()函数。
</script>
</body>
</html>
js的局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
/*
全局变量：
在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，关闭时销毁，
尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间，能使用局部变量尽量使用局部变量。
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量
局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
局部变量生命周期较短。
*/
//全局变量
var i = 100;
function accessI(){
//访问的是全局变量
alert("i = " + i);
}
accessI();
var username = "jack";
function accessUsername(){
var username = "lisi";
//就近原则，访问局部变量
alert("username = " + username);
}
//调用函数
accessUsername();
//访问全局变量
alert("username = " + username);
function accessAge(){
var age = 20;
alert("年龄 = " + age);
}
accessAge();
//报错，语法不对,没有叫age的全局变量
//alert("age = " + age);
//以下语法：当一个变量声明的时候，没有var关键字，不管这个变量是在哪声明的，都是全局变量
function myfun(){
myname = "阿波";//加上var下面就报错
}
//访问函数
myfun();
alert("myname = " + myname);//myname = 阿波
</script>
</body>
</html>
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
