今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS)。
 
一、JS的作用:
  表单验证,减轻服务端的压力
  添加页面动画效果
  动态更改页面内容
  Ajax网络请求
二、【使用JS的三种方式】
 
  1、HTML标签中内嵌JS: (不提倡使用)
  1. <button onclick="alert('你还真点了')">点我点我点我点我点我</button>
  2、HTML页面中直接使用JS:
  1. <script type="text/javascript">
  2. //JS代码
  3. </script>
  3、引用外部JS文件:
  1. <script language="JavaScript" src=" "></script>
  
  【注意事项】
   ①页面中JS代码与引用JS代码可以嵌入到HTML页面的任何位置。但是,位置不同会影响到JS代码的执行顺序;
    例如:<script></script>在body前面,会在页面加载之前执行JS代码;
   ②页面中JS代码使用type="text/javascript"
    引用外部的JS文件使用language="JavaScript"
   ③引用外部JS文件的<script></script>必须成对出现,且标签内部不能有任何代码!
 
三、【JS中的变量】
 
  1、JS中变量声明的写法:
  1. var width=10;  //使用var声明的变量,只在当前函数作用域有效
  2. width1=10;  //不使用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效
  3. var a,b,c=1;   //同一声明语句同时声明多个变量,变量之间用英文逗号分隔。但赋值需要单独赋,例如上式中只有c赋为1,a/b为undefined(未定义)
 
  [声明变量注意事项]
   ①JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行
   ②同一变量,可以在多次不同赋值时,修改变量的数据类型:
  1. var width=10;  //width为整形变量
  2. width="哈哈"  //width被改为字符串类型
   ③变量可以使用var声明,也可以省略var。
    [区别]:不使用var,默认为全局变量
   ④同一变量名可以多次用var声明,但是并没有任何含义,也不会报错,第二次之后的声明只会被理解为赋值
 
  2、变量的命名规范:
    ①变量名只能有字母,数字,_,$组成
    ②开头不能是数字
    ③变量区分大小写,大写字母与小写字母为不同变量
 
  3、变量名命名要符合驼峰法则:
    变量开头为小写,之后每个单词首字母大写(或下划线分隔);
    例如:zhenHaoWan √
       zhen_hao_wan √
       zhenhaowan ×
 
  4、JS中的变量的数据类型
    undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;
    null:表示为空的引用。例如:空对象,空数组
    boolean:真假,可选值 true/false
    number:数值类型。可以是小数,也可以是整数。
    string:字符串类型。用""或''包裹的内容,称为字符串。
    object(复杂数据类型)
 
  5、常用的数值函数:
    ①isNAN():用于判断一个变量或常量是否为NaN(非数值)
      使用isNaN判断时,会尝试使用number函数进行转换,如果能转换为数字,则不是非数值,结果为false
        "111" 纯数字字符串,false
        "" 空字符串,false
        "1a" 包含其他字符,true
        true/false 布尔类型,false
    ②Number():将其他类型转换为数值类型
    
    [字符串类型转数值]
     >>>字符串为纯数值字符串,会转为对应的数字。 "111" => 111
     >>>字符串为空字符串时,会转为0 "" => 0
     >>>字符串包含其他非数字字符时,不能转换 "111a" => NaN
 
    [布尔Boolean类型转数值]
     true => 1 false => 0
 
    [null/Undefined转数值]
     null => 0 Undefined => NaN
 
    [Object类型转数值]
      会先调用ValueOf方法,确定函数是否有返回值,再根据上面各种情况判断。
 
    ③parseInt():将字符串转为数值类型
      >>>空字符串,不能转。结果为NaN
      >>>纯数值字符串,能转。"123" => "123" "123.5" => "123" (小数转化时,直接抹掉小数点,不进行四舍五入)
      >>>包含其他字符的字符串,会截取第一个非数值字符前的数值部分。
        "123a456" => "123" "a1234b23" => NaN
      >>>parseInt只能转string类型,Boolean/null/Undefined 均为NaN
    ④parseFloat():将字符串转为数值
      >>>使用方式同parseInt。但是当转化小数字符串时保留小数点,转化整数字符串时保留整数
        "123.5" => "123.5" "123" => "123"
    ⑤typeof():用来检测变量数据类型
      未定义 => undefined
      字符串 => string
      true/false => boolean
      数值 =>number
      对象/null => object
      函数 => function
 
四、【JS中的输出语句】
  

  1. document.write();
  输出语句,将write的()中的内容打印在浏览器屏幕上;
 
  使用时注意:除变量/常量以外的任何内容,打印时必须放到""中。变量/常量必须放到""外。
  打印的内容由多部分组成时,直接用+连接;
 
五、【JS中的运算符】:
 
  1、算术运算(单目运算符)
    + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减
 
    +:有两种作用,链接字符串/加法运算;当+两边都为数字时,进行加法运算,当+两边有任意一边为字符串时,进行字符串连接,连接之后的结果仍为字符串
    ++:自增运算符,将变量在原有基础上+1
    --:自建运算符,将变量在原有基础上-1
 
  【n++与++n的异同】
   n++:先使用n的值进行计算,然后再把n+1;
   ++n:先把n的值+1,然后再用+1以后的值进行运算;
 
   相同点:不论n++还是++n,在执行完代码以后均会把n+1
 

  2、赋值运算
    = 赋值、 += -= *= /= %=

    +=:a+=5;相当于a=a+5; 但是前者的执行效率要比后者快。

  3、关系运算
    == 等于、=== 严格等于、 != 不等于 、 > 、 < 、 >= 、 <=

    ===:严格等于;类型不同,返回false;类型相同,再进行下一步判断;
    ==:等于;类型相同,同===;类型不同,尝试将两边转为转为数值再判断
      null==Undefined √ null===Undefined ×

  4、条件运算符(多目运算)
    a>b?true:false

    有两个关键符号: ?和:
    当?前面的部分运算结果为true时,执行:前面的代码;
    当?前面的部分运算结果为false时,执行:后面的代码;

    >>>多目运算付可以多层嵌套:var name = num>5? "da":(num==5?"dda":"dada")

  5、逻辑运算符
    && 与 、 || 或 、 ! 非

  [运算符的优先级]
    ()
    ! ++ --
    % / *
    + -
    > < >= <=
    == !=
    &&
    ||
    各种赋值 = += *= /= %=

