1. Introduction to JavaScript
- Shorthand is js
- js is an object- and event-driven scripting language that acts on the client (browser)
- js features :
- Interactivity (dynamic interaction of information)
- Security (no local hard drive access)
- Cross-platform (because the browser can parse the js file)
- The difference between JavaScript and Java (no relationship)
- js is object based, java is object oriented.
- js can be executed after parsing, and java is compiled before execution.
- js is a weakly typed language, and java is a strongly typed language.
- The script in HTML must be between the <script> and </ script> tags. The script can be placed in the <body> and <head> sections of the HTML page.
2. JavaScript output
JavaScript does not have any functions for printing or output. Although there is no output statement, JavaScript can output data in the following ways:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
</div>
<script type="text/javascript">
//1.弹窗输出,一般用于调试
alert(123);
//2.write函数:将指定内容写出到浏览器中
//可以将后台返回的数据,写出到页面中,输出位置不好控制,不常用
document.write(123);
//3.使用innerHTML属性写到页面元素中
//将数据写入到指定位置,用的比较多
document.getElementById("div").innerHTML="abc";
//4.使用log写出到浏览器的控制台中
console.log("欢迎回校!");
</script>
</body>
</html>3. Variables
1. Declare variables
Use a keyword var var x; // x is undefined
Assign x = 5; You can also directly assign var x = 5;
If you redeclare a JavaScript variable, the value of the variable will not be lost:
After the following two statements are executed, the value of the variable x is still 5:
var x = 5; // now x is a number
var x; 2. Data type
String (String), number (Number), Boolean (Boolean), array (Array), object (Object), empty (Null), undefined (Undefined).
JavaScript has dynamic types.
This means that the same variable can be used for different types:
var x; // x is undefined
var x = 5; // now x is a number
var x = "John"; // now x is a string
3. JavaScript objects
The objects are separated by curly braces. Inside the parentheses, the properties of the object are defined in the form of name and value pairs (name: value).
The attributes are separated by commas:
var person={firstname:"yyy", lastname:"cc", id:2217};
Note: The difference between Undefined and null. The value Undefined means that the variable contains no value. The variable can be cleared by setting the value of the variable to null
4. Variable scope
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1.全局变量,整个js脚本都可以使用
var top=123;
function run() {
//2.局部变量,只能在此函数中使用
var a=12;
//3.未声明的变量赋值,将自动作为全局变量
name="yyy";
}
alert(top);
</script>
</head>
<body>
</body>
</html>Four. Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1.定义一个无参函数
function one() {
alert("hello cat");
}
//2.定义一个带参的函数
function two(name,age) {
alert("hello "+name+age);
}
//3.定义带返回值的参数
function sum(num1,num2) {
return num1+num2;
}
function getSum() {
var result=sum(1,2);
alert("和为"+result);
}
</script>
</head>
<body>
<!--调用无参函数,点击事件-->
<button οnclick="one()">点我</button>
<button οnclick="getSum()">求和</button>
<!--调用有参函数-->
<button οnclick="two('wtc',18)">点我</button>
</body>
</html>V. Events
1. Click event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function change(h3) {
h3.innerHTML="再试一下又咋的";
}
</script>
</head>
<body>
<!--鼠标点击该文字发生改变-->
<h3 οnclick="this.innerHTML='试试就试试'">点我试试</h3>
<h3 οnclick="change(this)">点我再试试</h3>
</body>
</html>2. Load event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getSpan() {
var text=document.getElementById("span").value;
alert(text);
}
</script>
</head>
<body οnlοad="getSpan()">
<span id="span">this is a span</span>
</body>
</html>3. Change event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function change() {
var txt=document.getElementById("txt");
txt.value=txt.value.toUpperCase();
}
</script>
</head>
<body>
请输入内容:<input type="text" id="txt"οnchange="change()">
<p>当输入完毕后,文本框的内容会自动转换为大写</p>
</body>
</html>4. Mouse hover event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function toRed() {
var txt=document.getElementById("txt")
txt.style.color="red";
}
function toGreen() {
var txt=document.getElementById("txt")
txt.style.color="green";
}
</script>
</head>
<body>
<span id="txt" οnmοuseοver="toGreen()"οnmοuseοut="toRed()">我会变色儿,你信吗?</span>
<p>当鼠标移动到文字上时,文字会变成绿色,离开时,会变成红色</p>
</body>
</html>5. Mouse click event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#txt{
font-size: 20px;
font-family: 微软雅黑;
color: aqua;
}
</style>
<script type="text/javascript">
//当点击鼠标未松开时,让字体变大
function toBig() {
document.getElementById("txt").style.fontSize="80px";
}
//当点击鼠标松开后,让字体变小
function toSmall() {
document.getElementById("txt").style.fontSize="5px";
}
//当点击的操作完成后,字体回归原始大小
function toReset() {
document.getElementById("txt").style.fontSize="20px";
}
</script>
</head>
<body>
<span id="txt" οnmοusedοwn="toBig()"οnmοuseup="toSmall()"οnclick="toReset()">我会变大变小</span>
</body>
</html>VI. HTML DOM
1. Find HTML elements by id
2. Find HTML elements by tag name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签名获取元素</title>
<script type="text/javascript">
function alterText() {
var div=document.getElementById("main");
//此处返回的是div中的两个p标签,存储再数组中
var pArray=div.getElementsByTagName("p");
//将数组中的第二个p标签的内容修改成第一个p标签的内容
pArray[1].innerHTML=pArray[0].innerHTML;
}
</script>
</head>
<body>
<button οnclick="alterText()">点击修改</button>
<p>你好wtc!</p>
<div id="main">
<p>DOM是很有用的!</p>
<p>该示例展示了<b>getElementByTagName</b>方法
</p>
</div>
</body>
</html>3. Find HTML elements by class name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过类名</title>
<script type="text/javascript">
function toHeart() {
var ss=document.getElementsByClassName("s");
//把荔枝换成桃子
ss[1].innerHTML="桃子";
var names=document.getElementsByName("s");
names[2].innerHTML="橙子";
names[3].innerHTML="猕猴桃";
}
</script>
</head>
<body>
<span class="s"name="s">葡萄</span><br>
<span class="s"name="s">荔枝</span><br>
<span class="s"name="s"></span><br>
<span class="s"name="s"></span><br>
<button οnclick="toHeart()">爱心</button>
</body>
</html>
