PythonWeb_JavaScript_07_bj

一、JavaScript基础

1.什么是JavaScript?

JavaScript是运行的客户端的解释性脚本语言。

客户端是浏览器(包括:IE、Firefox、Chrome、Safari、Opera)

编译型：将程序的源代码编译成二进制机器语言，形成编译文件
        (.dll或.exe)，以后在执行时可以直接调用编译的结果，
        优点：一次编译，多次执行。

解释型：在每次执行时都需要进行编译、执行的过程；而且需要
        编译器进行编译、执行的操作

解释性脚本是指程序语言的一种执行方式;

JavaScript与Java之间不存在任何关系;

JavaScript最早由网景公司在其Netscape浏览器中推出.

Microsoft在其IE浏览器推出JScript与其抗衡.

欧洲计算机制造商协会(ECMA)在借鉴JavaScript1.5的基础上推出

ECMAScript,从而成为所有脚本语言的标准.

ECMAScript(ES)最新的版本为ECMAScript-6(简称ES6)

2.JavaScript的语法结构

<script type="text/javascript">
   ...
   ...
</script>

e.g. 01_simple.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello</title>

        <!-- 显示警示对话框 -->
        <script>
            window.alert('Hello World');
        </script>

    </head>
    <body>
    </body>
</html>

<script type="text/javascript" src="JS文件路径及名称">
</script>

第一步:创建JS文件并且写入相关的代码;

第二步:在网页文件内调用相关的JS文件;

e.g.
第一步：创建02_common.js
window.alert('我是外部文件的JS代码');
第二步:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello</title>

        <script src="scripts/02_common.js"></script>

    </head>
    <body>
    </body>
</html>

说明:

    A.JS严格区分大小写;

    B.每行JS代码必须以分号结尾;

    C.JavaScript文件的扩展名为.js

课外阅读：
    为什么要采用css文件合并/js文件合并？
    1.减少HTTP请求次数，减轻服务器请求压力；

    <link href="a.css">
    <link href="b.css">
    <link href="c.css">

    <link href="a.css,b.css,c.css">

    2.如何实现CSS文件/JS文件合并?

      前端框架(如天猫的Kissy)

Window alert() 方法
定义和用法
    alert() 方法用于显示带有一条指定消息和一个确认按钮的
    警告框。
语法
    alert(message)

3.变量(Varaible)

变量是指存储在计算机内存中有名称的信息,其值在程序运行
期间可以发生变化;

声明变量
    var 变量名称;

    var 变量名称 = 值;

    e.g. 03_variable.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>变量</title>
            <script>
               //声明变量
               var username = 'Tom';
               var password = "123456";
                
               var age = 26;
               var salary = 7961.35;
               var sex = true;  

               var telephone = '13683136622';
               //转义符
               var memory  = 'He said:"I\'m OK"';

              //输出语句(在控制台输出)                
              console.log(typeof(username));
              console.log(typeof(password));
              console.log(typeof(age));
              console.log(typeof(sex));
              console.log(typeof(telephone));
              console.log(typeof(memory));
         
            </script>
        </head>
        <body>
        </body>
    </html>

变量名称的命名规范
    A.变量名称必须以字母或下划线开头,包含字母、数字及下划线;
    B.变量名称禁止与系统关键字相同;
    C.变量名称必须遵守"驼峰标记法";
    D.变量名称必须含义明确;

JavaScript关键字:

var、if、else、switch、case、break、default、for、while、function

ECMAScript关键字:

class、float、boolean、object、extends、public、protected、private、interface、abstract、implements

4.数据类型

4.1.字符型(string):必须括在双引号或单引号之间;

转义符:
\n,换行
\r,回车
\t,水平制表符
\v,垂直制表符
\f,换页(走纸)
\\,反斜线
\',单引号
\",双引号

e.g.
str1 = 'He said:"OK"';
str2 ="I'm ok";
str3 = 'He said:"I\'m ok"';
str4 = "He said:\"I'm ok\"";

4.2.数值型(number),包括整型和浮点型,可以带有符号位,可存储
八进制、十进制、十六进制的数字;

八进制的表示方法为0[0-7]+

十六进制的表示方法0[x|X][0-9a-fA-F]+

