文章目录
JavaScript简介
- JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript用法
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中
- 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件,请在
javaScript输出
- 使用 window.alert() 弹出警告框。
<script>
window.alert(5 + 6);
</script>
- 使用 document.write() 方法将内容写到 HTML 文档中。
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
- 使用 console.log() 写入到浏览器的控制台。
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
JavaScript语法
JavaScript 字面量
- 数字
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>
- 字符串
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
- 数组
[40, 100, 1, 5, 25, 10]
- 对象
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
- 函数
function myFunction(a, b) { return a * b;}
JavaScript 变量
var x, length // 声明
x = 5 // 赋值
length = 6 // 赋值
JavaScript 注释
var length = 16; // Number 通过数字字面量赋值 ,单行注释
/*
多行注释
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
JavaScript操作符
== 操作符
“等同”操作符,简单判断2个变量值是否相等,变量类型不一致时,会做类型转换,即忽略变量的类型进行比较
=== 操作符
“恒等”操作符,先比较2个变量类型是否一致,不一致返回false,一致时,再比较2个变量的值是否相等
JavaScript数据类型
- 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
- 引用数据类型:对象(Object)、数组(Array)、函数(Function)。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
对象
var person={firstname:"John", lastname:"Doe", id:5566};
声明变量类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript函数
JavaScript函数语法
1.使用关键字 function 定义函数
function functionname(var1,var2) //不需要像java一样赋值,直接形参名
{
// 执行代码
retrue;// 返回值
}
函数声明后不会立即执行,会在我们需要的时候调用到。在使用 return 语句时,函数会停止执行,并返回指定的值。
2.通过一个表达式定义
var x = function (a, b) {return a * b};
var z = x(4, 3);
函数表达式可以存储在变量中,在函数表达式存储在变量后,变量也可作为一个函数使用,以上函数实际上是一个 匿名函数 (函数没有名称)。函数存储在变量中,不需要函数名称,通常通过变量名来调用。上述函数以分号结尾,因为它是一个执行语句。
3.自调用函数
(function () {
var x = "Hello!!"; // 我将调用自己
})();
如果表达式后面紧跟 () ,则会自动调用。以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
变量
- 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
- 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
变量生命周期
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除
JavaScript流程控制
循环
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
条件
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
if (time<20)
{
x="Good day";
}
if (time<20)
{
x="Good day";
}
else if (time==30)
{
当条件 2 为 true 时执行的代码
}
else
{
x="Good evening";
}
内部对象
JSON
<script>
var user = {
name: "pangjian",
age: 22,
sex: "男"
}
// js对象转化为json字符串:{"name":"pangjian","age":22,"sex":"男"}
var jsonUser = JSON.stringify(user)
// json字符串解析为js对象
var obj = JSON.parse('{"name":"pangjian","age":22,"sex":"男"}')
</script>
JSON和JS对象区别:一个对象,一个字符串
var obj = {name:"pangjian",age:22,sex:"男"};
var json = '{"name":"pangjian","age":22,"sex":"男"}';
JQuery
- jQuery库,里面存在大量的Javascript函数
jQuery库引入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
jQuery库公式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
</head>
<body>
<!--
公式: $(选择器).action()
$:就代表JQuery
选择器:css选择器
action:事件
-->
<a href="" id="a">点击</a>
<script>
$('#a').click(function (){
alert('hello JQuery')
})
</script>
</body>
</html>
操作Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul id="a">
<li>Python</li>
<li>Java</li>
</ul>
<input type="button" value="点击变颜色" id="b">
<script>
// 当网页元素加载完毕之后,响应事件,不然没加载完成元素操作不了
$(document).ready(function (){
// 选定按钮并给按钮添加事件
$('#b').click(function (){
// 选定第一个li让它变颜色
$('#a>li:first').css("color","red");
// 让第二个消失
$('#a>li:last').hide();
});
});
</script>
</body>
</html>