JavaScript一辆车，入门如上车

超基础的入门JavaScript第一篇

既然是入门，咱先写一些在编写JavaScript代码时，应注意基本的语法规则，避免程序出错：
1.JavaScript严格区分大小写，在编写代码时一定注意大小写的正确。
2.JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。
3.如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。

一、JavaScript的引入方式

行内式行内式是将JavaScript代码作为HTML标签的属性值使用。

<input type="button"value="一个按钮" onclick="alert('这是一个行内的JavaScript引入方式')"/>
<a href="javascript:alert('这是另一个行内的JavaScript引入方式');">JavaScript</a>

嵌入式嵌入式就是使用script标签包裹JavaScript代码，直接编写到HTML文件中。

<script type="text/javascript">
 JavaScript语句
  </script><br>

外链式外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用script标签的src属性引入文件中。
相比嵌入式，外链式的优势有以下3点：
① 嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。
② 嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。
③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

二、变量保存数据

在JavaScript里面有var变量，而且好像只有var变量。
他没有确定的类型，他的类型取决于赋值给他的变量的类型。
也就是说像公交车，不管你是老的少的男的女的都能乘坐一样，数值，字符串都可以用它来声明。
var的本质就是来申明变量的

  var  str1=’白小白’      //申明并赋值
  var  str2=‘China’      //申明并赋值
  str3=‘小黑’            //赋值

此外，还有非常重要的一点”变量的作用域”。

var关键字声明变量，无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这个可以灵活应用。

全局作用域：在最外层定义的变量
局部作用域：在函数内部定义的变量

JS作用域的特点：首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层，即window对象，并操作window对象的属性。

下面来一个经典案例

<script>
var str = 'China';
function t1(){
    var str = 'Japan';
    function t2(){
        var str = 'USA';
        console.log(str);
    }
    t2();
}
t1();
</script>

三、函数

函数这玩意就有点千变万化了，基于js定义方式比较灵活，而且每个人写代码的风格不同，就衍生处理多种多样的js函数的写法，但确实有章可循。如果不理解，看见一段代码就很容易让人手足无措。
咱也是刚开始学习，就先不深入了，函数这一方面会在以后深深的挖掘一下。

多数的语言中的函数都是基于为了解决代码量增多，维护困难、条理不清、阅读困难，使代码模块化、组件化，以便于更好的维护。常将一些常用的功能模块编写成函数，通过调用函数来完成任务。JS也不例外。

在js中有内置函数（自行百度或者csdn里面就有很多这样的文章）和自定义函数两种

 <script type="text/javascript">
   //定义函数
   function sum(a,b){
    var c=a+b;
    return c;
   }
   //调用函数
   document.write(sum(22,33))
  </script>
  //瞅见没？这就是自定义函数

var name = prompt('请输入你的名字：') //这个就是其中一个内置函数

四、对象

刚才说了函数有内置函数和自定义函数两种，而对象也有内置对象和自定义对象两种

首先内置对象
（1） Window对象
window对象是JavaScript与浏览器之间交互的主要接入点。
提供了用于JavaScript脚本控制浏览器的一些接口。
举例：弹出警告框、输入框，或者更改网页文档内容等效果。

//常用输出语句
    alert（）             //警告框
    console.log()        //控制台输出
    document.write()     //文档页面输出
    prompt()             //显示可提示用户进行输入的对话框

（2）document对象
document对象是window对象的属性之一，主要用于与网页文档进行交互。
（3）String对象
在代码中直接定义的字符串，就可以作为对象来使用。
String对象用于对字符串进行处理。

var str = 'apple';   // 定义一个字符串
alert(str.length);  // 获取字符串长度，输出结果：5
alert(str.toUpperCase()); // 获取转换大写后的结果，输出结果：APPLE
alert('aa'.toUpperCase());  // 直接调用字符串的成员方法，输出结果：AA

自定义对象
话不多说上代码

   <script type="text/javascript">
   var Girlfriend ={}         //创建一个女朋友的对象
   Girlfriend.name='白小白';  //为Girlfriend对象添加属性
   Girlfriend.gender='女';
   Girlfriend.age='18';
   document.write(name);    //调用Girlfriend对象的name属性
   //创建Girlfriend对象的introduce介绍方法
   Girlfriend.introduce=function(){                            
    return '她叫'+this.name+'今年'+this.age+'岁了';
   }
   //调用Girlfriend对象的introduce介绍方法
   document.write(Girlfriend.introduce())                    
  </script>

五、事件

JS之所以出现就是为了实现与用户的交互，与用户的一次次交互就是一个个事件。

皇甫振超

发布了1 篇原创文章 · 获赞 2 · 访问量 531

私信关注

JavaScript一辆车，入门如上车

超基础的入门JavaScript第一篇

猜你喜欢