4.3 布尔型(boolean),只能存储true或false
e.g. MySQL
create database t1;

use t1;

create table users(
sex boolean not null default 0
);

desc users;

boolean是tinyint(1)的别名!
create table users(
sex tinyint(1) not null default 0
);

1是指在没有达到指定位数时添加前导零,必须为zerofill组合使用.
create table t2(
a tinyint(1) zerofill,
b tinyint(2) zerofill,
c tinyint(3) zerofill
);

insert t2(a,b,c) values(2,2,2);

select * from t2;

desc t2;

请问可以插入以下记录吗?
insert users(sex) values(-128); 
insert users(sex) values(127);

4.4 未定义(undefined),值只能为undefined

以下变量的值为undefined
A.声明但没有赋值的变量;
B.声明但赋值为undefined的变量;
C.引用对象不存在的属性;

e.g. 04_unfined.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>未定义</title>
        <script>
          //1.声明但没有赋值的变量
          var n;
          console.log(typeof(n));  
          //2.声明但赋值为undefined
          var p = undefined;
          console.log(typeof(p));
          //3.引用对象不存在的属性时  
          var obj = {}; //空对象
          console.log(typeof(obj.password));
        </script>
    </head>
    <body>
    </body>
</html>

4.5 对象(object),属性与方法的集合体;
{
“属性名称”:值,
…,
方法名称:function(){
…
…
}
}

{
    propert:value,
    ....,
    method:function([parameter,...]){
        ...
        ...
    }
}

e.g. 05_object.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>对象</title>
        <script>
          var obj = {
              id:1,
              username:'Tom',
              say:function(sth){
                  return '他说' + sth;
              }
          };
          console.log('用户ID' + obj.id);
          console.log('用户名' + obj.username);
          console.log(obj.say('大家好,中午吃了吗?'));
        </script>
    </head>
    <body>
    </body>
</html>

4.6 null(空对象),其作用是为断开继承链(原型链);
e.g. 06_null.html

null

4.7 function(自定义函数),可以重复执行的代码段;
e.g. 07_function.html

自定义函数

二、运算符

按作用划分

1.字符运算符: +

2.数学运算符:+(正号)、-(负号)、*、/、%、+、-

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

全等:(1)值相同(2)数据类型相同

4.逻辑运算符:!、&&、||

短路现象:在进行&&或||运算时,只有第一个表达式的值可以

确定整个表达式结果时,后续表达式将忽略执行;

5.自增/自减运算符

i++、i–,后缀形式:先使用,后加减

++i、–i,前缀形式:先加减,后使用

e.g. 09_increment.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>运算符</title>        
        <script>       
           var i = 4;
           console.log(i++); //后缀形式 4
           console.log(i);  //5
           var m = 3;
           console.log(++m); //前缀形式 4
           console.log(m);  //4
        </script>
    </head>
    <body>
    </body>
</html>

6.赋值运算符:=、+=、-=、*=、/=、%=

按参加运算的操作数的数量

单目运算符:只有一个操作数,如负数(-)、逻辑非(!)

双目运算符:有两个操作数,如加号(+)、大于(>)等

三目运算符:expression ? value1 : value2

运算符优先级

一、二、三、赋值

算术、比较、逻辑

案例:

var p = !true || 3 + 2 - 5 <= 7
false || 3 + 2 - 5 <= 7
false || 0 <= 7
false || true
true

e.g. 08_operator.html

运算符

三、流程控制语句

1.if语句

if(condition){
…
…
}

if(condition){
…
…
} else {
…
…
}

e.g. 10_if.html

if语句

if(condition){
…
} else if(condition){
…
} else if(condition){
…
} … else{
…
}

e.g. 11_if.html

if..else语句

2.switch语句

switch(expression){
case 值1:
…
break;
case 值2:
…
break;
case N
break;
default:
…
break;
}

说明:

A.if语句的条件表达式只能为布尔型(可能存在数据类型的自动转换)

switch语句的表达式可以为任意数据类型(布尔除外)

B.if语句每次执行时都将对变量进行取值操作;而switch只进行一次取值操作;

C.switch语句进行全等运算;

e.g. 12_switch.html

if..else语句

PythonWeb_JavaScript_07_bj

猜你喜欢