前端三大利器就是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的更多相关文章

学习JS的第一天--初识JS
1.初识JS a.我的第一个JS程序: document.write("Hello JS")://这段代码是输出到body中就是直接打开就可以看到: console.log(&qu ...
初识JS正则表达式
初识JS正则表达式看到的使用的正则表达式练习:http://www.cnblogs.com/wenanry/archive/2010/09/06/1819552.html PS:本文参考李炎恢JS笔 ...
[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)
[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景开发人员使用Visual Studio来开发TypeScript,可以很方 ...
JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
阅读：重新介绍 JavaScript（JS教程）
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会在线调试代码工具:https://codepen.io/pen 引言分歧根源:名字Javascript和Java有 ...
Javascript : require.js 的使用（例子）
demo 结构: config.js require.config({ baseUrl: 'js/lib', paths: { 'jquery' : 'jquery-1.11.1.min', ...
JavaScript（JS）简介
历史背景介绍 (Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript ...
【javascript】js 检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
Day3JavaScript（一）JavaScript初识以及bom操作
JavaScript简介什么是JavaScript 弱类型,动态类型,基于原型的直译性的编程语言.1995年netscape(网景)在导航者浏览器中设计完成. JavaScript的特点 1.与HT ...
帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com 在线演示在线下载当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...

随机推荐

[BZOJ 1146] [CTSC2008]网络管理Network（树状数组+主席树）
题目描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条高 ...
C# WebClient 的文件上传下载
上传文件 string path = openFileDialog1.FileName; WebClient wc = new WebClient(); wc.Credentials = Creden ...
02_pip区别： linux环境下python2，python3的
1.pip与pip3理解 centos中,我的pip与pip3都是python2.7的,所以无法安装成功,总是安装成python2的 [root@IP ~]# pip -V pip /site-pac ...
learning rewind func
函数名: rewind() 功能: 将文件内部的位置指针重新指向一个流(数据流/文件)的开头注意:不是文件指针而是文件内部的位置指针,随着对文件的读写文件的位置指针(指向当前读写字节)向后移动.而 ...
jQuery系列（一）：jQuery介绍
1.为什么要使用jQuery (1)什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中 ...
shell脚本中${...}函数的用法总结
${...}在字符串中有非常多的用法: 1.${var} 限定变量. 如果一个变量名A是另一个变量名AB的前部分,那么,如果要在AB相连时,要得到A的值,就必须使用${var}限定. 如果变量名不会产 ...
理清gcc、libc、libstdc++的关系
当你在linux下写C/C++代码的时候,是不是会遇到许多编译链接的问题? 时不时报个glibc,gcc,g++等相关的错误? 很多时候都无从下手,而且比较混乱. 这也是编译链接过程中经常出现的问题. ...
Django-视图函数/模板渲染/过滤器
一.Django的视图函数一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个 ...
python关闭socket端口立即释放
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM) server.setsockopt(socket.SOL_SOCKET, sock ...
Python 串口通讯
摘要: pyserial module: https://github.com/tbusf/pyserial Python使用pyserial进行串口通信:http://blog.csdn.net/l ...

【JavaScript】初识js

1.书写位置

*** 嵌入式

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

*** 行内式

2.熟悉js常见的语句

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

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

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

3.变量

4.变量类型

5.运算符

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

随机推荐

热门专题