提示：笔者本身具有多种编程语言基础，因此本文只是简单记录一下JavaScript一些特性。
完全零接触的朋友可以绕道，也可以硬刚！

本文是参考慕课网的课程，点击链接可直达

笔者认为，学习编程最重要的必然是实践，如果只是记忆一些理论，那么遇到问题还是不能够解决，而且也记不住！因此，本文将改变本专栏前端学习之路之前的风格，以实际的例子分析出现的知识点。

文章目录

实例一:
- 如何插入JS
- - 在html中代码中
  - 引用JS外部文件
- 变量、函数、if判断语句、输出内容
- 与用户交互
实例二
- 通过ID获取元素
- 显示/隐藏元素和修改元素的样式
- 将设置的样式全部取消

实例一:

分析该实例中的代码，并且说明实现了什么功能。（答案本文后有）

<!DOCTYPE html>
<html><head><title> new document </title>  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>     <script type="text/javascript">  function openWindow(){  var message=confirm("你要打开新的窗口吗");if(message==true){var url="http：//www.imooc.com/";url=prompt("请输入要打开的网址：",url);document.write(url);
window.open(url,'_blank','width=400,height=500,toolbar=no,menubar=no');}}</script>   </head>  <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body>
</html>

文档对象模型DOM（Document Object Model）定义访问HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

将HTML代码分解为DOM节点层次图:

元素节点	文本节点	属性节点
标签	向用户展示的内容	元素属性，如`<a>`标签的链接属性href=“http://www.imooc.com”。

如何插入JS

JS文件可以放在HTML文件的<head>中，也可放在<body>中。

在html中代码中

在本实例中，JavaScript就是写在<script> </script> 标签中。

引用JS外部文件

第一步：另外写个js文件
第二步：在HTML文件中需要添加引用语句

<!--script.js是js外部文件的名字-->
<script src="script.js"></script>

变量、函数、if判断语句、输出内容

变量 var

var number=8;

函数

function 函数名(){}

调用函数就是

函数名();

if 语句
与 JAVA语句差不多
输出内容

document.write("内容<br>");
document.write(变量名);
document.write(变量名+"!");

与用户交互

alert	confirm	prompt	window.open	window.close
类似C#中的MessageBox	返回值是Boolean

alert

alert("hello!");

confirm

confirm("你喜欢JavaScript吗？");

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

prompt("请输入你的姓名", "小红");

参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改 str2 内容可以当成是默认内容

返回值:

点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回null

window.open

//返回mywin 是对象
mywin=window.open([URL], [窗口名称], [参数字符串])

