简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Javascript 基础语法学习
Blogger Information
Blog 32
fans 0
comment 0
visits 27409
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Javascript 基础语法学习
Yang_Sir
Original
883 people have browsed it
  • 编程语言的基础大都相似。变量、函数、数据类型，还有分支结构、循环等等。
  • 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属性，将忽略标签中的内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JAVASCRIPTE</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       document.getElementById("title3").style.color = "green";
  11.     </script>
  12.     <h2 id="title1">JS代码演示1</h2>
  13.     <h2 id="title2">JS代码演示2</h2>
  14.     <h2 id="title3">JS代码演示3</h2>
  15.     <!--因HTML代码的执行顺序问题，把js代码放<h2>之后，否则不生效-->
  16.     <script>
  17.       document.getElementById("title1").style.color = "red";
  18.     </script>
  19.     <script src="1.js"></script>
  20.   </body>
  21. </html>

1.js

  1. 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是定义了两个不同的变量
  1. <script>
  2.       var name;
  3.       name = 10; //数值型
  4.       name = "abc"; //字符型
  5.       console.log(Name);//ReferenceError: Name is not defined /Name未定义
  6. </script>

3.2 数据类型

  • 原始数据类型：number、string、boolean
  • 特殊类型：null、undefined
  • 对象类型：object、array、function
  • js变量为弱类型，可以存放任意类型的数据
  1. <script>
  2.       var user;
  3.       user = 10; //数值型
  4.       user = "abc"; //字符型
  5.       user = true; //bolean
  6.       user = null;//null,一般表示空对象
  7.       user = undefined;//undefined,用于表示非对象类型的空值
  8.       user = ['21','dsj',23,null];//数组
  9.       user = { name: "admin",phone:"524566" };//对象
  10.       user = function(a,b){return a*b;}//函数
  11.     </script>

3.3 分支结构

  • js中分支结构有两种，if语句和switch。或者可以分为单分支和多分支结构。与PHP语言一样
  1. <script>
  2.  var user;
  3.       user = "admin";
  4.       //if else
  5.       if (user == "admin") {
  6.         console.log("欢迎您！" + user);
  7.       } else if (user == "guest") {
  8.         console.log("游客您好！");
  9.       } else {
  10.         console.log("您无此权限");
  11.       }
  13.       //switch 与if else一样的效果，但是更直观，适合多分支
  14.       switch (user) {
  15.         case "admin":
  16.           console.log("欢迎您！" + user);
  17.           break;//满足条件跳出当前，不执行后面的case
  18.         case "guest":
  19.           console.log("游客您好！");
  20.           break;
  21.         default:
  22.           console.log("请注册！");
  23.       }
  24. </script>

3.4 循环结构

  • js中的for循环和while循环，以及do~while循环
  1. <script>
  2.       var sum = 0;
  3.       //满足条件执行
  4.       for (var i = 10; i > 0; i--) {
  5.         sum += i;
  6.       }
  7.       console.log(sum); //55
  10.       var i = 1;
  11.       //满足条件后再执行
  12.       while (i < 11) {
  13.         sum -= i;
  14.         i++;
  15.       }
  16.       console.log(sum); //0
  18.       //执行一次后，再判断条件是否执行下次
  19.       do {
  20.         sum -= i;
  21.         i++;
  22.       } while (i < 11);
  23.       console.log(sum); //-11
  24.     </script>

3.4 函数

  • js的函数也与PHP一样，通过关键字function声明：function 函数名（参数）{函数体}
  • 但是js中的函数名区分大小写
  • 函数作用域：函数中声明的变量，只能再函数中生效
  1. <script>
  2.       function buy(goods) {
  3.         console.log("今天买了2个" + goods);
  4.       }
  5.       function Buy(goods) {
  6.         console.log("今天买了1个" + goods);
  7.       }
  8.       Buy("大西瓜"); //今天买了1个大西瓜
  9.       buy("大西瓜"); //今天买了2个大西瓜
  10.     </script>

4.JS对象

  • js中所有事物都是对象，字符串对象、文档对象、数组对象等等
  • 通过对象的属性和方法获取对象的信息，或修改
  1. // 创建一个对象
  2.       var student = {
  3.         name: "小明",
  4.         sex: "男",
  5.         grade: "一年级",
  6.         study: function (name, course) {
  7.           return name + "这节课学习了" + course;
  8.         },
  9.       };
  10.       //访问对象的属性和方法，对象名.属性名/方法名
  11.       console.log(student.name); //小明
  12.       console.log(student.study(student.name, "语文")); //小明这节课学习了语文
  13.        //js系统内置对象
  14.       var name = "jack chen";
  15.       //字符串对象
  16.       console.log(name.length); //字符串长度
  17.       console.log(name.search("a", name)); //查找a在字符串中的位置
  18.       //数组对象
  19.       var arr = new Array("a", 1, "5");
  20.       console.log(arr[0]); //a
  21.       console.log(arr.length);//3
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：js中一切皆对象, 慢慢品
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！