JavaSpcript初识

---恢复内容开始---

1-语法标准（Ecmascript）

DOM

BOM

2=特点以及适用范围

简单易用：封装好了一些方法，属性

基于对象

面向对象：属于编程思维（思想）

C#,C++,Java,PHP.....

基于对象：

3-解释执行

编译执行：（C#）

C#（源代码===）》编译（.dll文件）===》计算机执行dll文件

解释执行：JS特点（代码直接执行）

4-写法

内嵌式写法写在head标签里

外联式写法

后缀名.js

引用<spript type="text/javascript src="""><spript>

5-补充属性

async：异步

注意：该属性指的是浏览器将外部JS文件下载完成后，立马执行。

defer：延时执行

注意：该属性值值得是浏览器将外部JS文件下载完成后按顺序执行。

行内（不常用）

<!DOCTYPE html>

<html lang="en">

          <head>

          <meta charset="utf-8">

          <script type="css/javascript" src="1.js" async></script>

          <script type="text/javascript">

                     alert(1)(括号里如果写汉字或者字母 需要带引号)

                     alert(1)

                     alert(1)

</head>

<!DOCTYPE html>

<html lang="en">

          <head>

          <meta charset="utf-8">

<script>alert(1)</script>

<script>alert(2)</script>

<script>alert(3)</script>

          <script type="css/javascript" src="1.js" defer></script>

          <script type="text/javascript">

                     alert(4)

                     alert(5)

</head>

---恢复内容结束---

1-语法标准（Ecmascript）

DOM

BOM

2=特点以及适用范围

简单易用：封装好了一些方法，属性

基于对象

面向对象：属于编程思维（思想）

C#,C++,Java,PHP.....

基于对象：

3-解释执行

编译执行：（C#）

C#（源代码===）》编译（.dll文件）===》计算机执行dll文件

解释执行：JS特点（代码直接执行）

4-写法

内嵌式写法写在head标签里

外联式写法

后缀名.js

引用<spript type="text/javascript src="""><spript>

5-补充属性

async：异步

注意：该属性指的是浏览器将外部JS文件下载完成后，立马执行。

defer：延时执行

注意：该属性值值得是浏览器将外部JS文件下载完成后按顺序执行。

行内（不常用）

<!DOCTYPE html>

<html lang="en">

          <head>

          <meta charset="utf-8">

          <script type="css/javascript" src="1.js" async></script>

          <script type="text/javascript">

                     alert(1)(括号里如果写汉字或者字母 需要带引号)

                     alert(1)

                     alert(1)

</head>

<!DOCTYPE html>

<html lang="en">

          <head>

          <meta charset="utf-8">

<script>alert(1)</script>

<script>alert(2)</script>

<script>alert(3)</script>

          <script type="css/javascript" src="1.js" defer></script>

          <script type="text/javascript">

                     alert(4)

                     alert(5)

</head>

6-JS中常用的输出消息的方式

通过alert（123）或者（“”字母“”或者“”汉字“”）