/*url*/
/*窗口名称 '_blank':在新窗口显示
//'_self': 在当前窗口显示目标
'_top' : 框架网页中在上部窗口中显示目标网页
*/
/*参数字符串*/window.open('http://www.imooc.com',
'_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

window.close

<窗口对象>.close();   //关闭指定的窗口

按钮点击事件
点击该按钮回调用 openWindow() 函数

<input type="button" value="显示在按钮上的字" onclick="openWindow()" />

<!DOCTYPE html>
<html><head><title> new document </title>  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>     <script type="text/javascript">  /*函数的定义方式*/function openWindow(){// 新窗口打开时弹出确认框，是否打开新的窗口// message有两个取值 true和false，取决于弹窗中你按的是确定还是取消var message=confirm("你要打开新的窗口吗");//确认打开新的窗口if(message==true){// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/ var url="http：//www.imooc.com/";url=prompt("请输入要打开的网址：",url);//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。window.open(url,'_blank','width=400,height=500,toolbar=no,menubar=no');}}</script>   </head>
//设置按钮的点击事件<input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body>
</html>

功能：制作新按钮，按钮上面写着“新窗口打开网站” ，点击打开新窗口。

任务
1、新窗口打开时弹出确认框，是否打开
提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。

2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/ ，默认的网址可以将其放入prompt的str2。

3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

实例二

分析该实例中的代码，并且说明实现了什么功能。（答案本文后有）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{height:400px;width:400px;border:#333 solid 1px;padding:5px;}
p{line-height:18px;text-indent:2em;}
</style>
</head>
<body><h2 id="con">JavaScript课程</H2><div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5><p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p><p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p><p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p></div><form><!--当点击相应按钮，执行相应操作，为按钮添加相应事件--><input type="button" onclick="changeColor()" value="改变颜色"  >  <input type="button" onclick="changeWidth()" value="改变宽高" ><input type="button" onclick="hide()" value="隐藏内容" ><input type="button"  onclick="display()" value="显示内容" ><input type="button" onclick="cancel()" value="取消设置" ></form><script type="text/javascript">
//定义"改变颜色"的函数
function changeColor(){var txt=document.getElementById("txt");txt.style.color="red";txt.style.backgroundColor="black";
}//定义"改变宽高"的函数，带有px单位！
function changeWidth(){var txt=document.getElementById("txt");txt.style.width="300px";txt.style.height="200px";
}//定义"隐藏内容"的函数
function hide(){var txt=document.getElementById("txt");txt.style.display="none";
}//定义"显示内容"的函数
function display(){var txt=document.getElementById("txt");txt.style.display="block";
}
v//定义"取消设置"的函数
function cancel(){var message=confirm("你想要取消所有的设置吗？")if(message==true){var txt=document.getElementById("txt");txt.removeAttribute("style");}else{}
}</script>
</body>
</html>

通过ID获取元素

获取到的是一个对象，结果值是null或[object HTMLParagraphElement]
就好像我们打印一个数组，获得的是它的地址，要获得和修改真正的内容需要用到inderHTML属性。

var myId=document.getElementById("id") ;document.write(myId.innerHTML);//获得
myId.innerHTML="字符串";//修改myId元素的内容

显示/隐藏元素和修改元素的样式

//注意有双引号
//隐藏元素Object.style.display="none";//显示元素Object.style.display="block";mychar.style.color="red";mychar.style.fontSize="20";mychar.style.backgroundColor ="blue";

样式表

将设置的样式全部取消

 Object.removeAttribute("style");

JavaScript 入门知识点总结相关推荐

javascript入门知识点总结(一)
总结一下原生javascript的基本知识点,希望对新手有所帮助. 一.javascript基本知识变量定义: var a = 123; var b = 'abc'; //连写 var a = 1 ...
JavaScript入门经典(第4版)
循序渐进精细讲解所有JavaScript知识点指导您构建建出神入化的完美Web应用程序 JavaScript入门经典(第4版) 基本信息原书名: Beginning JavaScript 原出版社 ...
JavaScript 入门哪本书最好？(问、答) 《转载》
司徒正美,JS魔法师,去哪儿网前端架构师知乎用户.zinwa.lin.Yang 等人赞同入门可以看<javascript高级程序设计>与<javascript dom 编程艺术& ...
零基础JavaScript入门（第三天）
一.JavaScript 流程控制-循环 1.循环循环目的 :实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句 JS 中的循环在Js 中,主要有三种类型的循 ...
JavaScript入门(二)
JavaScript入门(二) 哔哩哔哩链接:https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0 七.代码讲解部分 ...
JavaScript 入门（上）
目录一.JavaScript简介二.JavaScript的特点 1.动态改变页面内容 2.动态改变网页的外观 3.验证表单数据 4.响应事件三.内容 1.JavaScript简介一.JavaS ...
经典的JavaScript入门书
经典的 JavaScript 入门书 --<JavaScript基础教程(第7版)> 原版销售累计超过 150 000 册! 欢迎你使用 JavaScript !使用这种容易上手的程序设计 ...
原版销售累计超过150 000册的经典JavaScript入门书
媒体评论如果你要学习 JavaScript,本书绝对不容错过. --JavaScript.about.com 一本伟大的 JavaScript入门书!适合初级程序员和 Web设计师. --Amazo ...
javaScript常用知识点有哪些
javaScript常用知识点有哪些一.总结一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...

JavaScript 入门知识点总结