JavaScript学习

Posted 2020-11-19 疯子姓张

前提知识：

　　编译：程序语言变为机器语言的过程。

　　解释性语言：执行一行，编译一行。编译性语言：执行前，编译所有代码。

　　编译性语言：shell,javascript,html,python

　　编译性语言：Java

一、是什么？

JavaScript 是脚本语言。可插入HTML页面的编程代码，可由所有的现代浏览器执行。

注意：

　　1 HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

　　2 <script src="myScript.js"></script>

　　3 JavaScript 对大小写是敏感的。

　　4 JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。(顺序执行)

　　5 JavaScript 是面向对象的语言，但 JavaScript 不使用类。

       6 在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

　　7JavaScript 基于 prototype，而不是基于类的。

　　8  prototype允许我们在创建对象之后来改变对象或类的行为，并且这些通过prototype属性添加的字段或方法所有对象实例是共享的。

二、有哪些功能呢？

1 可以调用HTML DOM（操作HTML元素）

2 可以调用Window ( BOM )

3 自己的功能

三、JS语法

3.1 变量

变量声明  var x=2; 注意（undefined）

 

局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

注意：如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。carname="Volvo";(不提倡！！！)

3.2 数据类型
所有的数据类型：1 字符串、2 数字、3 布尔、4 数组、5 对象、6 Null、7 Undefined

3.3 对象（可自定义）

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

function person(firstname,lastname,age,eyecolor)
{    
    //属性
    this.firstname=firstname;
　　 this.lastname=lastname;
　　 this.age=age;
　　 this.eyecolor=eyecolor;

   //方法
　　this.changeName=changeName;
　　function changeName(name)
　　{    
　　　　this.lastname=name;
　　}
}

3.4 函数

function functionname()
{
     这里是要执行的代码
}

3.5 运算符

1 算术：+、-、*、/、%、++、--

2 赋值：=、+=、-=、*=、/=、%=

3 比较 == ===（全等，值和类型） != > < >= <=

4 逻辑 && || ！

5 条件 ？：

 

3.6 控制流

分支：

1 if 
2 if...else 
3 if...else if....else 
4 switch 

循环：

1 for
2 for/in 
3 while 
4 do/while 

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

注意：
continue 语句只能用在循环中。
break 语句用在循环或 switch 中，还可以用在跳出代码块！

奇怪用法：通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

cars=["BMW","Volvo","Saab","Ford"];
list:
{
    document.write(cars[0] + "<br>");
    document.write(cars[1] + "<br>");
    document.write(cars[2] + "<br>");
    break list;
    document.write(cars[3] + "<br>");
    document.write(cars[4] + "<br>");
    document.write(cars[5] + "<br>");
}

 

var day=new Date().getDay();
switch (day)
{
    case 6:x="Today it‘s Saturday";
    break;
    case 0:x="Today it‘s Sunday";
    break;
    default:
    x="Looking forward to the Weekend";
}

3.7 错误

try-catch 
throw   自定义错误。

//throw exception exception可以是 JavaScript 字符串、数字、逻辑值或对象。 

3.8 注释

单行注释以 //

多行注释以 /* 开始，以 */ 结尾。

 

四、HTMl DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

　　1 JavaScript 能够改变页面中的所有 HTML 元素
　　2 JavaScript 能够改变页面中的所有 HTML 属性
　　3 JavaScript 能够改变页面中的所有 CSS 样式
　　4 JavaScript 能够对页面中的所有事件做出反应

//元素属性
document.getElementById(id).attribute=new value

//CSS样式
document.getElementById(id).style.property=new style

 

注意：HTMl DOM 事件：所有 http://www.w3school.com.cn/jsref/dom_obj_event.asp

五、JS 对象（有可以调用的属性和方法）：

1 数字、2 字符串、3 日期、4 数组、5 逻辑、6 算数、7 正则表达式

数字属性和方法 http://www.w3school.com.cn/jsref/jsref_obj_number.asp

字符串属性和方法：http://www.w3school.com.cn/jsref/jsref_obj_string.asp

日期的属性和方法：http://www.w3school.com.cn/jsref/jsref_obj_date.asp

布尔的属性和方法：http://www.w3school.com.cn/jsref/jsref_obj_boolean.asp

正则的属性和方法：http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

算数的属性和方法：http://www.w3school.com.cn/jsref/jsref_obj_math.asp

//算数：执行常见的算数任务。
document.write(Math.random())

//----------

//正则：
var patt1=new RegExp("e");

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

-------

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是： true

//-----

//exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：e


//----

//compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

输出为：turefalse

六、JS BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

6.1 Window

所有浏览器都支持 window 对象。它表示浏览器窗口。
JavaScript 全局变量是 window 对象的属性。 JavaScript 全局函数是 window 对象的方法。
HTML DOM 的 document 也是 window 对象的属性之一
window.document.getElementById("header");=document.getElementById("header");

浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth

------------

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

6.2 Screen

window.screen 对象包含有关用户屏幕的信息。

screen.availWidth - 可用的屏幕宽度 像素
screen.availHeight - 可用的屏幕高度 像素

 

6.3 Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。

6.4 History

window.history 对象包含浏览器的历史。

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

 

6.5 Navigator（不用）

window.navigator 对象包含有关访问者浏览器的信息。(不用的原因是获取的信息可能是被使用者修改的，不真实)

//所以用别的方法检测浏览器

浏览器检测：

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

if(window.opera){
    //说明是opera浏览器！ 
}

 

6.6 PopupAlert（消息框）

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框：alert("文本")
确认框：confirm("文本")
提示框：prompt("文本","默认值") 需要填写东西

 

6.7 Timing（定时任务）

setTimeout("javascript语句",毫秒)     未来的某时执行代码

clearTimeout(setTimeout_variable)   取消setTimeout()

------------------

t=setTimeout("timedCount()",1000)
clearTimeout(t)

 

6.8 Cookies

cookie 用来识别用户。

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

创建和存储 cookie document.cookie

七、JS库

JavaScript 库 - jQuery、Prototype、MooTools。
这些 JavaScript 库常被称为 JavaScript 框架。

注意：
您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。Prototype 它是包含属性和方法的库，用于操作 HTML DOM。

注意：Prototype库和Prototype属性不是一个东西！！！！

prototype属性  允许我们在创建对象之后来改变对象或类的行为，并且这些通过prototype属性添加的字段或方法所有对象实例是共享的。