1. <script type="text/javascript">
</script>
引用JS外部文件:<script src="script.js"></script>
在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。
JS文件不能直接运行,需嵌入到HTML文件中执行
可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
2. javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。
3. 定义变量使用关键字var,语法如下:
var 变量名
4.变量命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字
5. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量
变量需要先声明,后使用。
6. 定义函数基本语法:
function 函数名()
{
函数代码;
}
7. document.write()
可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容
-
document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
-
document.write(mystr); //直接写变量名,输出变量存储的内容。
-
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
-
document.write(mystr+"<br>");//输出hello后,输出一个换行符
8. alert输出内容,可以是字符串或变量,与document.write 相似
9. confirm 消息对话框通常用于允许用户做选择的动作,弹出对话框(包括一个确定按钮和一个取消按钮)。
confirm(str);
str:在消息对话框中要显示的文本
返回值: Boolean值
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士吗?") ;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
10. prompt
弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
prompt(str1, str2);
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null
<script type="text/javascript">
function rec(){
var score; //score变量,用来存储用户输入的成绩值。
score = prompt("请输入你的成绩:") ;
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
11. 打开新窗口(window.open)
window.open([URL], [窗口名称], [参数字符串])
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
12. 关闭窗口(window.close)
-
window.close(); //关闭本窗口
-
<窗口对象>.close(); //关闭指定的窗口
13.HTML文档可以说由节点构成的集合,三种常见的DOM节点:
- 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
- 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
14. 通过ID获取元素
document.getElementById("id")
直接输出获取的对象,结果:null或[object HTMLParagraphElement]
15. innerHTML 属性用于获取或替换 HTML 元素的内容
Object.innerHTML
16. HTML DOM 允许 JavaScript 改变 HTML 元素的样式
Object.style.property=new style;
property:
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
17. 显示和隐藏的效果,可通过display属性来设置
Object.style.display = value
18. 控制类名(className 属性)
object.className = classname
- 获取元素的class 属性
- 为网页内的某个元素指定一个css样式来更改该元素的外观
19.在 JavaScript 中有 5 种不同的数据类型:
string 、number 、boolean 、object 、function
3 种对象类型:
Object 、Date 、Array
2 个不包含任何值的数据类型:
null 、undefined
20. 短路或 “||” 如果第一项是true 则结果为true 如果第一项为false 结果 为第二项(第二项不做计算直接返回)
21. 在浏览器控制台执行以下代码,输入的结果是()
4400 4401 4399 4400
解析:
首先,题中定义了一个函数,名为test,这个函数内部分别又定义了一个数值变量n和一个闭包函数add,test函数的最后一行代码return{n:n,add:add},实际上是返回了一个object,而这个object中有一个属性n,它的值是n,还有一个方法add,它的值是add。
好了,函数解释清楚,再来看输出的问题。函数外部分别定义了两个变量,result和result2,他们都指向test函数,但是分属两个不同的作用域,这也就解释了答案中1和4,4不会在2的基础上继续n++。
1和2属于闭包函数的问题,可参考阮一峰老师的一篇博文(http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html),简单易懂,借用阮老师博客中所写,闭包的两个最大的用处:一个是可以读取到函数内部的变量,另一个就是让这些变量的值始终保持在内存中,具体可以测试。第二个用途就解释了同一个作用域中答案2会在1的基础上进行+1操作。
答案3是比较令人困惑的一项,追本溯源,前面提到过第6行代码返回了一个有着值为n的属性n和值为add的方法add的匿名对象,在这里,在这个匿名对象中,属性n和方法add是互不相关的,即使在闭包add中改变了变量n的值,result.n的值依然不变。
以上,首答,说了下自己的理解,有不对的地方还望指正。
https://www.nowcoder.com/questionTerminal/4e856ed3a0f24e77b67134888fadc964
22.JavaScript实现继承共6种方式:
原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。
23. for
(var i=0,j=0;i<10,j<6;i++,j++)
for循环第二项是逗号分隔的表达式,其返回值是数个表达式的最后一项,起决定作用的是j<6
24. == 操作符:先转类型,再比较
25. JavaScript是单线程的,浏览器实现了异步的操作,整个js程序是事件驱动的,每个事件都会绑定相应的回调函数
26. Promise/A+规范
- 一个 promise 可能有三种状态:等待(pending)、已完成(fulfilled)、已拒绝(rejected)
- 一个 promise 的状态只可能从 “等待” 转到 “完成” 态或者 “拒绝” 态,不能逆向转换,同时 “完成” 态和 “拒绝” 态不能相互转换
- promise 必须实现
then
方法(可以说,then 就是 promise 的核心),而且 then 必须返回一个 promise,同一个 promise 的 then 可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致 - then 方法接受两个参数,第一个参数是成功时的回调,在 promise 由 “等待” 态转换到 “完成” 态时调用,另一个是失败时的回调,在 promise 由 “等待” 态转换到 “拒绝” 态时调用。同时,then 可以接受另一个 promise 传入,也接受一个 “类 then” 的对象或方法,即 thenable 对象。
typeof 操作符
对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时你会收到一个object 的答案
instanceof 操作符
JavaScript中instanceof运算符会返回一个 Boolean 值,指出对象是否是特定类的一个实例。 使用方法:result = object instanceof class
但是对于array来说,有跨frame对象构建的问题
正确答案:
Object.prototype.toString.call(obj) === '[object Array]';
call改变toString的this引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。也许你要问了,为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是原始的,所以能一定程度保证其“纯洁性”
28.JavaScript RegExp 对象有3个方法:test()、exec()、compile()
- test():检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回true,否则返回false;
- exec():检索字符串中与正则表达式匹配的值,返回一个数组,存放匹配的结果;如果未找到,返回null;
- compile():可以在脚本执行过程中编译正则表达式,也可以改变已有表达式。
注:match是支持正则表达式的String对象的方法
29. js基本数据类型
Number Null Undefined String Boolean
纳尼USB
复杂类型:object array date regexp function
30. 判断对象myObj是否存在的写法
myobj是一个对象,只是存在与不存在的问题,几种表示方法:
1、!obj
2、!window.obj
3、typeof myObj == "undefined(判断对象是否有定义,已定义未赋值,返回true)
4、myObj == undefined(已定义未赋值。返回true)
5、myObj === undefined (已定义未赋值,返回true)
6、!this.hasOwnProperty('myObj'))(判断是否为顶层对象的一个属性)
7、myobj == null(注意null与undefined的区别,ull指的是已经赋值为null的空对象,即这个对象实际上是有值的,而undefined指的是不存在或没有赋值的对象。)
31. hasOwnProperty()
方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。
32.Ajax技术核心就是XMLHttpRequest对象。是一门提供网页局部刷新的技术。
Ajax最大的优点是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。
Ajax技术的工作原理:可以分成3步
1.创建Ajax对象:var xhr = new XMLHttpRequest();
2.xhr 发送请求:xhr.open('get','test.html','true');
xhr.send();
3.xhr获取响应:
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){//请求的状态码
/*
0:请求还没有建立(open执行前)
1:请求建立了还没发送(执行了open)
2:请求正式发送(执行了send)
3:请求已受理,有部分数据可以用,但还没有处理完成
4:请求完全处理完成
*/
alert(xhr.responseText);//返回的数据
}
}
33. requestAnimationFrame是浏览器定时循环操作的一个接口,不是同步操作,for循环执行完后才会执行它的callback
34. JS解析顺序
以下代码执行后, num 的值是?
var foo;//foo#1
var foo=function(x,y){//foo#3//function expression NOT hoisted函数表达式不会被提升
return x-y;
}
function foo(x,y){//foo#2//function declaration hoisting函数声明提升
return x+y;
}
var num=foo(1,2);
匿名函数,需要通过变量引用指向函数的运行结果。
var foo=function(x,y){ //赋值式函数
return x-y;
}
有名函数,可以单独定义。
function foo(x,y){ //声明式函数
return x+y;
}
规则
1. 变量声明、函数声明都会被提升到作用域顶处;
2. 当出现相同名称时,优先级为:变量声明(foo#1) < 函数声明(foo#2) < 变量赋值(foo#3)
35. ◎Math.ceil()向上取整,即它总是将数值向上舍入为最接近的整数;
◎Math.floor()向下取整,即它总是将数值向下舍入为最接近的整数;
◎Math.round()标准取整,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)
36. 常见的不支持冒泡事件:
- focus
- blur
- mouseenter
- mouseleave
- load
- unload
- resize
37. javascript系统方法
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
unEscape:返回字符串ASCI码;可对通过 escape() 编码的字符串进行解码。
escape:返回字符的编码;对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
38. exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
js还有一个test()方法,用于检测字符串是否匹配某个模式,返回值为boolean
39.
//这种是原型的重写第一种 没实例化重写原型
function Person(){};
Person.prototype = {
add :function(){
alert(this.name);
},
name :"aty"
}
var p2 =new Person();
p2.add();//aty 不报错 不信你们可以敲一下代码
原因:重写原型对象切断了现有原型与任何之前
已经存在的实例之间的联系,他们引用的仍然是最初的原型
我们仔细看看这句话,我们并没有在重写原型之前实例化,所以对于实例p2来说 这里依然是相对最初原型
//第二种原型重写 也就是先实例化再重写原型
function Person(){};
var p2 =new Person();
Person.prototype = {
add :function(){
alert(this.name);
},
name :"aty"
};
p2.add();//error
//这里会报错 原因:重写原型对象切断了现有原型与任何之前
已经存在的实例之间的联系,他们引用的仍然是最初的原型
function A() {
this.do=function() {return ‘foo’;};
};
A.prototype=function() {
this.do=function() {return ‘bar’};
};
var x=new A().do();
//很显然这里是第一种而不是第二种 这个时候你是不是在想
为什么是 "foo",不是"bar"呢,你看看
原型上的方法一般怎么写 是A.prototype.方法名
如A.prototype.show=function(){},然后再通过
再通过实例.show()才可以调用,这里直接将原型重写成一个函数
就算修正了constructor,也没有用,
(2019-2-21: 14:36 更正 如下内容)
有A.prototype.do吗显然没有,于是又开始到实例上找有do方法吗
--------------------分割线-----------------------
此处应为 实例上有do 方法吗
有的 所以返回"foo"
40.<a href=”mailto:ming.zhou@nowcoder.com”>发送邮件</a>
mailto后为收件人地址; tel最常用js一键拨号;
41. 注意区分属性和方法,也即有没有()
括号。
node节点有几个常用的属性:
- firstChild
- lastChild
- nextSibling:下一个兄弟节点
- previousSibling:前一个兄弟节点
- parentNode:父节点
这些都是属性,都不需要添加括号的。
42.
typeof 1; //'number'
typeof (1);//'number'
typeof (); //SyntaxError 语法错误
void 0; //undefined
void (0);//undefined
void (); //SyntaxError 语法错误
43.undefined
既是一种数据类型,在浏览器中又是作为全局变量存在的,也就是window
对象下的一个属性。
console.log('undefined' in window); // 输出:true
使用in
关键字可以校验某个对象下是否存在某个属性。这里的意思就是undefined
属性是否在window对象
下存在。
控制台会输出布尔值true
,为一个真值,表示属性是确实存在的。
44. 获取对象的属性
44.1 for…in 循环可以用来遍历对象的属性名
var obj = {
name: '小红',
age: 12,
hobby: ['打篮球', '唱歌'],
};
for (key in obj) {
console.log(obj[key]);
}
//