前端三大块,HTML, CSS, JavaScript,今天是JavaScript入门。
介绍JavaScript的页面引入方式,Javascript变量,javaScript获取元素及操作元素属性,JavaScript函数的使用以及条件语句的基本使用。
JavaScript介绍
- JavaScript试运行在浏览器的端的脚本语言。
- JavaScript主要解决的时前端与用户交互的问题,包括使用交互与数据交互。
前端三大块
- HTML:负责页面结构
- CSS:负责页面表现
- JavaScript:负责页面行为,部分动画效果,页面与用户的交互,页面功能。
JavaScript嵌入页面的方式
元素里属性栏嵌入
<input type="button" name="" onclick="alert('ok!');">
Script标签嵌入
<script type="text/javascript">
alert(‘ok!’);
</script>
外部嵌入
<script type="text/javascript" src="js/index.js"></script>
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 方式三 外部引入 -->
<script type="text/javascript" src="js/01js外部引入.js"></script>
<!-- 方式2 使用script标签导入 -->
<script type="text/javascript">
alert('呵呵呵');
</script>
</head>
<body>
<!-- 方式1 在标签属性里写上事件 -->
<div onclick="alert('嘿嘿嘿')">哈哈哈,点我啊</div>
</body>
</html>
js文件代码
alert('吼吼吼');
变量
- JavaScript是一种弱类型的语言,JavaScript的变量类型由它的值来决定。
- 定义变量需要用到关键字 var
var iNum = 456;
var sStr = 'ABC';
// 同时定义多个变量可以用 ’,’隔开,共用一个‘var’关键字
var inNum = 789, sStr = "apple", bIsgood = true;
变量类型
- 5种基本数据类型
- number:数字类型
- string:字符串类型
- boolean: 布尔类型
- undefined:undifined类型,变量声明未初始化,它的值就是undefined
- null: null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null;
- 1种复合类型
1.object:object类型,表示一个对象
JavaScript语句与注释
- 一条javascript语句以;结尾
<script type="text/javascript">
var iNum = 123;
var sStr = "123"
function fnAlert(){
alert(sStr);
}
fnAlert();
</script>
- javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1.。。。
2.。。。
*/
var sStr = 'apple'
</script>
变量,函数,属性,函数参数的命名规范
- 区分大小写
- 第一个字符必须是字母,下划线,或者美元符号
其他字母可以是字母,下划线,数字或者美元符号
推荐使用匈牙利命名风格
对象:o Object,如,oDiv
数组:a Array,如,aLtems
字符串:s String,如,sUserName
整数:i Interger,如,iNum
布尔值:b Boolean,如,BIsComplite
浮点数:f Float,如,fPrice
函数:fn Function,如,fnHander
正则表达式:re RegExg,如,reEmailCheck
函数
函数的预解析
- javascript 解析过程分为两个阶段,先是编译阶段,然后是执行阶段,编译阶段会把函数定义解析了,所以,代码中可以将函数的调用语句写在函数定义语句之前,在执行阶段是可以执行这一行调用代码的。
- 变量不可以预编译
<script type="text/javascript">
fnAlert(); // 弹出 hello!
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!')
}
var iNum = 123;
</script>
函数传参
- 正常传参,一一对应
- 在javascriptz中,可以传递比形参个数少或者多的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fnTestFun(num1,num2){
var result = num1+num2;
// 控制台打印
console.log(result);
// console.log(arguments)
}
fnTestFun(1,2);
// 给函数传参可以传比形参个数多的参数,不会报错,函数会接受参数,放在
// arguments列表中,可以在函数内调用
fnTestFun(1,2,3);
// 也可以给函数传递少于形参个数的参数,不会报错,没传值的形参是undifined
fnTestFun(1)
</script>
</head>
<body>
</body>
</html>
函数返回值
- 在js中,函数返回值的使用和普通函数并无两样
<script>
// 函数返回值的使用和普通函数一样
var iAdd2Num = fnAdd(5,8);
console.log(iAdd2Num);
// 在控制台上打印:13
function fnAdd(a1,a2){
result = a1+a2;
return result;
}
</script>
匿名函数
- 定义的函数可以不给名称,这个没名字的函数叫做匿名函数
- 可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用
<script type="text/javascript">
window.onload=function(){
var oBtn = document.getElemrntById('btn1');
// 可以把函数的引用传给事件
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 也可以直接将匿名函数赋值给绑定的事件
oBtn.onclick=function(){
alert('ok!');
}
}
</script>
条件语句
- 控制程序语句的执行方向的语句
运算符
条件关系运算符
- > < >= <= == ===
- === 表示数据类型和值都相等才是true,如 12 === ‘12’ 是 false
- == 表示只要值相等就是true,如 12 == ‘12’ 是true
逻辑运算符
- && : 与 ; || :或; !: 非
if/else
- 语句的执行方向只有两种时使用
var iNum1 = 123, iNum2 = 456;
if (iNum1>iNum1){
console.log("iNum1>iNum2")
}else{
console.log("iNum1<=iNum2")
}
// 浏览器控制台打印出: iNum1<=iNum2
- “===”必须类型和值都相等才为true.”==”
<script>
var iNum = 123;
var sStr = "123";
if(iNum == sStr){
console.log('iNum == sStr is true');
}else{
console.log('iNum == sStr is false');
}
// 浏览器控制台打印: iNum == sStr is true
if(iNum === sStr){
console.log('iNum === sStr is true');
}else{
console.log('iNum === sStr is false');
}
// 浏览器控制台打印:iNum === sStr is false
</script>
if/else if
- 语句的执行方向超过两种时使用if/else if语句
<script>
var iDay = 8;
if (iDay == 1){
alert('monday');
}
else if(iDay == 2) {
alert('thuesday');
}
else if(iDay == 3){
alert('wedsday');
}
else if(iDay == 4){
alert('thursday');
}
else if(iDay == 5){
alert('friday');
}
else {
alert('weekends')
}
</script>
switch/case
- 用在 对一个变量的值,不同的值,执行不同的语句的情况
script>
var iDay = 7;
switch (iDay){
case 1:
alert('monday');
break;
case 2:
alert('tuesday');
break;
case 3:
alert('wedsday');
break;
case 4:
alert('thursday');
break;
case 5:
alert('friday');
break;
case 6:
case 7:
alert('weekends');
break;
}
</script>
&&,||,!
<script>
var iNum = 123, iNum1 = 456;
var sStr = "123";
// 表示 && 两边的条件都为true时 才执行 if 里的语句
if (iNum==sStr && iNum < iNum1){
alert("true")
}
else{
alert('false')
}
// 弹出: true
// 表示 || 两边的条件只要有一个满足 就执行 if 下的语句
if(iNum==sStr || iNum > iNum1){
alert('true')
}else{
alert('false')
}
// 弹出: true
// 表示 !后的条件为false时,才执行if里的语句
if(!iNum==sStr){
alert('true')
}else{
alert('false')
}
//弹出:false
</script>`
三元运算符
- \<条件>?<语句1>:<语句2>
- 表示条件结果为true时,执行语句1,条件结果为false时,执行语句2
<script>
var a = 123 > 567 ? "呵呵":"哈哈";
alert(a)
//弹出:哈哈
</script>
获取页面的标签
- 在javascript中获取到HTML中的标签
获取方法
- 可以使用内置对象document上的getElementById来换取页面上设置了Id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量
<script>
var oDiv = document.getElementById('div')
</script>
...
<div id="div">这是一个div</div>
- 上面的语句会有一个错误,因为语句是从上到下执行的,在执行script语句的时候,还没有定义
<div>
标签,所以无法获得<div>
标签 - 解决办法:
1.将script语句写在定义<div>
标签的下方
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
2.将javascript语句放到windows.onload触发的函数里面,获取元素的语句会在页面加载完成后才执行,就不会出错了。
<script>
window.onload = function(){ var oDiv = document.getElementById('div');
}
</script>
。。。
<div id="div">这是一个div</div>
操作元素的属性
- 对获取到的元素进行属性的读写操作
操作方法
- ‘.’ 操作
- ‘[]’操作
属性写法
- html的属性和js里的属性写法一样
- ‘class’属性写成‘className’
- ‘style’属性里面的属性,有横杠的改成驼峰式,比如:‘font-size’ 改成‘style.fontSize’
通过‘.’操作属性
- 获取到元素对象之后,可用’.’读取/设置属性值
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLink = oA.href;
//写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
</head>
<body>
<input type="text" name='setsize' id='input1' value='20px'>
<a href="http://www.itcast.cn" id='link1'>传智播客</a>
通过‘[ ]’操作属性
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 写(设置)属性
// oA.style.sVal1 = val2; 没反应
oA.style[sVal1] = sVal2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
获取class属性的值
- 需要使用.className来获取
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var sClassName = oDiv.className;//读取class属性要使用 className
alert(sClassName);
// 弹出:d1
}
</script>
...
<div id="div1" class="d1"></div>
innerHTML
- innerHTML可以读取或者写入标签包裹的内容
<script>
window.onload = function(){
var oDiv = document.getElementById('d1');
// 使用<标签对象>.innerHTML可以读取到标签里的内容
var sText = oDiv.innerHTML;
alert(sText);
// 弹出: 这是一个div
// 写入内容
oDiv.innerHTML = '这是通过innerHTML更改过内容的div'
}
</script>
</head>
<body>
<div id="d1">这是一个div</div>
操作标签样式
- 对标签的style样式进行操作
- js读取和设置的是标签的内联style样式
<script>
window.onload = function(){
var oDiv = document.getElementById('d1');
// <对象名>.style.<属性>=’<属性值>‘ 可在js里修改标签的样式值
oDiv.style.color = 'red';
//oDiv 读取的标签样式属性是内联样式属性
console.log(oDiv.style.fontSize);
//oDiv对象修改标签的内联样式属性
oDiv.style.fontSize = '20px';
console.log(oDiv.style.fontSize);
//控制台打印:20px
}
</script>
<style>
div{
color:green;
font-size: 50px;
}
</style>
</head>
<body>
<!-- 内联样式的权重(blue)大于标签样式(green),所以显示blue -->
<div id="d1" style="color:blue; font-size:100px">这是一个div</div>
</body>
事件
- 事件是能被javaScript检测到的动作
- onclick 是一个点击事件,表示鼠标左键按下,抬起来这个动作
<script>
window.onload = function(){
var oDiv1 = document.getElementById('d1')
// 定义一个点击事件,执行点击事件函数
oDiv1.onclick = fnAlert;
// 弹出:让你点,你就点,真听话
// 定义一个点击事件函数
function fnAlert(){
alert('让你点,你就点,真听话')
}
}
</script>
</head>
<body>
<input type="button" id="d1" value="点我">
</body>