二、(1)JavaScript基础语法

JavaScript-基础语法

一、 Javascript简介(了解)

什么是Javascript

  JavaScript概念:基于对象和事件驱动,并且具有相对安全性的解释型的客户端脚本语言。

  • 具有面向对象能力:js一开始就是基于对象的一门语言,不像php从面向过程慢慢过渡到面向对象的,js中有很多内置对象,像window location对象...无须定义就可以使用,
  • 解释型:直接读代码而且运行,不像java,需要编译成一个点class文件,然后再执行那个class文件
  • 事件驱动:js大部分操作是基于浏览器的,比如你要点击一下页面,点击一下这个按钮,鼠标选中这段文本才触发一段JavaScript代码的执行
  • 相对安全性: 它没有一些修改文件和删除文件等一些恶意操作
  • 客户端:不需要服务器端就能执行的 ,当你打开一个浏览器,打开一个网站,它的网页存放到你本地的临时空间,才去执行你的js代码。所以他是在本地执行的,所以叫客户端,服务端就不叫本地了,而是叫远程端
  • 脚本语言: 不像java需要一个JDK环境,还有.net需要一个SDK环境才能运行,他只是一个脚本语言,只需要支持他的浏览器即可

Javascript用在哪里(了解)

  • 1.表单数据验证:表单数据验证是JavaScript最基本也是最能体现效率的功能。
  • 2.动态HTML(即DHTML):动态HTML指不需要服务器介入而动态变化的网页效果,包括动态内容、动态样式、动态布局等。
  • 3.用户交互:用户交互指根据用户的不同操作进行的响应处理。例如:联动菜单等。
  • 4.数据绑定:HTML中表单和表格能够以.txt文件定义的数据源,通过对位于服务器端的数据源文件的访问,便可以将数据源中的数据传送到客户端,并将这些数据保存在客户端。
  • 5.少量数据查找:能够实现在当前网页中进行字符串的查找和替换。
  • 6.AJAX核心技术:AJAX即异步JavaScript+XML。该对象提供一种支持异步请求的技术,使客户端可以使用JavaScript向服务器提出请求并处理响应,但并不影响用户在客户端的浏览。

javascript代码四种方式的区别和用法

写法:

  • a.内部脚本:写在<script>标签对内。
  • b.外部脚本:将js代码写在.js文件中,再通过<script src=""></script>引入到文档中。
  • c.行内脚本:将js代码写在标签上的时间属性内,<button onclick="js代码"></button>
  • d.协议脚本:<a href="javascript:js代码"></a>

区别:

  • 1、内嵌方式的Javascript只能够在当前html文件中使用;
  • 2、外联方式的js文件可以被多个html页面使用;
  • 3、onclick是一个事件(发现什么什么后)属性,只有发现后才执行;
  • 4、a标签本身是超链接,但是我们一旦指定javascript:协议后,点击这个超链接,就告诉浏览器需要执行一段javascript代码。与onclick一样都是点击后执行。

<script>标签选择:如果一个Javascript代码被多个html文件使用,请选择外联方式, 或者可以选择内嵌方式,策略与css一样。

注意:

  • 1、script标签的type属性可以不设置,因为默认就是为text/javascript,如果你设置了请保证你type属性值为text/javascript;请勿选择text/vbscript等。
  • 2、script标签中的内容为js代码,如果指定了src属性,那么万万不能在script标签中编写js代码,因为浏览器会加载src属性对应的文件内容到script内容中。

案例:

    <script>
        /*网页输出*/
        document.write("hedas");
        document.write("<h1>成都</h1>");/*输入标题*/

        /*弹出框*/
        alert("hello workd");
        confirm("你确定要删除吗?");/*确认框*/
        prompt("请输入一个数字:");/*输入框*/

        /*控制台输出*/
        console.log("今天是星期二");

        //区分大小写
        var a=10;
        var A=10;
    </script>

二、Javascript基础语法

JavaScript区分大小写

html标签名和属性名,不区分大小写,比如<a href=””>与<A HREF=””>效果一样,但是 JavaScript 是一门区分大小写到语言。因此,就需要在编程的时候注意这个细节,username与userName所代表的是不同的两个东西。

关键字和保留字

关键字:
break else new var case finally return void
catch for switch while continue function this with
default if throwdelete in try do instanceof typeof

保留字:
abstract enum int short boolean export interface static
byte extends long super char final native synchronized
class float package throws const goto private transient
debugger implements protected volatile double import public

