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总结的主要内容,如果未能解决你的问题,请参考以下文章

javascript笔记基础总结篇

JavaScript入门篇

Vue.js框架知识点总结——入门篇

2021前端面试经常被问到Javascript+HTML5+CSS+框架问题(89篇资料总结)

2021 前端面试经常被问到 Javascript+HTML5+CSS+ 框架问题(89 篇资料总结)

第1719期简明 JavaScript 函数式编程-入门篇