二、JavaScript的历史(了解)
网景(NetSpace)公司
95年发布的第一个版本
JavaScript用来做表单校验
ECMA(欧洲计算机工协会) ECMAScript —>es JavaScript----->js
跨平台的语言
三、什么是JavaScript
JavaScript是基于事件和对象驱动的解释性脚本语言。
JavaScript是运行在浏览器上的语言。
JavaScript是世界上最流行的脚本语言。
JavaScript一般用来给页面增加交互性(菜单、轮播图、选项卡、表单校验…)
四、JavaScript的组成
ECMAScript JavaScript的语法部分
DOM Document Object Model 文档对象模型
通过DOM可以使JavaScript操作HTML和css
BOM Browser Object Model 浏览器对象模型
注意:ES与JS的区别的联系? ES是JS的标准,JS是ES的实现
五、使用JavaScript
1.通过script标签引入
<script src="./js/demo1.js"></script>
2.在script标签中声明
<script>
alert("hello world");
</script>
3.嵌入到HTML标签中
<button onclick="alert('hi')">点我</button>
注意:不能再script标签引入其它js之后,再用来声明js
<script src="./js/demo2.js">
alert('我饿了');//错误用法
</script>
JavaScript可以存在与页面的任何位置。
语法规则:
1.严格区分大小写
2.字符都是英文半角
3.换行、空格、缩进 不敏感 (建议一条语句占用一行,每一行代码后要加分号)
常见错误:
Uncaught ReferenceError: Alert is not defined //xx未定义
Uncaught SyntaxError: Invalid or unexpected token //无效的符号
六、变量(重点)
变化的量。存储数据
1.定义变量
使用var关键字来声明(定义) 变量
var 变量名;
2.变量名的命名规则
- 变量名以字母、_或$开头
- 可以由字母、数字、_或$组成
- 不能使用关键字和保留字
- 使用驼峰命名法–见名知意 (从第二个单词开始,首字母大写)
- 注意:变量不能重名
3.变量的使用
变量名=值; //赋值
//定义单个变量
var a; //先定义再赋值
a=10;
//定义同时即赋值(初始化)
var b=20;
//同时定义多个变量
var num1,num2,num3;
//定义多个变量,初始化
var age1=20,age2=100,age3;
//连等写法
var a = b = c = 1;
console.log(a,b,c);
注意:变量先定义再使用
注释: // 行注释 /* */ 文档注释(多行注释)
七、常见的事件
事件:一件事
鼠标事件和键盘事件
on-事件名
鼠标事件:
onmouseover 鼠标经过
onmouseout 鼠标离开
onmousemove 鼠标移动
onclick 点击事件
onmouseenter 鼠标进入
onmouseleave 鼠标离开
onload 加载事件
onchange 内容改变事件
元素查找:
//元素查找
var o=document.getElementById('btn');//根据id找元素
console.log(o);
添加事件:
//添加事件
o.onclick = function () {
console.log('我被点击了.....');
};
注意:事件不会自动执行,需要触发之后才可以执行
//常见错误:
Uncaught TypeError: Cannot set property 'onmouseenter' of null
八、js操作页面内容
1.取出输入框的内容:
对象.value
2.设置输入框的内容:
对象.value=值;
注意:下拉列表的取值分两种情况:
1.option标签有value属性 取的是value属性
-
option标签没有value属性 取的是option标签的内容
<select name="" id="slt"> <!-- <option value="1">AAAA</option> <option value="2">BBBB</option> <option value="3">CCCC</option> <option value="4">DDDD</option> --> <option>AAAAA</option> <option>BBBB</option> <option>CCCC</option> </select>
3.闭合标签的内容获取和设置
innerHTML
innerText
// console.log(o.innerHTML);//取出内容
// o.innerHTML='呵呵呵,我是新来的';
console.log(o.innerText);
o.innerText='呵呵呵,我是text';
注意:
innerHTML可以支持HTML标签
innerText不支持标签(原样显示)
九、js操作属性
取值:
对象.属性名
赋值:
对象.属性名=值;
注意:一些特殊的属性名,需要变形 class---->className for---->htmlFor
十、js操作样式
//用法:
对象.style.样式名
//示例:
对象.style.width="200px";
对象.style.fontSize="18px";// 变形 去掉-,从第二个单词开始,首字母大写 font-size background-color 等....
//直接修改style或者 style.cssText 都是覆盖效果
o.style='值';
o.style.cssText="值"