标识符

  • 标示符(IDentifier)是指用来标识某个实体的一个符号。其实就是命名;
  • 编程语言中,标识符就是程序员自己规定的具有特定含义的词,比如类名称,属性名称,变量名等。
  • 标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成,但标识符不能以数字开头,不能是JavaScript中的保留字或关键字。
  • 合法标识符:userName user_name $ _ $0 _0
  • 非法标识符:250 abc& class Mini-Copue a-zA-z0-9_$ :
  • 不能以数字开头

变量(重点)

  • 1. var 可以重复定义,后面定义时var没有意义
  • 2. let 不能重复定义,否则报错
  • 3. const 定义常量,不能重复定义,不能再次赋值,否则报错

6种基本数据类型:

ES5:5种

  • Number--(数字)
  • String--(字符串)
  • Boolean--(布尔型)
  • Undefined--(未定义)
  • Null--(空)

ES6:新增1种

  • Symbol()--(Symbol类型)

1种引用类型:

  • Object 对象
  • Array 数组
  • Function 函数

例如:

var name = '凤姐'; // string(字符串)
var age = 21;    // number(数字)
var isMarry = true; // boolean(布尔型)

数字(number)

  数字类型又分为两种: 整数(int)和小数(float)
整数(int)
整数可以使用以下四种表示形式:

  • 十进制:日常生活使用的数字。 (常用的方式)
  • 八进制:以0开头的数字(了解)
  • 十六进制:以0x开头的数字(了解)
  • 二进制:是以0或者1组成的数字(了解)
var number_1 = 15; //十进制表示法
var number_2 = 017;//八进制表示法
var number_3 = 0xF;//十六进制表示法

//但是程序的输出都会将上面的转换为十进制表示法输出
console.debug(number_1,number_2,number_3)
Javascript使用变量无法表示二进制。

小数(float)
带有小数点的数字使用float类型的值。
var height = 1.75;
 特殊值
特殊数值:NaN(计算错误,类型转换失败)
Infinity(除数为零)

字符串(string)

使用“”或者是‘’表示的数据是字符串类型的数据。

var name = '张三'; //姓名
var sex = "男";    //性别
var intro = "他是一个很好很好的孩子!"; //简介

特殊的用法:

如果字符串的数据中出现特殊的符号需求使用转义字符(\)额外处理。
转义符    含义    转义符    含义
\’    表示单引号    \”    表示双引号
\n    表示换行符    \\    表示反斜线 \ 号本身

布尔类型(boolean)

boolena类型的值只有两个: true或者false,代表真假性。

var isMarry = true;

未定义(undefined)

变量定义后从未赋值时,该变量的默认值为undefined。
数据类型undefined只有一个值undefined。

① 注意:undefined代表,一个变量已经定义但是未赋值,默认值是undefined.
var address;
console.log(address);//undefined

② 如果我们直接使用未定义的变量将会报错!(控制台查看)
//var age; 代码被注释了
console.log(age); //age not defined , age这个变量没有定义;

空(null)

数据类型null只有一个值null。
可以通过给一个变量赋 null 值来清除变量的内容。

null与undefined比较(了解)

  • 相同点:null,undefined均代表无值;
  • 不同点:undefined代表一个变量如果没有赋值,那么值是undefined,变量的默认值;null代表一个变量如果是存储的值是引用类型,但是目前对象还没有创建,那么就可以设置为null,另外如果一个应该函数有返回值,如果最终没有数据作为返回值,那么也会返回null。

typeof

  作用:关键字,用于查看或判断变量的类型

var a=10;
console.log(typeof a);//输出number

三、Javascript中的类型转换

强制类型转换

parseInt(变量名):将变量转换为整数 把小数和不是数字的部分去掉;

注意:

  • 1.只有首字符开始的连续数字转换后得到具体值,其他得到NaN
  • 2.除了字符串的其他类型转换后都得到NaN
var a = "250.124";
a = parseInt(a);
console.log(a, typeof a);//250

var a = "sb250";
a = parseInt(a);
console.log(a, typeof a);//NaN

var a = "2a5b0";
a = parseInt(a);
console.log(a, typeof a);//2

var a = "";
a = parseInt(a);
console.log(a, typeof a);//NaN

var a = true;
a = parseInt(a);
console.log(a, typeof a);//NaN

var a = undefined;
a = parseInt(a);
console.log(a, typeof a);//NaN

var a = null;
a = parseInt(a);
console.log(a, typeof a);//NaN

