前端三大利器就是HTML+CSS+JavaScript，他们在整个前端开发中的主要作用大体可以概括如下

html 标记语言 负责页面的结构
css 层叠样式表 负责页面的样式
javascript 编程语言 负责页面的行为（客户端）

其中最复杂也是最重要的部分就是Javascript。用一个词来形容JS的用途，就是“上天入地”。在客户端开发中我们可以使用JS来实现特效、动画、交互、数据校验 ；在服务器端有node；在数据库中有mongodb。所以现今的开发环境对于我们对JS的掌握程度要求越来越高，要想在软件开发一道上走得远，我们必须要掌握好JS。

今天先简单介绍一下JS的一些基本知识。

1.书写位置

*** 嵌入式

类似于CSS内嵌式一样，我们同样把代码写在页面里，通过<script></script>标签进行标记，在该标签内写JS代码。平时JS代码少的时候可以用这种方式。

其中JS代码可以放在任何位置（<head></head>里，<body></body>里,<html></html>外），但建议放在body末尾。

01_书写位置.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

         <script>

             alert("hello js!");

         </script>

 </body>

 </html>

*** 外链文件（实际项目中）

类似于CSS代码外部引用，我们在专门的文件写JS代码，然后在页面内引入该js文件，实现页面结构和行为的分离，这是W3C一直倡导的标准，也是实际开发中我们常采用的方式。

01_书写位置.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

         <script src="my.js"></script>

 </body>

 </html>

my.js

alert("hello world!");

*** 行内式

直接在html标签中写JS代码，会造成耦合性过大，不利于维护，同样不建议使用，只要了解就好。

01_书写位置.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <p onclick="alert('呵呵');">这是一段文字</p>

 </body>

 </html>

当一个页面多存在多个<script></script>标签时，按顺序从上往下执行。

2.熟悉js常见的语句

02_js输出信息.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        //js代码书写位置 ctrl+"/" 注释快捷键

        alert("1");

        // alert("2");

        // alert("3 \nssss");

        document.write("<h1>人一定要有自己的追求！！</h1>");

        console.log("猜猜我在哪"); //F12打开开发者工具 找到console面板

    </script>

</body>

</html>

2.1 alert("xxxxx"); 弹出窗口

在当前界面弹出一个弹窗

实现效果：

2.2 document.write("...") 在页面中输出信息

直接在页面中显示我们输入的内容，其中document就代表了当前页面这个对象。

实现效果：

2.3 console.log("...") 控制台输出

浏览器自带一个开发者工具，一般的快捷键都是F12，后者右击选择进入。找到console控制选项。这是我们学习JS的一个重要组成部分，很多结果都会在控制台进行输出。

实现效果：

3.变量

任何一门语言存在自己的语法，而语法最基本的就是变量，所谓变量就是未知数，他是内存中的一块位置，可以用来存储一个值，并且这个值可以改变。

03_js变量.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        // var x;

        // x = 10;  //把10赋值给变量x

        // console.log(x); // 10

        var x = 20;

        var c = 30, b = 20;

        x = x + 20;

        alert(x);

    </script>

</body>

</html>

在es6中，我们还会使用 let/const 定义变量，这个我们之后再提，现在先把var掌握住。

4.变量类型

JavaScript是一门弱类型语言，不像Java一样，每个变量是个什么类型严格规定。在JavaScript中我们统一使用var来定义，要想查看该变量类型，我们可以使用typeof关键字来查看。

04_js变量类型.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

    /*

    基本类型

        number 整数 小数 负数

        string 字符串 "hello" 'world'

        boolean 布尔值 true/false

        undefined 未赋值的变量类型就是undefined

        null 空引用

    引用类型

        数组 函数 对象 正则 日期

    */

        // 变量名 $ _ 数字 字母 不能以数字开头

        //不能是关键字

        var i = 10;

        var j = 10.2;

        console.log(typeof i);  //number

        console.log(typeof j);  //number

        var a = "hello";

        var b = 'world';

        console.log(typeof a);  //string

        console.log(typeof b);  //string

        var f1 = true;

        var f2 = false;

        console.log(typeof f1);  //boolean

        console.log(typeof f2);  //boolean

        var c;

        console.log(c); //一个变量未定义 值undefined

        console.log(typeof c);  //undefined 类型

        var d = null;

        console.log(typeof d);  //boolean

    </script>

</body>

</html>

实现效果：

5.运算符

