JS

1.JS的作用

2.ECMAScript(标准、核心部分) ES3 ES5 ES6 ES7

3.JavaScript的组成部分

a) ECMAScript(标准、核心部分) 基本的语法

b) DOM(Document Object Model文档对象模型)

c) BOM(浏览对象模型)

4.js可以写在什么地方

a) 可以写在head头里

b) 可以写在body的最后

c) 区别：如果写在头里面，当页面加载的时候首先会执行js,然后才会加载其它的内容，如果写在body里面：它会先加载页面的内容，然后再执行js脚本

5.js可以写入输出 对事件做出反应 改变html的内容

可以改变样式 可以对表单做验证

6. ECMAScript中有5种简单数据类型：

Undefined、Null、Boolean、Number和String。还有一种复杂数据类型——Object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。

7. 函数的声明

1.普通的函数声明

function box(num1, num2) {

return num1+ num2;

}

2.使用变量初始化函数

var box= function(num1, num2) {

return num1 + num2;

};

Js中除了自定义对象之外还提供了一些内置对象：String

Date Array

Array:在文档中提供了三个属性

|

constructor

|

返回对创建此对象的数组函数的引用。

|
|

length

|

设置或返回数组中元素的数目。

|
|

prototype

|

使您有能力向对象添加属性和方法。

|

函数的总结

1.当一个函数没有明确的返回值的时候，返回的值就是undefined

2.在使用return的时候，函数就会停止执行。并返回指定的值(具体的值/函数)。

3.return会返回唯一的一个值，那么也可以返回一个函数

<script type="text/javascript">

var box = function() {

var a = 1;

return function(){

alert(a++);

}

alert(a);

}

var newFunction = box();

alert(newFunction());

</script>

4.匿名函数

d) 如何定义

function(){

return “这是一个匿名函数”

}

5.函数的自执行

(function(){

alert("这是一个自执行函数");

})();

//如果有参数

(function(age){

alert(age);

})(10);

1. 在JS中函数的参数也可以传递函数function

function box(sumFunction,num) {

return sumFunction(num);

}

var sum = function(num){

return num+10;

}

var result = box(sum,10);

alert(result);

BOM: 浏览器对象模型（Browser Object Model (BOM)****）允许 JavaScript 与浏览器对话。

浏览器对象模型包含的对象：

· Window: 所有浏览器都支持window对象。它代表浏览器的窗口。

· Navigator

· Screen

· History：对象包含浏览器历史。****history.back() history.forward()

· Location: 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

HTML DOM 树

[图片上传失败...(image-4a6e77-1559122170193)]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

· JavaScript 能够改变页面中的所有 HTML 元素

· JavaScript 能够改变页面中的所有 HTML 属性

· JavaScript 能够改变页面中的所有 CSS 样式

· JavaScript 能够对页面中的所有事件做出反应

Window对象的方法

|

setInterval()

|

按照指定的周期（以毫秒计）来调用函数或计算表达式。

|
|

setTimeout()

|

在指定的毫秒数后调用函数或计算表达式。

|
|

alert()

|

显示带有一段消息和一个确认按钮的警告框。

|
|

confirm()

|

显示带有一段消息以及确认按钮和取消按钮的对话框。

|
|

prompt()

|

显示可提示用户输入的对话框。

|

注意:setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别

Location对象：href reload()

History对象：

|

back()

|

加载 history 列表中的前一个 URL。

|
|

forward()

|

加载 history 列表中的下一个 URL。

|
|

go()

|

加载 history 列表中的某个具体页面。

|

Window.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

|

getElementById()

|

根据id来查询节点元素

|
|

getElementsByName()

|

返回带有指定名称的对象集合。

|
|

getElementsByTagName()

|

返回带有指定标签名的对象集合。

|
关于Html,css,js的基础

P ul ol hr br strong em form input a img

Span div table select option header nav

Section footer aside

表单的元素：text password button submit reset

Radio checkbox file hidden date textarea

CSS:

外部样式表：不需要<style>标签 使用link标签来调用外部样式表，有什么好处？可以使网站简洁，风格统一。

JS:

1.JS中的对象：自定义对象 内置对象Array

String

RegExp