【从无到有】JavaScript新手教程——1.简介、变量和运算符的更多相关文章

  1. javaSE练习1——变量和运算符

    一.已知a,b均是整型变量,写出将a,b两个变量中的值互换的程序.(知识点:变量和运算符综合应用): package com.test; public class t01 { public stati ...

  2. java第二章 变量和运算符

      Java 基础应用编程——  变量和运算符 1.Java程序结构          数据类型:确定要存储在内存中的数据的类型.          变量:是存储数据的基本单元 2.变量的概念   变 ...

  3. Java2变量和运算符

    课后作业:[必做题] 1√AB互换 已知a,b均是整型变量,写出将a,b两个变量中的值互换的程序.(知识点:变量和运算符综合应用) [必做题] package com.two; public clas ...

  4. C#图解教程 第八章 表达式和运算符

    表达式和运算符 表达式字面量 整数字面量实数字面量字符字面量字符串字面量 求值顺序 优先级结合性 简单算术运算符求余运算符关系比较运算符和相等比较运算符递增运算符和递减运算符条件逻辑运算符逻辑运算符移 ...

  5. Java入门(三):变量和运算符

    上次谈到了Java的基本数据类型,今天接着聊Java的变量.运算符. 一.变量 1.变量的分类 变量分为成员变量.局部变量和常量,其中成员变量又分为实例变量.类变量. 2.变量的定义 语法:变量类型( ...

  6. 一:1.2【print&input与变量和运算符】

    [路径] 绝对路径:从根目录开始链接的路径  --->cd C:\Windows\Boot\DVD\EFI\en-US 相对路径:不从根目录开始链接的路径 ----> cd Boot\DV ...

  7. 【从无到有】JavaScript新手教程——2.分支结构和循环

    介绍完JS的简介和向量以及运算符,大家对JS也有了初步的了解和认识,今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的 [JS中的分支结构] 一.[if-else结构] 1.结构写法: i ...

  8. javascript 核心语言笔记 4 - 表达式和运算符

    表达式(expression)是 JavaScript 中的一个短语(phrases),JavaScript 解释器会将其计算(evaluate)出一个结果.程序中的常量.变量名.数组访问等都是表达式 ...

  9. js基础知识之_入门变量和运算符

    js页面效果学习 (轮播图,文字滚动效果等等) javascript能来做什么 1.数据验证 2.将动态的内容写入网页中(ajax) 3.可以对时间做出响应 4.可以读写html中的内容 5.可以检测 ...

随机推荐

  1. 【Unity优化】构建一个拒绝GC的List

    版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 上篇文章<[Unity优化]Unity中究竟能不能使用foreach?> ...

  2. Matlab自带常用的分类器,直接复制用就好了,很方面。

    很方面的,懒得自己写了. clc   clear all     load('wdtFeature');         %   训练样本:train_data             % 矩阵,每行 ...

  3. Spring Boot 相关文章目录

    目录 监控 SpringBoot之旅 -- SpringBoot 项目健康检查与监控

  4. 算法模板——sap网络最大流 2(非递归+邻接表)

    实现功能:同最大流 1 这里面主要是把前面的邻接矩阵改成了邻接表,相比之下速度大大提高——本人实测,当M=1000000 N=10000 时,暂且不考虑邻接矩阵会不会MLE,新的程序速度快了很多倍(我 ...

  5. hdoj 1175 (bfs)

    题意: 判断两点之间是否可以通过至多有两次转变方向以达到相连,就是平时玩的连连看游戏,但是不能从外面绕过去. 思路:bfs,给每个加入的队列的点添加转变方向次数turn和点当前要走的方向dir属性,起 ...

  6. 使用Nginx+CppCMS构建高效Web应用服务器

    使用Nginx+CppCMS构建高效Web应用服务器 1:Why当前,越来越多的网站使用了各种框架,大部分框架使用了脚本语言.半编译语言等.比如Java.Python.Php.C#.NET等.这些框架 ...

  7. 一个小时学会jQuery

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法. 一.jQuery简介与第一个jQuery程序 1.1.jQu ...

  8. 爬取软考试题系列之ip自动代理

    马上5月份有个软件专业等级考试,以下简称软考,为了更好的复习备考,我打算抓取www.rkpass.com网上的软考试题. 以上为背景. 很久没有更新博客园的博客了,所以之前的代码没有及时的贴出来,咱们 ...

  9. Mysql5.7服务下载安装

    身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...

  10. 浅析Content Negotation在Nancy的实现和使用

    背景介绍 什么是Content Negotation呢?翻译成中文的话就是"内容协商".当然,如果不清楚HTTP规范(RFC 2616)的话,可以对这个翻译也是一头雾水. 先来看看 ...