Javascript 基础语法学习

编程语言的基础大都相似。变量、函数、数据类型，还有分支结构、循环等等。
js与PHP不同的主要点就是,js没有类，但是所有事物都是对象。从一个字符串到HTML，都是它的对象

1. 什么是Javascript

javascript是一门web脚本语言，可以嵌入HTML文档中，主要用于增强HTML页面功能，如动态展示和交互。
以下简称js

2.js代码的使用方法

js有两种使用方式，
一是代码直接写在HTML文档<script></script>标签中
二是代码写在.js文件中,然后在HTML文档中的<script src="1.js"></script>标签的src属性引入js文件。如果script标签添加了src属性，将忽略标签中的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JAVASCRIPTE</title>
  </head>
  <body>
    <script>
      document.getElementById("title3").style.color = "green";
    </script>
    <h2 id="title1">JS代码演示1</h2>
    <h2 id="title2">JS代码演示2</h2>
    <h2 id="title3">JS代码演示3</h2>
    <!--因HTML代码的执行顺序问题，把js代码放<h2>之后，否则不生效-->
    <script>
      document.getElementById("title1").style.color = "red";
    </script>
    <script src="1.js"></script>
  </body>
</html>

1.js

document.getElementById("title2").style.color = "blue";

效果图:title3因为js代码在前，没生效

3. js基本语法

js作为一门编程语言，跟其它语言一样，也有变量、函数、对象的概念
console.log(‘hi’)可以在浏览器控制台打印括号中的内容

3.1 变量

js变量的声明要使用var关键字，如: var name='小王';es6版本也可以使用let和const定义变量和常量
变量命名必须以字母、下划线”_”或者”$”为开头，推荐使用驼峰式命名
js变量区分大小写，name和Name是定义了两个不同的变量

<script>
      var name;
      name = 10; //数值型
      name = "abc"; //字符型
      console.log(Name);//ReferenceError: Name is not defined /Name未定义
</script>

3.2 数据类型

原始数据类型：number、string、boolean
特殊类型：null、undefined
对象类型：object、array、function
js变量为弱类型，可以存放任意类型的数据

<script>
      var user;
      user = 10; //数值型
      user = "abc"; //字符型
      user = true; //bolean
      user = null;//null,一般表示空对象
      user = undefined;//undefined,用于表示非对象类型的空值
      user = ['21','dsj',23,null];//数组
      user = { name: "admin",phone:"524566" };//对象
      user = function(a,b){return a*b;}//函数
    </script>

3.3 分支结构

js中分支结构有两种，if语句和switch。或者可以分为单分支和多分支结构。与PHP语言一样

<script>
 var user;
      user = "admin";
      //if else
      if (user == "admin") {
        console.log("欢迎您！" + user);
      } else if (user == "guest") {
        console.log("游客您好！");
      } else {
        console.log("您无此权限");
      }
      //switch 与if else一样的效果，但是更直观，适合多分支
      switch (user) {
        case "admin":
          console.log("欢迎您！" + user);
          break;//满足条件跳出当前，不执行后面的case
        case "guest":
          console.log("游客您好！");
          break;
        default:
          console.log("请注册！");
      }
</script>

3.4 循环结构

js中的for循环和while循环，以及do~while循环

<script>
      var sum = 0;
      //满足条件执行
      for (var i = 10; i > 0; i--) {
        sum += i;
      }
      console.log(sum); //55
      var i = 1;
      //满足条件后再执行
      while (i < 11) {
        sum -= i;
        i++;
      }
      console.log(sum); //0
      //执行一次后，再判断条件是否执行下次
      do {
        sum -= i;
        i++;
      } while (i < 11);
      console.log(sum); //-11
    </script>

3.4 函数

js的函数也与PHP一样，通过关键字function声明：function 函数名（参数）{函数体}
但是js中的函数名区分大小写
函数作用域：函数中声明的变量，只能再函数中生效

<script>
      function buy(goods) {
        console.log("今天买了2个" + goods);
      }
      function Buy(goods) {
        console.log("今天买了1个" + goods);
      }
      Buy("大西瓜"); //今天买了1个大西瓜
      buy("大西瓜"); //今天买了2个大西瓜
    </script>

4.JS对象

js中所有事物都是对象，字符串对象、文档对象、数组对象等等
通过对象的属性和方法获取对象的信息，或修改

// 创建一个对象
      var student = {
        name: "小明",
        sex: "男",
        grade: "一年级",
        study: function (name, course) {
          return name + "这节课学习了" + course;
        },
      };
      //访问对象的属性和方法，对象名.属性名/方法名
      console.log(student.name); //小明
      console.log(student.study(student.name, "语文")); //小明这节课学习了语文
       //js系统内置对象
      var name = "jack chen";
      //字符串对象
      console.log(name.length); //字符串长度
      console.log(name.search("a", name)); //查找a在字符串中的位置
      //数组对象
      var arr = new Array("a", 1, "5");
      console.log(arr[0]); //a
      console.log(arr.length);//3

1. 什么是Javascript

2.js代码的使用方法

3. js基本语法

3.1 变量

3.2 数据类型

3.3 分支结构

3.4 循环结构

3.4 函数

4.JS对象

相关文章