05_运算符.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        // + - * /

        // + 当有字符串参与 表示字符串拼接

        console.log(10/20);

        console.log("3"+"4");   //"34"

        console.log(typeof("3"+"4"));   //string

        console.log(10+"5");    //"10"+"5"--->"105"

        var x = 10;

        console.log("x+2");

        console.log(x+2);

        console.log(x+"2");

        console.log("3"-"4");//相当于 3 - 4 = -1

        console.log("3"*"4");//相当于 3 * 4 = 12

        console.log("20"+20-10);//"2020" - 10 ---> 2010

        console.log(typeof("20"+20-10));//number

        console.log("6"-false); //false转成数字0  "6" - 0 = 6

        console.log("6"-"5sads");// NaN not a number

        console.log(typeof NaN);// number

        /*

            ++x与x++

            相同点

                最终x的值都会在原来基础上加1

            区别

                y = ++x是先运算后赋值

                y = x++是先赋值后运算

        */

        var x = 10;

        x++; // ++自增运算符 让变量自己加1

        console.log(x); // 11

        var y = 10;

        var k;

        // k = y++; // y++整体的值是y之前的值

        k = ++y; // ++y整体的值是y+1后的值 k=11

        console.log(y);

        console.log(k);

        // % 求余运算符/取模运算符

        console.log(4%2); // 0

        console.log(15%6); // 3

    </script>

</body>

</html>

实现效果：

【JavaScript】初识js的更多相关文章

  1. 学习JS的第一天--初识JS

    1.初识JS a.我的第一个JS程序: document.write("Hello JS")://这段代码是输出到body中就是直接打开就可以看到: console.log(&qu ...

  2. 初识JS正则表达式

    初识JS正则表达式 看到的使用的正则表达式练习:http://www.cnblogs.com/wenanry/archive/2010/09/06/1819552.html PS:本文参考李炎恢JS笔 ...

  3. [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)

    [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景 开发人员使用Visual Studio来开发TypeScript,可以很方 ...

  4. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  5. 阅读：重新介绍 JavaScript（JS教程）

    这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...

  6. Javascript : require.js 的使用（例子）

    demo 结构:     config.js require.config({ baseUrl: 'js/lib', paths: { 'jquery' : 'jquery-1.11.1.min', ...

  7. JavaScript（JS）简介

    历史背景介绍 (Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript ...

  8. 【javascript】js 检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  9. Day3JavaScript（一）JavaScript初识以及bom操作

    JavaScript简介 什么是JavaScript 弱类型,动态类型,基于原型的直译性的编程语言.1995年netscape(网景)在导航者浏览器中设计完成. JavaScript的特点 1.与HT ...

  10. 帮助自定义选择框样式的Javascript - DropKick.js

    来源:GBin1.com 在线演示  在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...

随机推荐

  1. BZOJ4383 [POI2015]Pustynia[线段树优化建边+拓扑排序+差分约束]

    收获挺大的一道题. 这里的限制大小可以做差分约束,从$y\to x$连$1$,表示$y\le x-1$即$y<x$,然后跑最长路求解. 但是,如果这样每次$k+1$个小区间每个点都向$k$个断点 ...

  2. Solving Docker permission denied while trying to connect to the Docker daemon socket

    The error message tells you that your current user can’t access the docker engine, because you’re la ...

  3. [2019HDU多校第一场][HDU 6590][M. Code]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6590 题目大意(来自队友):二维平面上有\(n\)个点,每个点要么是黑色要么是白色,问能否找到一条直线 ...

  4. BZOJ 3289: Mato的文件管理 (区间查询逆序对)

    这道题就是不要求强制在线的 BZOJ 3744 Gty的妹子序列 所以说离线做法有莫队,在线做法见上面连接. 这里贴出常数巨大O(nnlogn)O(n\sqrt nlogn)O(nn​logn)分块+ ...

  5. 设置springboot、mysql、nginx，tomcat文件大小（大集合）

    1.springboot设置文件大小 第一种: application.properties中添加 spring.http.multipart.maxFileSize=10MBspring.http. ...

  6. python中重要的概念：类（class）

    1.名词解释 类:类代表了具有相同特征的一类事物(人) 对象.实例:具体的某一个事物或者是人 实例化:将类变成对象的这么一个过程,即新建一个对象的过程,就是对类的一个实例化过程. 2.格式 函数定义: ...

  7. JavaScript程序设计——FOR循环

    FOR循环流程图: 1.编写求6!的阶乘的代码 2.编写10个10相加的和 3.编写1+2+3+...+10连续相加的和 4.编写1+(1+2)+(1+2+3)+...+(1+2+3+...+10)连 ...

  8. vim 自动代码格式调整

    1,gg 跳转到第一行 2,shift+v 转到可视模式 3,shift+g 全选 4,按下神奇的 =

  9. 记一次 用 ssh 反向代理解决的远程操作效率问题

    公司在异地有一个项目,项目在内网有一个linux 集群开发人员通过 xshell 进行操作,但是开发过程中还需要公司开发人员进行远程操作,原来采用的方案是向日葵,需求能实现但是限于网络环境向日葵实在是 ...

  10. shell基础之二 bash特性详解

    https://blog.51cto.com/13520779/2093146 合格linux运维人员必会的30道shell编程面试题及讲解:https://blog.51cto.com/oldboy ...