Java教程
JavaScript
本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1.在HTML中怎么嵌入JavaScript代码？
三种方式。
第一种方式
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第一种方式</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 lis')
window.alert('hello wangwu')"/>
<!-- window. 可以省略。-->
<input type="button" value="hello" onclick="alert('hello zhangsan')
alert('hello lis')
alert('hello wangwu')"/>
<input type="button" value="hello" onclick="alert('hello zhangsan');
alert('hello lis');
alert('hello wangwu');"/>
</body>
</html>
第二种方式
<!--
javascript的脚本块在一个页面当中可以出现多次。没有要求。
javascript的脚本块出现位置也没有要求，随意。
-->
<script type="text/javascript">
// alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
window.alert("first.......");
</script>
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第二种方式</title>
<!--样式块-->
<style type="text/css">
/*
css代码
*/
</style>
<script type="text/javascript">
window.alert("head............");
</script>
</head>
<body>
<input type="button" value="我是一个按钮对象1" />
<!--第二种方式：脚本块的方式-->
<script type="text/javascript">
/*
暴露在脚本块当中的程序，在页面打开的时候执行，
并且遵守自上而下的顺序依次逐行执行。（这个代
码的执行不需要事件）
*/
window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
// JS代码的注释，这是单行注释。
/*
JS代码的多行注释。和java一样。
*/
window.alert("Hello JavaScript!");
</script>
<input type="button" value="我是一个按钮对象" />
</body>
</html>
<script type="text/javascript">
window.alert("last.......");
</script>
<!--
/**
*
* javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。
*/
-->
第三种方式
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>
</head>
<body>
<!--在需要的位置引入js脚本文件-->
<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<!--这种方式不行，结束的script标签必须有。-->
<!--
<script type="text/javascript" src="js/1.js" />
-->
<!--
<script type="text/javascript" src="js/1.js"></script>
-->
<script type="text/javascript" src="js/1.js">
// 这里写的代码不会执行。
// window.alert("Test");
</script>
<script type="text/javascript">
alert("hello jack!");
</script>
</body>
</html>
2.变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于JS中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
回顾java中的变量：
1、java中怎么定义/声明变量？
数据类型 变量名;
例如：
int i;
double d;
boolean flag;
2、java中的变量怎么赋值？
使用“=”运算符进行赋值运算。（"="运算符右边先执行，将右边执行的结果赋值给左边的变量。）
变量名 = 值;
例如：
i = 10;
d = 3.14;
flag = false;
3、java语言是一种强类型语言，强类型怎么理解？
java语言存在编译阶段，假设有代码：int i;
那么在Java中有一个特点是：java程序编译阶段就已经确定了
i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
那么这个变量到最终内存释放，一直都是int类型，不可能变成
其他类型。
int i = 10;
double d = i;
这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
i还是int类型。
i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。编译期强行固定变量的数据类型。
称为强类型语言。
public void sum(int a, int b){}
sum(?,?);
javascript当中的变量？
怎么声明变量？
var 变量名;
怎么给变量赋值？
变量名 = 值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
重点：javascript是一种弱类型编程语言。
*/
// 在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined
var i;
// undefined 在JS中是一个具体存在值.
alert("i = " + i); // i = undefined
alert(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>
3.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
1、JS中的函数：
等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
函数一般都是可以完成某个特定功能的。
2、回顾java中的方法？
[修饰符列表] 返回值类型 方法名(形式参数列表){
方法体;
}
例如：
public static boolean login(String username,String password){
...
return true;
}
boolean loginSuccess = login("admin","123");
3、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
语法格式：
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名 = function(形式参数列表){
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都行。
*/
function sum(a, b){
// a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
alert(a + b);
}
// 函数必须调用才能执行的.
//sum(10, 20);
// 定义函数sayHello
sayHello = function(username){
alert("hello " + username);
}
// 调用函数
//sayHello("zhangsan");
</script>
<input type="button" value="hello" onclick="sayHello('jack');" />
<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
java中的方法有重载机制，JS中的函数能重载吗？
JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）
重载的含义：
方法名或者函数名一样，形参不同（个数、类型、顺序）
*/
function sum(a, b){
return a + b;
}
// 调用函数sum
var retValue = sum(1, 2);
alert(retValue);
var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
alert(retValue2); // jackundefined
var retValue3 = sum();
alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
var retValue4 = sum(1, 2, 3);
alert("结果=" + retValue4); // 结果=3
function test1(username){
alert("test1");
}
/*
在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
*/
function test1(){
alert("test1 test1");
}
test1("lisi"); // 这个调用的是第二个test1()函数.
</script>
</body>
</html>
4.局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的局部变量和全局变量</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();
// 报错(语法不对)
// alert("age = " + age);
// 以下语法是很奇怪的.
function myfun(){
// 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
myname = "dujubin";
}
// 访问函数
myfun();
alert("myname = " + myname); // myname = dujubin
</script>
</body>
</html>
5.数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
1、虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
这里也需要学习一下JS包括哪些数据类型？
JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
2、ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol
3、JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
"undefined"
"number"
"string"
"boolean"
"object"
"function"
4、在JS当中比较字符串是否相等使用“==”完成。没有equals。
*/
/*
// 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
// 因为以下定义的这个sum函数是为了完成两个数字的求和.
function sum(a, b){
if(typeof a == "number" && typeof b == "number"){
return a + b;
}
alert(a + "," + b + "必须都为数字！");
}
// 别人去调用以上你写的sum函数.
var retValue = sum(false, "abc");
alert(retValue); // undefined
var retValue2 = sum(1, 2);
alert(retValue2); // 3
*/
var i;
alert(typeof i); // "undefined"
var k = 10;
alert(typeof k); // "number"
var f = "abc";
alert(typeof f); // "string"
var d = null;
alert(typeof d); // "object" null属于Null类型,但是typeof运算符的结果是"object"
var flag = false;
alert(typeof flag); // "boolean"
var obj = new Object();
alert(typeof obj); // "object"
// sayHello是一个函数.
function sayHello(){
}
alert(typeof sayHello); // "function"
</script>
</body>
</html>
这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Sentinel配置限流资料：新手入门教程09-27
-
Sentinel配置限流资料详解09-27
-
Sentinel限流资料：新手入门教程09-27
-
Sentinel限流资料入门详解09-26
-
Springboot框架资料：初学者入门教程09-26
-
Springboot框架资料详解：新手入门教程09-26
-
Springboot企业级开发资料：新手入门指南09-26
-
SpringBoot企业级开发资料新手指南09-26
-
Springboot微服务资料入门教程09-26
-
SpringBoot微服务资料入门指南09-26
-
Springboot项目开发资料：新手入门及初级实战教程09-26
-
Springboot项目开发资料：新手入门教程09-26
-
SpringCloud Alibaba资料入门详解09-26
-
SpringCloud Alibaba资料详解与入门教程09-26
-
SpringCloud微服务资料入门教程09-26
栏目导航
