JavaScript : 是web上一种功能强大的编程语言,用于开发交互式的web页面。
它不需要进行编译,而是直接嵌入在HTML页面中, 由浏览器执行。
一、核心-ECMAScript
JS的引入:
1.内嵌式: <script type="text/javascript"> js代码 </script>
注:可以写在任意位置,浏览器自上到下解析.
2.外联式: <script type="text/javascript" src="xxx.js"></script>
注:引入了js,标签中就不能写js代码了,会失去作用的.
基本语法:
1.变量:
变量的声明: var 变量名; // 默认值是undefined
变量的赋值: var 变量名 = 值; // 可以是任意类型.
2.数据类型:
基本类型:
undefined: 值就是undefined.
null: 值就是null.
boolean: true/false
number:任意的数字.(整数,小数)
string:字符串类型.(双引,单引)
引用类型:
js是基于对象,而不是面向对象.
预定义引用类型: var obj = new Object();
所有的对象数据类型都是object.
关键字: typeof可以查看变量的数据类型.
3.运算符
js中: 5/2=2.5 java中:5/2=2;
+ 号: 进行的是字符串的连接.
其他运算符,先把字符串转为整数再进行计算.
===(全等于): 比的是值和类型.
4.循环控制语句.
普通for循环:
for(var i=0; i<10; i++){ alert(i); }
增强for循环: 没有集合只有数组.
for(var 数组索引 in 数组名) {
alert(数组名[数组的索引]);
}
函数和事件: (重点)
1.函数:
a.普通函数:
function 函数名(参数列表){ // 参数不写数据类型
js逻辑代码;
写return 就有返回值,
}
函数调用: 函数名(实际参数) --> 有返回值,需要接收.
b.匿名函数:
function (参数列表){
js逻辑代码
}
使用: 将匿名函数赋值给一个变量, 使用变量名调用.
将匿名函数作为其他函数的实际参数.
2.事件:
需要将事件绑定到事件源上,然后使用函数封装需要执行的代码.
onload 某个页面或图像被完成加载
onsubmit 当表单提交 时触发该事件(注意事件源是表单form)
onclick onclick 鼠标点击 某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
二、浏览器对象BOM
1.Screen对象: 显示浏览器屏幕信息.
例: alert(screen.width+” ”+screen.height)
2.Navigator对象: 正在使用的浏览器 .
例:alert(snavigatot.appNam+” “+navigator.appVersion)
3.Location对象: location.href = “访问地址”;
4.window对象, 表示一个浏览器窗口或一个框架.
弹框的方法:
a.提示框: alert(提示信息) - 一般用于调试程序.
b.确认框: confirm(提示信息) - 确定-返回true;
c.输入框: prompt(提示信息) - 确定-返回用户输入内容.
定时器: 指定毫秒值结束后会执行指定的函数
执行一次: setTimeout(函数, 毫秒值)
反复执行: setInterval(函数 , 毫秒值)
清除计时器: clearInterval(定时器返回的id值. )
全局函数: 任何地方都可以使用
parseInt(xxx):把字符串的整数,转换整数
parseFloat(xxx):把字符串的小数,转换小数
三、文档对象DOM
DOM:文档对象模型.
浏览器会解析html , 把html加载到内存中 , 会生成DOM树.
我们可以使用DOM对象获取/改变任意元素的属性和文本.
document文档对象:
标签元素操作:
getElementById(“id属性值”): 通过id获得一个元素.
getElementsByTagName(“标签名称”): 根据标签名获取多个元素.返回的是数组.
getElementsByClassName(class属性值): 根据class属性获取多个,
getElementsByName(name属性值): 根据name属性获取多个.
使用对象名.属性名 - - - > 获取属性值(只适用于form表单中的标签)
对象名.innerHTML = “标签体” ; 设置标签体.
对象名.innerHTML : 获取标签体.
innerText = “以文本的方式显示”
createElement(“标签名”) : 创建一个新的标签.
appendChild(“子节点”) : 添加子节点 .(追加写 , 追加到末尾.)
hasChildNodes() : 是否有子节点.true , false (空格也算子节点)
removechild(子节点对象): 删除子节点.
replaceChild(新对象 , 旧对象) : 剪切替换.
insertbefor(新对象 , 旧对象): 新节点添加到旧节点之前.
parentNode: 使用子节点属性 , 获取父节点
属性操作:
getAttribute(name) : 通过属性名获取属性值.(适用于所有的标签)
setAttribute(name,value): 设置属性值.
removeAttribute(name):删除属性.
JavaScript内置对象:
1.String对象: var s1=new String(“abc”);
substr(开始索引,字符个数):从开始索引开始,获取指定个数的字符
2.Date对象: var date = new Date();
常用的方法:
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
3.Math对象: 可以直接调用.
4.Array数组对象:
var arr1 = [元素1, 元素2 , 元素3 ] ; 可以存储任意类型的值.
二维数组: 数组中的元素仍是一个数组.
var citys = [
[] , // 0索引 .
[] // 1 索引
];
5.RegExp正则表达式对象:
作用 : 效验字符串 .
var reg = “/^ 规则 $/ “(不能加空格) /^1 [34578] [0-9] {9} $/
使用test方法 , 进行效验. 符合 -> true
正则表达式参考: https://blog.youkuaiyun.com/qq_42986107/article/details/82874775