2
社区成员
发帖
与我相关
我的任务
分享JS的基本语法（交流学习）
一、为什么要学习javascript
-
了解js的特性（优势）
-
解释性
-
js是一种解释性语言，源代码不需要经过编译，直接在浏览器上运行时被解释
-
目前所有的浏览器都支持javaScript语言，并且是默认的
-
-
基于对象和事件驱动
-
js可以直接对用户或客户的输入做出响应，无需经过web服务器
-
js对客户的响应，是以事件驱动的方式进行的
-
所谓事件驱动，指的是在页面中执行了某种操作所产生的动作，此动作称为事件，比如点击按钮、失去光标等等
-
-
-
跨平台
-
js依赖于浏览器本身，和操作系统无关，只要能运行浏览器的计算机，并且支持JavaScirpt的浏览器都可以正确执行
-
-
-
JavaScript能干什么
-
实现页面动态效果，让你的页面动起来，拥有于用户交互的功能，比如层的切换、树形菜单、弹出框等等
-
表单页面的各种验证，减轻服务器的压力，比如注册表单验证
-
动态改变页面内容，动态创建页面元素，动态改变表格内容等
-
二、js脚本的基本结构
-
<script language="JavaScript">//language="javaScript"可以省略 //使用JavaScript脚本循环输出HelloWorld for (let i = 0; i < 5; i++) { document.write("<h1>HelloWorld</h1><br>") } </script> -
JavaScript脚本可以插入到<head>或<body>标签中，被包含在<script>标签中
-
第一部分：<script language="JavaScript">告诉浏览器下面是JavaScript脚本，开头使用<script>标签，表示这是一个脚本的开始，
language="JavaScript"是JavaScript告诉浏览器用的是哪种脚本语言
-
第二部分是JavaScript的脚本，实现具体的功能
-
第三部分是</script>，代表脚本语言结束
-
document.write("向页面写东西")：JavaScript语言有大量的内置对象，不需要自己创建，需要的时候直接使用
-
JavaScript是基于对象的语言，标识符大小写敏感，每句代码以分号结束
-
注释：和java一样，单行注释//，多行注释/* */
三、html文档中引用JavaScript脚本的三种方式
-
回顾：html中引用css的三种方式
-
行内样式：
<span style="color:red;font-size:16px">一句话</span> -
内部样式：在head标签中写在style标签内
-
外部样式：<link rel="" href="">
-
-
html页面内嵌js代码
-
在head或body标签中添加script标签，在script标签中写js脚本
-
-
行内使用
-
<button onclick="alert('就是这样行内使用js')">点击</button>
-
-
引用外部的js文件
-
在当前页面的外部定义一个js文件，后缀名是.js，里面直接编写js脚本
-
在页面的head或body标签中通过script标签的src属性引入
-
<script src="util.js"></script>
-
注意： 内部如果再写script代码 页面不执行
-
四、变量的声明和赋值
//先声明后赋值
let num;
num = 10;
//边声明边赋值
let name = "张三"
let sex = "男"
document.write(name + "性别是：" + sex)
//不声明，直接赋值（这种方式不推荐使用）
str = "hello"
alert(str)
-
JavaScript是一个弱语言，使用let关键字来声明变量，声明变量时，不需要指明是什么数据类型，根据所赋的值来决定是什么数据类型，使用变量前要先声明
五、数据类型
-
基本类型
//数值型：number，包含整数和小数 let i = 10;//定义了一个数值型变量 let f = 5.2; //定义了一个浮点型的数值型变量 let num = NaN;//定义了一个not a number，当计算结果不是数值时的数据类型 let num2 = Infinity;//定义了一个无限大的数值 //typeof()：判断数据类型 alert(typeof num2) //字符串类型：string，以双引号或者是单引号括起来的任意文本 let name = "刘备"; let sex = '男'; alert(typeof sex) //布尔类型：boolean，值只有true和false let flag = true; -
特殊类型
-
//未定义的数据类型：undefined，声明了变量未赋值 let a; alert(typeof a); //undefined -
复杂类型
//复杂类型：object //声明对象 let student = { name: "小乔", age: 18 }; let emp = new Object();//声明了一个空对象 emp.empno = 1;//给对象赋值 emp.ename = "大乔"; alert(typeof student); //声明数组 let arr1 = [];//声明了一个数组 arr1[0] = "a"; arr1[1] = "b"; let arr2 = [1,2,3];//声明数组并赋值 let arr3 = new Array();//声明数组 arr3[0] = "李明";//给数组赋值 arr3[1] = "王浩"; alert(typeof arr2)//object //声明日期 let date = new Date() alert(typeof date);//object let b = null; alert(typeof b);//object -
判断数据类型的方法typeof，返回值有
-
number：数值型
-
string：字符串类型
-
boolean：true或false
-
undefined：声明但是未赋值
-
object：JavaScript中的对象、日期、数组和null
-
-
数据类型之间的隐式转换
let num = 100; let str = "hello"; let f1 = true; let f2 = false; //数值型+字符串型：转化为字符串类型 alert(num + str);//100hello //数值型+布尔类型：布尔的值true转化为1，false转化为0，再和数字相加 alert(num + f1);//101 alert(num + f2);//100 //字符串类型+布尔类型：布尔的值转化为字符串true或false，再和字符串相连 alert(str + f1);//hellotrue alert(str + f2);//hellofalse //布尔类型+布尔类型：布尔的值true转化为1，false转化为0，再相加 alert(f1 + f2) //1
六、运算符（基本和java中一样）
-
算数运算符：+ - * / % ++ --
-
比较运算符：> < >= <= != ==(值相等即为true) ===(当值和数据类型都相等才为true)
let num = 20; let str = "20"; let str2 = "20"; alert(num == str);//true alert(num === str);//false alert(str === str2);//true -
逻辑运算符：&& || !
-
三目（三元）运算符：？ ：
-
赋值运算符：= += -=
七、流程控制语句（和java一样）
-
if
-
if - else
-
if - else if - ...else
-
switch - case
-
fori
-
while
-
do-while
-
break
-
continue
八、各种弹出框
-
alert("提示信息")：只有一个确定按钮的警示或警告框
-
confirm("提示信息")：带有确定和取消按钮的提示框，返回值为boolean类型，点击确定返回true，点击取消返回false
let flag = confirm("确定删除吗？"); if (flag) { alert("删除成功") } else { alert("取消删除") } -
prompt("提示信息"，"输入框中的默认信息")，返回值为输入框中的内容
-
let num = prompt("你想输出几次hello？",5);
for (let i = 0; i < num; i++) {
document.write("hello ")
}
...全文
请发表友善的回复…
发表回复