通过document.write(“”你好")；

注意：该方法中还可以设置html标签

document.write（“”<h1>你好</h1>“”）；

在控制台中输出消息

console.log(123);

console.log("你好");

接受用户输入信息

prompt（“”请输入您的姓名“”）；

确定取消方法

confirm（“”确定退出么？“”）

7-变量（重点）

变量：会变化的量（数据）用来存储数据的容器

变量定义：var 变量名 = 值；

注意1 首先定义变量必须使用var 关键字

2 “”=“” 赋值运算符

3 一个变量只能保存一个值（只能保存最后一个赋值结果）

变量命名规范

不推荐使用汉字定义变量

不能使用特殊字符或者特殊字符开头

不能使用数字或者以数字开头定义变量

变量中间不能出现空格

不能使用关键字定义变量

不推荐使用保留字定义变量

注意：1一行完整的代码结束后必须以；结束

2 JS中区分字母大小写

8-数据类型介绍

数据类型是用来确定变量的存储位置

常见的数据类型：

1.数字类型（number）

如果一个变量的值是纯数字，那么该变量的数据类型就是数字类型

数字类型的表示方式有

十进制、十六进制（0X开头 0-f）、八进制（以0开头 0-7）

2.字符串类型（string）

如果一个变量的值使用双引号或者单引号，那么该变量的数据类型就是字符串类型。

字符串特性：不可变性。（在内存中的不可变，不是值不可变）（注意不要大量拼接字符串）

属性：变量.lengh 获取字符串长度

转义字符（了解）

\" 转双引号 \'转单引号成对出现例：alert（“今天学习了\“ js \” ”）；

\r回车符

\n换行符

3.布尔类型（boolean）

如果一个变量的值是true或者false 那么该变量的数据类型就是布尔类型

对象（object）

看得到，摸得着，特征具体事物

//封装//继承//多态

1属性（特征）

2方法（功能）

创建对象

var 变量 = new Object（）

var xw=new Object（）；

xw.name="小王"；

xw.age=18；

xw.shengao=180；

//功能函数（方法）

xw.say=function() {

alert("你好")；}

console.log(xw.name+xw.age+xw.shengao);

通过字面量创建对象

var xw={

name:"小王"，

age：18，

shengao：180}；

数组（array）

undefined类型

如果一个变量的值是unddefined或者定义了一个变量没有给该变量赋值。那么该变量的数据类型就是undefined。

例子：变量在没有赋值的情况下，那么该变量的默认值就是undefined，对应的数据类型undefined类型。

例子var = 1

var n2

alert（n2）；

比较运算符

大于 >

小于 <

等于 ==或者=== 一个=属于赋值运算符

不等于！==

大于等于 =>

小于等于 <=

注意：1通过比较运算符得到的是一个布尔类型的结果

2一般情况下true代表正确的（条件成立），false代表错误的（条件不成立）

算数运算符

加 +

（1如果是数字类型的变量相加，最后结果也是数字类型

2如果是非数字类型的变量相加，最后的结果是字符串【加号起到的作用是连接作用】）

减 -

（1如果是数字类型变量相减，最后的结果是数字类型

2如果是数字的字符串相减，最后的结果是数字【由于：隐式数据类型转化】

3如果是非数字的字符串相减，最后得到的结果是NaN【NaN：not a number】）

乘 *

除 /

（1如果是数字类型的变量相除，最后的结果是数字类型

2如果除数是0，得到的结果是无穷大的值infinite）

取余 %

（）优先级

数据类型判断

typeof（变量）===>用alert（typeof（X））；来确定结果是什么数据类型

注意：1如果一个变量的值是NaN，那么该变量的数据类型就是number类型。

2如果一个变量的值是infinity，那么该变量的数据类型是number类型。

3如果一个变量的值是undefined，那么该变量的数据类型是undefined类型。

isNaN（）判断是不是一个数字

新内容学习

1-Maht对象

Math.ceil(x) 对数字进行向上舍入（天花板函数）

注意：1该方法返回的是一个大于当前数字，并且与它接近的一个整数。

2如果当前数字是一个整数，那么返回的就是当前数字本身

Math.floor(x) 对数字进行向下舍入（地板函数）同天花板函数

Math.abs(x) 返回数字的绝对值

Math.radom() 返回0-1之间的随机数

注意：该方法不能取到0和1

Math.max(x,y) 返回X和Y之间的最大值

min（x，y）返回最小值

Math.round(x) 返回X的四舍五入值

注意：该方法返回的是一个整数

Math.pow(x,y) 返回X的Y次方

2-数据类型转换

1隐式转换

程序在参与运算的过程中，发生的数据转换

2 显式转换（强制转换）

工程师指定的具体数据类型

将数字类型转化为字符串类型

1通过变量 .toString()

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script type="text/javascript">

               var n1=123;

               alert(typeof(n1));

               //数据类型转化

               n1=n1.toString();

               alert(n1);

               alert(trpeof(n1));

</script></head>

2通过String（）转化为字符串类型

将toSting行代码转化为 n1=String（n1）

字符串类型转成数字类型

1Number()

特点：转化为数字类型，保留原来值的内容

<script type="text/javascript">

var n1="123";

      n1=Number(n1);

      alert(n1);

      alert(typeof(n1));

2pasrInt(x) 特点：转化为整数，但只能保留整数部分。

3parseFloat(x) 特点：通过该方法可以转换为数字类型，但是要保留原来的内容。

2如果是非数字的字符串，直接保留数字部分

转化为布尔类型

Boolean(x) 注意1 数字0，空字符串，NaN，undefined，null转化为false

2除以上特殊值，转布尔类型都是true ture是1 0是false是规定

3-逻辑运算符

或运算 ||

注意：通过逻辑运算符要链接布尔类型的结果。

与（且）运算 &&

非！

4-等于逗号运算符

= 赋值 == 相等：只判断值不判断数据类型 === 相等：同时判断值和数据类型！=不相等

,运算符 var n1=123,n2=123;

5-分支结构（条件判断）

语法 if（条件表达式）{逻辑代码；}

else{逻辑代码；}

执行顺序：首先进行条件判断，如果条件成立（true），那么程序执行if语句中的代码，反之else

6-断点调试

作用：获取程序中的执行过程，排查错误。

使用：首先运行程序》点击审查元素》点sources 在浏览器中打开代码点击html页面》设置断点》再次运行程序或者F5

》点击下一步或者F10

监视变量：1鼠标直接悬停变量 2 右键变量添加监视变量。ADD~~WATCH

7-条件结构嵌套

语法：if（条件表达式）{}else if （条件表达式）{}else if{} else{}

执行顺序：首先进行表达式判断，如果条件为true那么就立即执行，如果条件为false那么执行else中的代码

8-三元运算

语法：条件表达式？代码1：代码2；

执行顺序：如果条件成立执行代码1，如果条件不成立执行代码2

注意：1三元表达式可以嵌套，一般不推荐使用。

var n1=prompt("请输入一个数字”)；

//如果用if else写

       if(n1%2==0){

       alert("偶数")；}

       else{

       alert（“奇数”）；}//

//用三元运算//

      n1%2==0?alert("偶数")：alert("奇数")；

9-Switch（变量）{

case 值1：

代码例如alert(n1)

break；

case 值2：

代码

break；}

注意1在Switch语句中，Switch中的变量数据类型必须与case后面的值的数据类型保持一致。

2一般情况下，如果变量表示的不是一个范围，而是一些具体值，可以考虑使用Switch结构

简写方式

switch(fname){ case"2": case"4": case"6"; alert("偶数")； break；

变量自增自减

var i =7；

变量自增：i++或者++i 例如J=i++的结果是J=i 如果是J=++i 就是 j==i+1

变量自减

循环

while循环

语法：初始化变量 var a=1；

while（条件表达式）{

循环体代码；}

执行过程：1变量初始化 2开始判断条件 3 如果条件为true，那么程序会进入循环体代码 4如果条件为false，那么程序不会进入循环体中循环代码

do while循环

语法：初始化变量

do{

循环体；}

while（条件表达式）

执行顺序：1首先执行do中的代码 2然后判断条件是否成立 3如果条件成立，则继续成立do中的代码 4如果条件不成立，那么程序结束。

与while循环的区别:在条件不满足的情况下，do while要比while循环多执行一次。

for循环

语法： for（变量初始化；表达式；变量自增或自减）{

循环体代码；}

执行过程：1变量初始化 2进行表达式判断 3 如果表达式成立，执行循环体中代码，然后进行变量自增或自减继续判断表达式成立，如果成立则继续 4 如果表达式不成立，则程序结束

例子：打印直角三角形

for（var i=1;i<=9;i++）{

        for(var j=1;j<=i;j++){

              document.write("*");}

        document.write("<br>")；

}

创建表格

<style type="text/css">

table{width:400px;height:300px;border=collapse;}

table,td{border:1px solid red;}

<script type="text/javascript">

document.write("<table>");

//创建行tr

for(var i=1;i<=4;i++){

          document.write("<tr>")

     for(var j=1;j<=i;j++)

          document.write("<td></td>")

document.write("</tr>")

document.write("</table>")

break和continue语句

break：在循环中使用break语句，程序会跳出当前循环

例子：找出1-10中第一个是2的倍数

for(var i=1;i<=10;i++){

      for(i%2==0){

           alert(i);

           break; } }

continue

结束本次循环，进入下次循环，continue后面的代码不会执行

例子：输出1-10所有数字不包括6

for(var i=1;i<=10;i++){

         if(i==6){

            continue;

}

             alert(i);

}

数组

数组可以一次保存多个值

定义数组：

*通过对象方式创建数组

var ary=new Array（）；

直接创建一个数组

var ary=[ ]；’

数组赋值：

通过索引（下标）赋值注意：数组中索引号（编号）从0开始

var ary=[]；

ary[0]=1;

console.log(ary);

数组遍历：

<script type="text/javascripe">

           var ary=[1,2,3,4,5,6,7,8];

           alert(ary.length);//获取数组长度

           for(var i=0;i<ary.length;i++){

           alert(ary[i]);}

</script>

数组中的方法补充

1 合并两个数组通过concat,通过该方法返回的是一个新数组，数据类型object

var ary1=[xxxx] ~~~2=[~~~] var ary3=ary1.concat(ary2);

alert(ary3);

2 join 更改数组显示方式，通过该方法的得到的是一个字符串类型

var ary=[1,2,3];

ary=ary.join("|");

alert(typeof(ary));

JavaSpcript初识的更多相关文章

Android动画效果之初识Property Animation（属性动画）
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
初识Hadoop
第一部分: 初识Hadoop 一. 谁说大象不能跳舞业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...
python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）
一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
初识IOS,Label控件的应用。
初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...
UI篇（初识君面）
我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python
Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
初识SpringMvc
初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...
初识redis数据类型
初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
Redis初识、设计思想与一些学习资源推荐
一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...

随机推荐

记一次mybatis bindingexception 问题排查
看到的错误信息如出一辙都是这样的:Method threw 'org.apache.ibatis.binding.BindingException' exception.Invalid bound s ...
教你函数如何传参更加方便 ----python 传参 *args **kwargs
*args 和 **kwargs 可以将不定数量的参数传递给函数 *args 和 **kwargs,前者适用于传入非键值对的可变数量的参数列表,后者适用于传入不定长度的键值对, 作为参数传递给函 ...
牛逼的MySQL,起死回生啊
1.目标库新建数据库root@mysqldb 14:10: [(none)]> create database db_name; root@mysqldb 14:11: [(none)]&g ...
linux 7 关闭防火墙开启sshd服务
启动一个服务:systemctl start firewalld.service关闭一个服务:systemctl stop firewalld.service重启一个服务:systemctl rest ...
vscode 中 eslint 相关配置
1.设置vue等文件有eslint提示 "eslint.validate": [ "javascript", "javascriptreact&quo ...
samba及其基本应用
Samba 137/udp,138/udp,139/tcp,445/tcp windowns主机共享: linux主机进行访问查看资源:smbclient -L Server_IP -U 用户名 li ...
C++基础学习_01
C++基础学习_01 基础知识:1.命名空间,2.IO流(输入输入),3.参数缺省,4.函数重载 1.命名空间作用:对标识符的名称进行本地化,避免命名冲突定义:namaspace space_na ...
python2.x 与 python3.x的不同
python2.x 与 python3.x 的区别: 1. python2.x 的源码编码不规范,源码重复较多:python3.x 的源码编码规范,清晰.优美.简单 2. python2.x的默认字符 ...
git 删除与撤回
Git 删除与撤回标签: git 版本管理删除文件撤回删除操作 2017年01月13日 22:56:27786人阅读评论(0) 收藏举报分类: Git(4) 版权声明:本文为博主原创文 ...
python反射和面向对象的知识并简述基本的异常
# 1.面向对象不是所有的情况都适用# 2.面向对象编程# a.定义类# class Foo:# def 方法1(self,bb):# b.根据类创建对象(创建) # class Person():# ...

JavaSpcript初识

JavaSpcript初识的更多相关文章

随机推荐

热门专题