Javascript 既可以作为前端语言,也可以作为后端语言
语法上与java有类似之处,但本质上与java语言没有关系
一、Javascript
主要用途:用在浏览器当中, 也可以作为后台开发语言(nodejs)
语法:类似于 java, 简称 js
1. 基本数据类型
- Number 数字类型(整数,小数) 1.0 1 -2
- String 字符串类型 “字符串1” ‘字符串2’
- Boolean 布尔类型 true false
- Null 表示空值
- Undefined 未定义 (声明了var变量,但没有赋初值时)
2. 变量赋值
所有变量类型 都是 var (var 可以存储数字,字符串,布尔 …)
弱类型语言
var i = 10;
var str = "hello, world";
可以利用浏览器提供的 console
对象进行调试输出,例如:
console.log("内容");
3. 基本运算
- 没有除0异常,除零会出现正负无穷大(Infinity)
- 如果进行了非法的数字运算,结果是 NaN (Not a Number)
“aaa” - 9 结果就是 NaN
包括字符串转换数字失败时,结果也是NaN 例如 parseInt(“aaa”) - js中的== 比较的是值(不同类型的会转换后比较)所以
1 == '1'
结果是 true
如果既要保证值相等,也要保证类型相等
1 === '1'
- 可以条件判断中,使用各种类型的值
对于数字类型 0 代表 false, 非零 代表 true
对于字符串 “” 代表 false, 非空串 代表 true
null , undefined 代表 false
var i = 0;
if(i) {
console.log("ok");
} else {
console.log("not ok");
}
4. js中没有块作用域
for(var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);
if(true) {
var x = 10;
}
console.log(x);
5. 复杂类型
5.1 Object 对象类型
定义对象
// {属性名:属性值, 属性名:属性值 ...}
var obj = {"name":"张三", "age": 18};
// 可以简化 {name:"张三", age: 18};
// 动态添加
obj.sex = "男";
// 修改属性
obj.age = 20;
// 删除属性
delete obj.age;
5.2 Array 数组类型
定义数组
// [值1, 值2, ... 值n]
var array = [1,2,3,4,5];
// 访问下标为 3 的元素
console.log(array[3]);
// 遍历数组
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
// 修改元素
array[3] = 40;
// 向尾部加入元素
array[5] = 6;
array[9] = 10;
// 向尾部添加元素 .push(元素)
array.push(6);
// 从尾部删除元素 .pop()
array.pop();
// 从中间的某个下标删除元素 splice(下标,个数);
array.splice(1,2); // 代表从下标1开始,删除2个元素
// 拼接数组内的所有元素, 例如
array.join("-"); // 结果就是 1-2-3-4-5
5.3 Funtion 函数类型
public static int add(int a , int b) {
return a + b;
}
语法:
function 函数名(参数列表) {
函数体
return 返回结果
}
function add(a, b) {
console.log(arguments);
return a + b;
}
5.4 Date 日期类型
var date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinute());
console.log(date.getTime());
5.5 正则类型
定义正则表达式
var pattern = /正则表达式/;
// 匹配数字 [0-9] \d
// 匹配所有英文字符 [a-zA-Z]
// 匹配单词字符 [a-zA-Z0-9_] \w
// 匹配任意 .
// 匹配起始 ^ 匹配结束 $
// 匹配次数 {m,n} 最少出现 m 次,最多出现 n 次
// {m, } 最少出现 m 次, 没有上限
// {0, } 0到多次 *
// {1, } 1到多次 +
// {0,1} 0到1次 ?
6、字符串
// 连接字符串
var a = "hello";
var b = "world";
a+b;
a.concat(b)
// 搜索某个字符
var c = "abcde";
c.indexOf("cd");
var str = "a,b,c,d,e";
str.split(","); // 根据,号切分为数组
// 找子串
var str = "abcde";
str.substr(2,2); // 参数1是起始下标,参数2是长度
str.substring(2, 4) // 参数1是起始下标, 参数2是结束下标+1
// 替换字符串
var str = "aaabbbaaa"; // 把 a-->c
str.replace("a", "c"); // 只替换了第一个匹配的
str.replace( /a/g, "c" ); // global(全局的) 替换所有遇到的
var str = "aaabbbaaa"; // aaa-->c cbbbc
str.replace(/aaa/g, "c");
var str = "<p>aaaaa</p>"; // 把标签去掉, 只留内容
str.replace(/<p>/, "").replace(/<\/p>/,""); // 替换了两次
str.replace(/(<p>|<\/p>)/g, "");
var str = "<p>aap>aaa</p>"; // <span>aaaaa</span>
// 分组替换
/(<p>)(.+)(<\/p>)/g
$1 表示第一个分组
$2 表示第二个分组
...
str.replace(/(<p>)(.+)(<\/p>)/g, "$1");
str.replace(/(<p>)(.+)(<\/p>)/g, "<span>$2</span>");
3. js 操作 html 标签
3.1 找到页面元素
先给标签一个id属性,然后根据id的值查找
document (文档对象)
|- html
|- head
|- body
|-p
// 根据id值查找页面标签
document.getElementById("id值");
可以根据标签名称查找
document.getElementsByTagName("标签名");
根据选择器查找页面元素
document.querySelectorAll("选择器");
// 其中选择器可以是 #id, .class, 元素, ...
3.2 改动标签属性
先找到标签元素,把标签元素看做一个对象, 用对象.属性
例如:
找到 img对象.src
找到 input对象.value
3. 改动标签内容
内容
标签对象.innerText
标签对象.innerHTML
例如:给内容赋值时"<span style='color:red'>aaa</span>"
这时 innerText 会把这段html按照普通文本的方式显示
innerHTML 会把这些html先按照html语法进行解析,解析后显示
4. 添加事件
鼠标单击事件
4.1 方法1
找到标签.事件属性 = function() {}
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onkeydown 按键按下事件
…
document.getElementById("img1").onclick = function (){
console.log("鼠标单击发生了");
document.getElementById("img1").src = "2.jpg";
};
4.2 方法2
<script>
function fun1() {
document.getElementById("img1").src = "2.jpg";
}
</script>
<img src="1.jpg" onclick="fun1()">
4.3 定时器方法
使用函数:setTimeout(函数, 延时毫秒值);
var i = 0;
function func2() {
setTimeout(function(){
func2();
console.log("ok:" + i);
i++;
} , 3000);
}
func2()
4.4 常见事件
- ondblclick 鼠标双击
- onchange value取值发生改变时(主要指表单标签)
- onmouseover 鼠标移入
- onmouseout 鼠标移出
- onfocus 获取焦点
- onblur 失去焦点
- onkeydown 按键按下
- onkeyup 按键松开
- window.event 有一个buttons属性
- 取值为1表示 左键被按下
- 取值为2表示 右键被按下
- 取值为4表示 中间滚轮被按下
keydown先发生 > onkeypress 再发生 > onkeyup 最后发生
keyCode不区分大小写 keyCode区分大小写
可以识别特殊字符 只能识别可打印字符
4.5 事件对象
window.event 事件发生时的所有跟事件相关联的信息
可以简写为event
event.preventDefault(); // 阻止标签的默认行为
设计一个文本框,只能输入数字 (可以利用 event.preventDefault())
event.stopPropagation(); // 停止事件冒泡
事件冒泡就是指:在子标签上触发的一个事件,会沿着标签的包含关系,逐级向上传播
4.6 this
class A {
private int a;
public void test() {
this.a = 33;
}
}
A x1 = new A();
x1.test();
A x2 = new A();
x2.test();
在javascript中, this代表触发了事件的标签对象
例如
<input type="button" value="删除" onclick="del(this)">
这里的this就代表当前的input按钮
5、BOM
BOM(Browser Object Model)即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
window 代表整个浏览器窗口对象
.alert(“提示的文字”); // 弹出对话框窗口
.confirm(“提示的文字”); // 弹出确认框窗口 如果点击了确定,返回true,点击了取消返回false
.setTimeout(函数名称, 毫秒值); // 延时执行一个函数
例如:
function delay() {
console.log(“ok”);
}
var n = window.setTimeout(delay, 10000); // 执行会返回一个数字
window.clearTimeout(n); // 根据setTimeout返回的数字,可以使用clearTimeout清除延时效果
.setInterval(函数名称, 毫秒值); // 根据时间间隔执行函数
.clearInterval() // 取消间隔执行
location 对浏览器地址栏的抽象
location.href 用来获取或改变地址栏的值
location.reload(); // 刷新页面