JavaScript入门篇QA总结
Posted HapLe0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript入门篇QA总结相关的知识，希望对你有一定的参考价值。
Q1:JS可以放在哪个位置？
A1：
1.放在<head>标签中，用<script type="text/javascript"></script>来标志这是一段JS代码；
2.放在外部文件中，文件后缀名为.js，用<script src="xx.js" />将外部文件引进html；
3.写在HTML的<body>标签中，通过<script type="text/javascript"></script>来标志这是一段JS代码；
Q2：JS注释怎么写？
A2：JS的注释与Java注释相同，"//"是单行注释，"/* */"是多行注释；
Q3：什么是变量？
A3：变量就是用来存储数值的容器；
JS中定义变量的方法：var a; //定义一个变量a，类型为var（注意：JS中所有变量类型都为var）
给变量赋值：a = 1;
也可以对变量同时定义和赋值：var a = 1;
Q4：JS中的分支判断语句怎么用？
A1：分支判断语句：
if(exp1)
{
//满足exp1时的操作
}
else
{
//不满足exp1时的操作
}
举个栗子：
1 var a = "man"; //定义一个变量a，并给他赋值为字符串"man"; 2 if(a == "man") //如果a 的值等于"man",执行下面花括号内的代码； 3 { 4 alert("男生！"); //弹窗显示"男生!"; 5 } 6 else if(a == "woman") //如果a 的值等于"woman",执行下面花括号内的代码； 7 { 8 alert("女生！"); //弹窗显示"女生!"; 9 } 10 else //前面所有的if都不符合 11 { 12 alert("人妖！"); //弹窗显示"人妖！"; 13 }
Q5：什么是函数？
A5：函数是完成某个特定功能的代码块;
解释：我们把完成特定功能的代码放到一个代码块里，给它起个名字，以后用到就直接通过名字来调用；
定义函数：
function 函数名()
{
//函数代码；
}
举个栗子：
1 function add() 2 { 3 //这个函数的作用是将两个数相加,并弹窗显示 4 var a = 1; 5 var b = 2; 6 var sum = a + b; 7 alert(sum); 8 }
Q6:JS中常见的内置方法有哪些？
A6：
1.document.write("显示在页面上的文字"); //直接向HTML输出流写内容，即直接显示在页面上
2.alert("弹窗显示的文字"); // 警告对话框(消息对话框)
3.conform(); // 确认对话框(有返回值和参数，详见例子)
4.prompt(); // 提问对话框(有返回值和参数，详见例子)
5.window.open(); // 打开新窗口(多个可选参数)
6.window.close(); // 关闭当前窗口（如果想关闭指定窗口则先获取指定窗口对象obj，再使用此方法关闭，obj.close();）
举个栗子：
1 <script type="text/javascript"> 2 var result = confirm("你是男生吗？"); //点击确认按钮返回true， 3 if(result == true) 4 { 5 alert("你是男生"); 6 } 7 else 8 { 9 alert("你是女生"); 10 } 11 </script>
1 <script type="javascript"> 2 function tiwen() 3 { 4 var obj = prompt("你叫什么名字？","小华"); //obj为输入框中输入的值，默认为第二个参数值:"小华" 5 alert(obj); //警告弹框显示结果 6 } 7 </script>
1 <script type="javascript"> 2 function openwindow(){ 3 var obj = window.open("http://www.baidu.com","_blank","width=600px,height=300px,top=500px,left=500px"); 4 } 5 </script>
1 <script type="javascript"> 2 function clozen() { 3 var obj = var obj = window.open("http://www.baidu.com","_blank","width=600px,height=300px,top=500px,left=500px"); 4 obj.close(); //关闭指定对象 5 6 window.close(); //关闭当前窗口 7 } 8 </script>
Q7：常用的获取DOM节点的方法：
A7：
1. var a = document.getElementById("id的值"); //通过标签的id属性获取该节点
2. var b = document.getElementsByName("name的值"); //通过标签的name属性获取节点
3. var c = document.getElelentsByTagName("标签名称"); //通过标签名称获取节点
举个栗子：
1 function getNode(){ 2 var a = document.getElementById("add"); 3 var b = document.getElementsByName("confirm"); 4 var c = document.getElementsByTagName("input"); 5 alert(a); 6 alert(b); 7 alert(c); 8 }
Q8：如何操纵DOM节点来改变HTML的内容和样式？
A8：
1.通过节点的innerHTML属性来获取和改变标签内的文本：
举个栗子：
1 function changeDOM() 2 { 3 var divdom = document.getElementById("title1"); 4 var text = divdom.innerHTML; 5 alert(text); 6 divdom.innerHTML = "变成标题二"; 7 alert(divdom.innerHTML); 8 }
2.通过节点的style属性改变样式：
举个栗子：
1 <p id="pcon">Hello World!</p> 2 <script> 3 var mychar = document.getElementById("pcon"); 4 mychar.style.color="red"; //颜色设为红色 5 mychar.style.fontSize="20"; //字体大小设为20； 6 mychar.style.backgroundColor ="blue"; //背景颜色设为蓝色 7 mychar.style.display="none"; //隐藏标签块 8 mychar.style.display="block"; //显示标签块 9 </script>
3.通过给节点的class赋值来增加节点的样式：
举个栗子：
1 <style type="text/css"> 2 .style1{ 3 color:red; 4 font-size:20; 5 backgroundColor:blue; 6 } 7 </style> 8 <p id="pcon">Hello World!</p> 9 <script> 10 var mychar = document.getElementById("pcon"); 11 mychar.className = "style1"; 12 </script>
以上是关于JavaScript入门篇QA总结的主要内容，如果未能解决你的问题，请参考以下文章
2021前端面试经常被问到Javascript+HTML5+CSS+框架问题（89篇资料总结）