黑马程序员技术交流社区

标题: 【成都校区】JavaScript快速入门 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-5-16 10:41
标题: 【成都校区】JavaScript快速入门
JavaScript快速入门

大家好，本内容是教大家怎么快速的入门javascript的，关于js的学习其实很简单，大家只需要把下面几点弄清楚，js的入门你也成功了，接下来咱们就一起来看一看吧。

• js是什么？
  • 全名叫做javascript，是一个脚本语言（脚本语言是指：一系列的指令，最早出现在演戏的剧本中，台词就称为脚本，只要演员一看到脚本就知道表演什么动作，而在我们计算机应用中，脚本就是指指令，js是嵌套在html代码中的，html是用浏览器打开解析的，js也是可以被浏览器解析的，浏览器能通过解析js的一系列指令就可以做出一系列的动作，所以称为脚本语言），一个独立的编程语言。
    
    
  
  

---

• js的作用是什么？
  • 没有js的页面是死的，不能和用户进行交互，但是如果将一个页面嵌入js代码，这个页面就活了，可以和用户进行交互。
    
    
  
  

---

• js的引入方式是什么？
  • 方式一：<table width="450"><tr><td bgColor="#000000">
    <ol>        <li style="color:red;font-size:14px;">                <script type="text/javascript">        </li>        <li style="color:red;font-size:14px;">        </li>        <li style="color:red;font-size:14px;">                </script>        </li></ol>
    </td></tr></table>
  • 方式二：<table width="450"><tr><td bgColor="#000000">
    <ol>        <li style="color:yellow;font-size:14px;">                <script type="text/javascript" src="../js/check.js"></script>        </li>        </ol>
    </td></tr></table>
    
    
  
  

---

• js的基本语法有哪些？  
  • 变量  js中定义一个变量用var  例：var x = 5;    java中定义变量用数据类型  比如：int x = 5;  
    在java中,一个int类型占4个字节,所以如果我们写int x = 5;在内存中会有一个可以存储4个字节的内存空间，但在js中就不一样了，var不是一个什么类型,它可以存任意类型的数据。  例：var x = 5;  alert(x);  例：x = "abc";  alert(x);  //x='abc'，在js中不管是单引号还是双引号都是字符串,没有字符的概念。  例：x = new Object(); alert(x);  例：x = true; alert(x);  
  • 语句  js的语句和java的语句几乎是一样的。  这里特别需要注意的就是判断条件的值是true还是false问题。  例：  <pre>var x = 5;if(x % 2 == 0) {
    alert(true);
    } else {
    alert(false);
    }</pre><pre>var x = 5;if(x) {
    alert(true);
    } else {
    alert(false);
    }</pre>打印出来的结果是偶数,因为数字只有0会当做false,其他的数都是true。  
    例：  <pre>var x = "abc";if(x) {
    alert(true);
    } else {
    alert(false);
    }</pre>打印出来的结果是true,字符串只有空串是false,其他的是true。  
    例：  <pre>var x = new Object();if(x) {
    alert(true);
    } else {
    alert(false);
    }</pre>打印出来的结果是true,对象只有null是false,其他的是true。  
    例：  <pre>var x;if(x) {
    alert(true);
    } else {
    alert(false);
    }</pre>打印出来的是false,所以只有0,"",null,undefined是false,其他所有的都是true。  
  • 函数  在java中定义函数是：  public void xxx() {System.out.println("xxx");}  在js中定义函数的格式和java不太一样  例：<pre>function xxx() {
    alert("xxx");
    }</pre>  例：  <pre>function getArea(a, b) {
    alert("矩形的面试为:" + a * b);
    }getArea(5, 10);
    </pre>  匿名函数,一般用在事件处理的。  例：<pre>window.onload = function() {//页面加载完毕时执行匿名函数
    alert(弹出一个对话框);
    }</pre>  
  • 数组  Java中数组是一个容器,但是长度不可以变,类型必须一致。  js中数组可以存任意类型元素,长度可变,类似java中的list集合。  在js中定义数组容器：var arr = [1,2,3];
    
    
  
  

---

• js的事件处理方式有哪些？
  • 方式一:
    • 写html的事件属性<table width="450"><tr><td bgColor="#000000"><ol><li style="color:red;font-size:14px;">
      <input type="button" value="点我啊!"c183" mdtype="paragraph" style="box-sizing: border-box; -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; width: inherit; position: relative;"></li><li style="color:red;font-size:14px;"><script type="text/javascript">
      </li><li style="color:red;font-size:14px;">
              function xxx() {
      </li><li style="color:red;font-size:14px;">                                        alert("点你怎么啦!");</li><li style="color:red;font-size:14px;">        }</li><li style="color:red;font-size:14px;">
      </script>
      </li></ol></td></tr></table>
      
      
  • 方式二
    • 通过js内置对象document获取元素对象<table width="450"><tr><td bgColor="#000000"><ol><li style="color:yellow;font-size:14px;">
      <input type="button" value="点我啊!" id="bt">
      </li><li style="color:yellow;font-size:14px;">
      <script type="text/javascript">
      </li><li style="color:yellow;font-size:14px;">
              window.onload = function() {
      </li><li style="color:yellow;font-size:14px;">
                      var bt = document.getElementById("bt");
      </li><li style="color:yellow;font-size:14px;">
                      bt.onclick = function() {
      </li><li style="color:yellow;font-size:14px;">
                                      alert("点你怎么啦!");
      </li><li style="color:yellow;font-size:14px;">
                      }
      </li><li style="color:yellow;font-size:14px;">        }</li><li style="color:yellow;font-size:14px;">
      </script>
      </li></ol></td></tr></table>
      
      
    
    
  
  

---

js的最简单的基本入门就到这里，大家是不是感觉学习js其实并不难呢，那就抽出时间实际动手操作操作吧，咱们下次见~

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2