以下对象都属于BOM

Window

Navigator

Screen

History:go(-1) back()加载 history 列表中的前一个 URL。Forward()加载 history 列表中的下一个 URL。

Location:reload()方法 属性href

2.获取元素的三种方法：getElementById() getElementsByName() getElementsByTagName();

<script type="text/javascript">

function getValue() {

var x = document.getElementById("username").value;正确的

document.username.value;不正确的

document.form1.username.value;正确的

alert(x);

}

</script>

<form action="" method="post" name=”form1”>

<input type="text" id="username" />

<input type="button" value="ok" onclick="getValue()"/>

</form>

Html中每个标签都会对应一个DOM对象

1.setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别

<pre style="margin-top:6.65pt;background:whitesmoke;border:none;mso-border-alt:dotted #778855 .5pt;
padding:0cm;mso-padding-alt:9.0pt 9.0pt 9.0pt 9.0pt">基本语法：setInterval(code,millisec[,"lang"])</pre>

setInterval(“show()”,50)在指定的周期内执行多次show()方法

setTimeout(“show()”,50)在50毫秒后调用一次show方法

2. Form 对象中elements[]的用法

求表单元素的个数

var x = document.form1.elements.length;

var x = document.form1.length;

document.form1.elements[0]****获取到表单中指定的元素

5.****如何向****select****中动态的添加****option****选项

selTerm.add(new Option(i),null);

如何清空下拉框中的选项

selCourse.options.length =0;

3.****通过****js****可以动态改变样式

<div id="imageLayer" style="display: none;">dfadf</div>

<script type="text/javascript">

document.getElementById("imageLayer").style.display="block";

</script>

<a href="javascript:history.go(-1)">这是一个链接</a>

表单：****<form action=”****服务器端的资源****” method=”post” id=”form1” name=”form1”></form>

Post****与****get****的区别

表单的元素：****<input type=””>text password file hidden date email radio checkbox select

全局函数

Eval() isNaN() decodeURI()encodeURI()

var a = "3",b="4";

alert(a+"+"+b);

//****如果 x 是特殊的非数字值 NaN****（或者能被转换为这样的值），返回的值就是 true****。如果 x 是其他值****,****则返回 false****。

alert(isNaN(a));//false

//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

alert(eval(a+"+"+b));

目录的结构：****../ / ../../../

如何改变堆叠次序：****z-index

面中的图像加入超链接后，默认情况下都带有一道黑框，如何去掉它呢？

border="0"

在****CSS****中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线

A:hover {TEXT-DECORATION: none}

CSS****有三种选择符，分别是标签选择符，类选择符和****ID****选择器。

通过****readonly****属性可以设置文本框为只读。

<pre style="background:white;word-break:break-all">JS****中的基本数据类型****Number String****Boolean Null</pre>

Undefined

var a=****“****aaaa****”****; parseInt(a) NaN

** var a=****“****2aaa****”，****parseInt(a) 2**

** eval(****“****2+3****”****) 5**

在****HTML5****规范中，定义了****<video>****和****<audio>****标签，请写出标签作用

标签****<video> 元素定义视频：****<video width="1280" height="720" controls src="video.mp4">****您的浏览器不支持 video 标签。****</video> 标签****<audio> 元素定义音频，比如音乐或其他音频流 <audio src=****“****audio.mp3****“ controls>****您的浏览器不支持 audio 标签。****</audio> 属性： autoplay 视频在就绪后马上播放。 controls 向用户显示控件，比如播放按钮。 height 设置视频播放器的高度。 loop 当媒介文件完成播放后再次开始播放。 src 要播放的视频的 URL****。 width 设置视频播放器的宽度。

在****CSS****中，伪类及伪对象是什么，有什么特点

伪类及伪对象：由****CSS****自动支持，属****CSS****的一种扩展型类****名称不能被用户自定义****使用时只能按照标准格式进行应用

function fun(){

return 5;

}

var a=fun ;

var b=fun() ;

a****与****b****有什么区别：****第一个是将函数赋值给****a

第二个****b****的值为****5****，表示调用函数，这个函数的返回值为****5

Vue react react native foundation angularjs

Nodejs webpack glup