一.JavaScript的介绍
学习目标
能够知道JavaScript的作用
1. JavaScript的定义
JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。
前端开发三大块 1、HTML：负责网页结构 2、CSS：负责网页样式 3、JavaScript：负责网页行为， 比如:网页与用户的交互效果
2. 小结
JavaScript是运行在浏览器端的脚步语言，它的作用就是负责网页和用户的交互效果。
二.JavaScript的使用方式
学习目标
能够知道JavaScript的使用方式
1. 行内式（主要用于事件）
<inputtype="button"name=""onclick="alert('ok！');">2. 内嵌式
-
<scripttype="text/javascript">
-
alert('ok！');
-
</script>
3. 外链式
<scripttype="text/javascript"src="js/index.js"></script>4. 小结
JavaScript的使用方式有三种，分别是:
行内式
内嵌式
外链式
三.变量和数据类型
学习目标
能够说出常用的数据类型
1. 定义变量
JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定， 定义变量需要用关键字 'var', 一条JavaScript语句应该以“;”结尾
定义变量的语法格式:
var 变量名 = 值;
-
variNum=123;
-
varsTr='asd';
-
-
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
-
-
variNum=45,sTr='qwe',sCount='68';
2. JavaScript注释
JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)
<scripttype="text/javascript">
-
// 单行注释
-
variNum=123;
-
/*
-
多行注释
-
1、...
-
2、...
-
*/
-
varsTr='abc123';
-
</script>
3. 数据类型
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。
5种基本数据类型：1、number 数字类型2、string 字符串类型3、boolean 布尔类型 true 或 false4、undefined undefined类型，变量声明未初始化，它的值就是undefined5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null.
1种复合类型：1、object 后面学习的数组、函数和JavaScript对象都属于复合类型
-
//1.1 数字 number
-
variOne=10.1;
-
-
//1.2 字符串 string
-
varsStr='1234';
-
-
//1.3 布尔 boolean;
-
varbIsTrue=false;
-
-
//1.4 未定义 undefined
-
varunData;
-
-
//1.5 null 表示空对象
-
varnullData=null;
-
-
//1.6 object 表示对象类型
-
varoObj= {
-
name:"隔壁老王",
-
age:88
-
}
-
// 获取变量的类型
-
vartype=typeof(oObj);
-
alert(type);
-
// 获取对象的name属性
-
alert(oObj.name);
4. 变量命名规范
1、区分大小写2、第一个字符必须是字母、下划线（_）或者美元符号（$）3、其他字符可以是字母、下划线、美元符或数字
5. 匈牙利命名风格
对象o Object 比如：oDiv数组a Array 比如：aItems字符串s String 比如：sUserName整数i Integer 比如：iItemCount布尔值b Boolean 比如：bIsComplete浮点数f Float 比如：fPrice函数fn Function 比如：fnHandler
6. 小结
js中有六种数据类型，分别是:
number
string
boolean
undefined
null
object
四.变量作用域
学习目标
能够知道变量的使用范围
1. 变量作用域的介绍
变量作用域就是变量的使用范围，变量分为:
局部变量
全局变量
2. 局部变量
局部变量就是在函数内使用的变量，只能在函数内部使用。
-
<scripttype="text/javascript">
-
functionmyalert()
-
{
-
// 定义局部变量
-
varb=23;
-
alert(b);
-
}
-
myalert(); // 弹出23
-
alert(b); // 函数外使用出错
-
</script>
3. 全局变量
全局变量就是在函数外定义的变量，可以在不同函数内使用。
-
<scripttype="text/javascript">
-
// 定义全局变量
-
vara=12;
-
functionmyalert()
-
{
-
// 修改全局变量
-
a++;
-
}
-
myalert();
-
alert(a); // 弹出13
-
</script>
4. 小结
局部变量只能在函数内部使用
全局变量可以在不同函数内使用
五.操作标签元素属性
学习目标
能够知道获取和设置标签元素属性
1. 属性的操作
首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:
属性的读取
属性的设置
属性名在js中的写法
html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
-
<style>
-
.sty01{
-
font-size:20px;
-
color:red;
-
}
-
.sty02{
-
font-size:30px;
-
color:pink;
-
text-decoration:none;
-
}
-
-
</style>
-
-
<scripttype="text/javascript">
-
-
window.onload=function(){
-
varoInput=document.getElementById('input1');
-
varoA=document.getElementById('link1');
-
// 读取属性值
-
varsValue=oInput.value;
-
varsType=oInput.type;
-
varsName=oInput.name;
-
varsLinks=oA.href;
-
-
// 操作class属性,需要写成“className”
-
oA.className='sty02';
-
-
// 写(设置)属性
-
oA.style.color='red';
-
oA.style.fontSize=sValue;
-
}
-
-
</script>
-
-
<inputtype="text"name="setsize"id="input1"value="20px">
-
<ahref="#"id="link01"class="sty01">这是一个链接</a>
2. innerHTML
innerHTML可以读取或者设置标签包裹的内容
-
<scripttype="text/javascript">
-
window.onload=function(){
-
varoDiv=document.getElementById('div1');
-
//读取
-
varsTxt=oDiv.innerHTML;
-
alert(sTxt);
-
//写入
-
oDiv.innerHTML='<a href="http://www.itcast.cn">传智播客<a/>';
-
}
-
</script>
-
-
-
<divid="div1">这是一个div元素</div>
3. 小结
标签属性的获取和设置:
var 标签对象 = document.getElementById('id名称'); -> 获取标签对象
var 变量名 = 标签对象.属性名 -> 读取属性
标签对象.属性名 = 新属性值 -> 设置属性
转载：https://blog.csdn.net/m0_73344153/article/details/129188655