Javascript入门

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript简介

  • 客户端脚本编程语言
  • 结合HTML、XML、Flash
  • 网景公司设计,已发展20多年
  • 动态、弱类型、基于原型的语言

JavaScript作用

  • 动态改变网页内容
  • 动态改变网站外观
  • 验证表单数据
  • 事件响应

实例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <button type="button" onclick="alert('这是一次测试')" >点击进入</button>
</body>
</html>

效果展示

JavaScript编辑器

  • 记事本:最简洁,最方便的文本编辑器,功能单一。
  • dreamweavercs6
  • Sublime Text
  • ……

JavaScript在HTML中的应用

在HTML网页中嵌入JavaScript

一般嵌入网页标签<head></head>,<body></body>或元素中

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript">
        document.write("hello")
    </script>
</head>
<body>
    <script type="text/javascript">
        document.write("world")
    </script>
</body>
</html>

引用js文件

将js代码写入一个文件(.js),通过<script src=""></script>引用js文件

实战演练

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实战演练01</title>
    <script>
        function showin(){
            alert("欢迎到来!")
        }
        window.onload=showin
    </script>
</head>
<body>
</body>
</html>

基本语法

1.JavaScript代码执行

  • 按照HTML文件中出现的顺序逐行执行
  • 最好放到HTML文档中<head></head>标签中
  • 函数体内的代码只有被调用时才执行
  • JavaScript对大小写严格区分

2.分号和空格的应用

  • 分号:可有可无(最好在语句结尾加上分号,保证准确性)
  • 空格:javascript会自动忽略多余的空格

3.注释

  • 单行注释://放在行首注释该行
  • 多行注释:以/开头,以/结尾

4.语句

  • 语句:一条javascript语句可以由一个或多个表达式、关键字、运算符组成。(使用分号结束单个语句)
  • 语句块:对个语句能组成,通常由大括号括起来。经常出现在函数中或流程控制语句

数据结构

1.标识符
概念:javascript的变量名称、函数名称

  • 由字母、下划线、中文来组成,不能包含空格、标点符号和运算符号
  • 标识符第一个字符必须是字母、中文或下划线
  • 定义标识符不能与javascript中关键字相同

2.保留字
Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

  • 标记的关键字是 ECMAScript5 中新添加的。

3.常量

常量:值是固定的例如数字、字符型、布尔型等
定义格式:

const
    name: type=value;

4.变量

变量:指在程序运行过程中值可以发生改变的量,可读写的内存单元
定义形式:

var 变量名 = 值;  //定义变量
变量名 = 值;      //赋值

变量的作用范围:

  • 全局变量: 整个HTML文档中生效的,函数体外
  • 局部半两: 只在一个小范围内生效,函数体内

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变量</title>
</head>
<body>
    <p>点击创建变量并显示结果</p>
    <button onclick="myfunc()">单击这里</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myfunc(){
            var carname = "张三";
            document.getElementById("demo").innerHTML=carname
        }
    </script>
</body>
</html>

数据类型

每种程序设计语言都规定了一套数据类型,其中最基本不可再细分的类型称为基本数据类型。JavaScript基本数据类型包括字符串型、布尔型和数值型等。
1.typeof
语法格式:

typeof 变量/值

返回值:

  • Undefined
  • 布尔型
  • 数值型
  • 字符串型
  • object

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>typeof</title>
</head>
<body>
    <script type="text/javascript">
        var car = null;
        document.write(typeof(1) + "<br>");
        document.write(typeof(NaN) + "<br>");
        document.write(typeof("123") + "<br>");
        document.write(typeof(true) + "<br>");
        document.write(typeof(null) + "<br>");
        document.write(typeof(sss) + "<br>");
        document.write(typeof(car) + "<br>");
    </script>
</body>
</html>

NaN: 特殊类型的数字常量,非数字
Null: 表示空值,定义空的或不存在的引用,不等于空字符串和0
Null与Undefind区别: Null表示一个变量被赋予了空值,undefined还未被赋值

2.Undefined

变量还未赋值

3.Null

表示一个变量被赋予了空值

4.Bollean

布尔型,表示一个逻辑的值:

  • 逻辑真: true 1
  • 逻辑假: false 0

5.Number

  • 整数(正数,负数,0)
  • 浮点数

6.String

使用单引号或双引号

7.Object

对象类型(包含多种数据类型)

运算符

  • 算数运算符
  • 比较运算符
  • 位运算符
  • 赋值运算
  • 逻辑运算
  • 条件运算

1.算数运算符

运算符 描述
+
*
/
% 取余
++ 自增
自减

2.比较运算符

运算符 描述
== 等于
!= 不等于
> 大于
>= 大于等于
< 小于
<= 小于等于

3.位运算符

4.逻辑运算符

5.赋值运算符

6.条件运算符(?)

三元运算符,有三部分组成:

条件? 表达式1:表达式2
© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论