parseFloat(变量名):将字符串转为小数

注意:

  • 1.只有首字符开始的连续数字转换后得到具体值,其他得到NaN
  • 2.除了字符串的其他类型转换后都得到NaN
  • 3.如果小数后面的值是有效值,转换后就保留,否则就删除

Number (变量名):将变量转换为数字

注意:

  • 1.只能纯数字构成字符串才可以转换
  • 2.true:1;false:0
  • 3.Undefined:NaN ; null:0;

Boolean(变量名):转换为布尔值,true/false;

注意:除了0 "" '' undefined NaN null 得到fasle , 其他的都是true

String(变量名):转换为字符串

自动类型转换

  在运行过程中根据编程语言的运算的语意环境,Javascript会自动进行类型转换.

<script type="text/javascript">
var value1 = "2";
var value2 = "1" 

//减法的语意: 将会按照数字进行运算
var value3 = value1 - value2;
//加法: 将会按照数字进行运算
var value4 = true;
var value5 = value1 - value4;
console.debug(value5);
</script>

四、运算符

  • ① 算术运算符: + - * / % ++ --
  • ② 比较运算符:== != > >= < <= ===(全等于) !==(不全等于)
  • ③ 条件运算符:(expr1) ? (expr2) : (expr3)—后面讲,
  • ④ 例:$v1 = $fs>60 ? "及格" : "补考" ; //则v1根据fs的值有两个情况
  • ⑤ 逻辑运算符:&&(与) ||(或) ! (非)
  • ⑥ 字符串运算符:+
  • ⑦ 赋值运算符: = += -= *= /= %=

算术运算符

算术运算符: + - * / % ++ --
%取模运算符(取余)的符号有 被除数决定了正负性。

++,--分为前,后.

  • 放在前面: 先自身+1运算,再和其他的运算数计算.
  • 放在后面: 先和其他的运算数计算,再自身+1运算
  • 原则:++或--和变量,谁在前就先运算谁

比较运算符

比较运算符:== != > >= < <= ===(全等于) !==(不全等于)

  • ==(等于): 比较值的大小是否相等,不比较值的类型 (比较大小)
  • ===(全等于): 既比较值的大小是否相等,又比较值的类型.(比较大小,类型)
  • !=(不等于):结果和==相反
  • !==(不全等于):结果和===相反

三元(目)运算符

条件运算符:(expr1) ? (expr2) : (expr3),
条件?表达式1:表达式2
三目运算符 有一个结果 当条件成立时,结果为表达式1,否则为表达2的结果;

var num1 = 10;
var num2 = 5;
var max = (num1>num2) ? num1 : num2;
console.log(max);//10

逻辑运算符

a&&b(并且): 逻辑与,当a和b都为true时,返回值为true,否则返回false。
语法: 表达式1 && 表达式2;
(x < 10 && y > 1) 为 true

a| |b(或者): 逻辑或,当a和b都为false时,返回其中第一个不为false的值或者最后一个值。
语法: 表达式1 || 表达式2;
(x==5 || y==5) 为 false

!a(取反) : 逻辑非,当a为true时,返回值为false,否则返回true。
语法: !表达式;
!(x==y) 为 true

技巧:

  • 1、&& 逻辑与,只有所有值为true,才可能返回最后一表达式的值;
  • 2、| | 逻辑或,从左向右运算表达式,如果表达式为true,就返回表达式的值,如果为false,继续向后寻找表达式为true的值;
  • 3、!逻辑非; !!表达式可以将任何数据类型转换为布尔值;

注意:JavaScript中所有的值都具有真假性,0、""、false、null、undefined、NaN为false,其他的数据均为true。

字符串连接符号(+)

一个表达式中,字符串与任何变量进行“+”运算,都是进行字符串连接,运算结果为一个新的字符串。

var s = “二狗”;
var s1 = s+”250”;
var s2 = s+null;

赋值运算符

=:赋值运算符

  • +=: a+=b  a=a+b;
  • -=: a-=b  a=a-b;
  • *=: a*=b  a=a*b;
  • /=: a/=b  a=a/b;
  • %=: a%=b  a=a%b;

运算符优先级(运算符结合性)

  • 优先级越高的优先运算,不用死记该图片,可以使用()提升优先级
  • 赋值优先级最低
  • 先乘除后加减
  • 优先级相同情况下,从左到右依次计算.
posted @ 2021-01-18 14:49  全村的希望、  阅读(160)  评论(0编辑  收藏  举报