javascript java 先学_Java学习--初学JavaScript

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 = "

aaaaa"; // 把标签去掉， 只留内容

str.replace(/

/, "").replace(//,""); // 替换了两次

str.replace(/(

|)/g, "");

var str = "

aap>aaa"; // aaaaa

// 分组替换

/(

)(.+)()/g

$1 表示第一个分组

$2 表示第二个分组

...

str.replace(/(

)(.+)()/g, "$1");

str.replace(/(

)(.+)()/g, "$2");

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

例如：给内容赋值时"aaa"

这时 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

function fun1() {

document.getElementById("img1").src = "2.jpg";

}

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代表触发了事件的标签对象

例如

这里的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(); // 刷新页面