目录
1,JS不需要main方法,如果语句在函数外部,在JS加载完成时就会执行,如果在函数内部再函数被调用时才会执行
Java中程序的入口时main方法,必须存在main
2,JS中的一行一条语句,可以不使用;结尾
Java中每条语句的结束,必须使用;结尾
3,JS中数据有类型,但变量没有类型(所有的数据都会被看作成对象类型,所以没有类型),用java的视角,JS的变量就是 Object a = 1; a = “str” a = [1,2,3];等等,所以JS中变量不限制数据类型。
Java中数据有类型,变量也有类型
var a; //不赋初始值
var a = 100 ; // 赋初始值
变量的作用域:
以{}划分作用域
var b = 20;
{
var a = 100;
}
出了{},a就无法使用了,b时全局变量,都可以使用
数据类型:NUmber
布尔类型:true / false
字符类型:使用“” 或者‘’来定义
模板字符串:使用反引号``(ESC下面的键)
var str = "hello"; var s = "world ${str}" //输出world hello ,相当于使用str,填充到${}这个占位中,相当于java中的printf("world %s",str),
不存在的特殊类型:
undefined:(未定义)
null:(空值)
JS中的 == 相当于java中的equals()方法,
JS中的== :带类型转换的比较 0 == ‘0’ -》true
0 === ‘0’ : 不带类型转换的比较 -》false
JS中,非0为真,0为假
JS中数组 = 数组 + 顺序表的合集
JS的数组长度可变,可以利用下标操作,允许不连续,允许下标错误。
- let arr = new Array();//let定义数组
- let arr = [];
- var arr = [];
- //这两种方法和new array()一样的效果,可以不指定数组的长度,遍历可以使用下标,及数组和顺序表
- arr[0] = 1;//此时的arr[1]为undefined状态,可以不连续
- arr[2] = 3;
- for(var i = 0 ; i < 3 ;i ++){
- console.log(arr[i])
- }
- arr.push(4);//尾插到数组中,此时数组中的长度为4,arr[3]的值为4
JS中的数组现象跟java中的数组+顺序表方式相同。
数组中元素也是没有元素类型,可以是一个任意组合类型组合的数组(JS中所有变量就相当于java中Object对象)
- var a = []
- a = [1,2,'a',"bc",true,[],undefined];
1,定义数组:var a = [];
2,数组长度:a.length;
3,访问数据:a[0]
4,遍历数组:for(var i = 0;i < a.length ; i++){ ....} / for(var i in a){....}
5,顺序表的操作:
5.1尾插:a.push(12) //返回数组的长度
5.2尾删:a.pop() //删除最后一个元素,返回删除元素的值
5.3头插:a.unshift(1,2,3)//连续头插三个元素,连续插入的一组数是顺序插入的
5.4头删:a.shift()//删除头部元素,返回删除的值
function add(x,y){ return x + y}
function是关键字,定义函数必须存在,没有返回值类型和参数类型,并且可以传递和参数列表个数不同的形参
调用函数:add(1,2) (add;这种不是调用add方法)
- function sub (x,y){ return x-y; }//定义函数
- sub(1,2)//调用函数
所以JS中不存在重载
函数再JS中也是一种数据类型,可以正常的被进行赋值操作
- var fff = function sum(f,a,b){//将函数赋值变量,就是匿名函数
- return f(a,b)
- }
所有数据类型都是”对象“(数字,布尔,字符,函数,异常,数组)
- var person = {
- name:'lisa',
- age:'20',
- fun: function(params) {
- console.log(this.name)
- }
- }
JS中,使用new关键字,则返回的是一个已定义的对象,如果不加new ,对象是函数的返回值
this的使用:当前对象的本身
window:前端页面自带一个window对象,代表浏览器的窗口,在页面中定义的属性,函数都一个通过 window.属性名获取,this指代的也是window这个对象
document:浏览器上的内容部分,页面的文档对象模型
学会使用在DOM对象对文件进行检索:document.querySelector(.....)//只找到符合条件的第一个元素(页面中第一次出现该选择器的标签),document.selectorAll(....)//检索全部符合条件的元素
使用document.querySelector()和document.querySelectorAll(),都会获取指定的标签
例如:搜索百度一下按钮
document.querySelector("#su")
1,更新标签
element.innerHTML = " .... ";//获取element标签的内容,对element的内容进行修改,添加,删除,可以修改里面的标签内容,也可以修改文本
2,构造标签
document.createElement('div') //构造一个div标签
document.createElement('img') //构造一个img标签
1,页面加载完成时立即执行
2,和时间进行绑定,一段时间后执行一次
setTimeout(函数名,毫秒数) 一段时间之后执行一次
setInterval(函数名,毫秒数),每隔一段时间就执行一次
3,当发生在某个事件(可能事件源来自于用户的动作)后,执行
1),事件源:用户点击了某一按钮,这个按钮就是事件源
2),事件类型:点击事件:onClick(),获取焦点事件:focus,鼠标滑过事件:hover
3),事件处理流程:
当事件触发时,浏览器将事件源,绑定事件源(事件源.事件类型 = 函数名称(只是函数名,不是函数的调用) 或 )
- DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
- <title>Titletitle>
- head>
- <body>
-
- <button>点我添加时间button>
- <div class="时间div">div>
-
- <script>
- //1,获取事件源
- var but = document.querySelector("button")
- var timediv = document.querySelector(".时间div");
-
- function gettime(){
- var now = new Date();
- timediv.innerHTML += ` ${now} `;
- }
-
- //绑定事件源,鼠标点击添加一行
- but.onclick = gettime;
-
- //鼠标离开清空
- but.onmouseleave = function () {
- timediv.innerHTML = ''
- }
-
- script>
- body>
- html>